Can't enable sourceMaps from angular.json with version 7.0

[cedar falcon]

We've recently dug into an issue that surfaced after upgrading to version 7.0 of Storybook. I'll do my best to explain:

The config for angular Storybook has now moved into the angular.json file with a new storybook entry within the project's definition.

The browserTarget is set to libraryName:build but you can't set the sourceMap on the build:configurations entry in angular. It needs to be set on the hosting app config. In the case of Storybook that's the storybook config settings. But there's no way to provide a configurations object and set sourceMap to true.

Is there another way in v7 w/ Angular to turn on SourceMaps that I'm missing? Or does the @storybook/angular:start-storybook builder need to be expanded?

angular.json is not something I'm super familiar with how it works.

[drowsy lagoon]

I have never needed to specify a configuration, since I have architect.build.defaultConfiguration set to the same config I use for Storybook, but you can specify the configuration using Angular's syntax for browserTarget. The 3rd value specifies a configuration. So, if you want to use the config "demo" then "browserTarget": "libraryName:build:demo".

[cedar falcon]

Even with doing that I am not able to specify the following configs:

"buildOptimizer": false,
"optimization": false,
"vendorChunk": true,
"extractLicenses": false,
"sourceMap": true,
"namedChunks": true

It will error on the first one with Data path "" must NOT have additional properties(buildOptimizer).

I don't think I'm able to set these properties on architect:build. The projectType is set to Library, not sure if it's related to that

[drowsy lagoon]

Yeah, that error is most likely being thrown by Angular, since we use let Angular parse the config. I have never seen anyone mention those for Storybook, so I am just wondering why they would need to be set?

At the moment, the only solution I can think of would be to define a second project in the angular.json that is an "application". I haven't checked to confirm they would actually affect the build though.

[cedar falcon]

It only appears to be an issue for us in v7 since it moved into the angular.json for the config. If I don't set them then I don't get sourceMaps when debugging in Storybook. Something that I had in v6

I'll mess around with a second project in angular.json and see if I can get any results and report back with the findings.

[cedar falcon]

Ok I did some digging and have some interesting findings:

I tried creating a new project that is set to "application" but I quickly had a bunch of settings that I didn't know how to fill out in the context of serving Storybook (like the index property).

I then turned my attention to the start-storybook file in my node_modules. I hard coded the sourceMap options on the angularBuilderOptions in that file and then it will builh with sourceMaps enabled.

So I'm wondering if these options (or the ability for more options) might need to pass through the Angular Storybook builders.

Example of the options I passed through and where:

angularBuilderOptions: {
                buildOptimizeras: false,
                optimization: false,
                vendorChunk: true,
                extractLicenses: false,
                sourceMap: true,
                namedChunks: true,
                ...(stylePreprocessorOptions ? { stylePreprocessorOptions } : {}),
                ...(styles ? { styles } : {}),
                ...(assets ? { assets } : {}),
            }

[drowsy lagoon]

What you hard-coded is what I was thinking as the fix, but pulled from a config option. I don't know what all options would actually affect the build for Storybook, but I am surprised the "sourceMap" one hasn't come up, yet. I just recently upgraded my projects to v7 and typically use the debugger more in tests than when running the app, so I guess I hadn't tried on v7, yet.

[cedar falcon]

I think it's mainly because we're using it with an Angular library, which can't take these options in it's schema since it's a library and is expected to be consumed into an application. I have a sample application where I can set these options and serve up my library. But I wasn't able to do it with Storybook and my library

[drowsy lagoon]

When I said to add an application in angular.json, I only meant the config, so no actual projects files are needed and most of the options don't matter for Storybook and just need to exist for the validation. I just tried in my library and all I did is add the following to the projects array in angular.json and my breakpoints worked.

"sb-lib-app": {
  "projectType": "application",
  "root": "",
  "sourceRoot": "src",
  "prefix": "app",
  "architect": {
    "build": {
      "builder": "@angular-devkit/build-angular:browser",
      "options": {
        "outputPath": "",
        "index": "",
        "main": "",
        "tsConfig": "projects/sb-lib-app/tsconfig.sb.json",
        "sourceMap": true
      }
    },
    "storybook": {
      "builder": "@storybook/angular:start-storybook",
      "options": {
        "browserTarget": "sb-lib-app:build",
        "port": 6007,
        "tsConfig": "projects/sb-lib-app/tsconfig.sb.json",
        "compodoc": true
      }
    }
  }
}

[cedar falcon]

Oh ok I didn't realize most of those properties could be empty for Storybook.

That being said, I feel like I'm close but still it isn't working.

With the above setup it gets far in the build process but dies when it reaches the .stories.ts files with this error:

ModuleParseError: Module parse failed: Unexpected token (54:20)
File was processed with these loaders:
 * ./node_modules/@angular-devkit/build-angular/src/babel/webpack-loader.js
 * ./node_modules/unplugin/dist/webpack/loaders/load.js
You may need an additional loader to handle the result of these loaders.
|   }
| };
> export const Default: StoryObj<PatchButtonComponent> = {
|   render: (args: PatchButtonComponent) => ({
|     props: {