Storybook: Failed to get angular-cli webpack config since @angular-devkit/build-angular 0.8.0-beta.2

[gaetanmaisse]

Bug summary

Since the release of @angular-devkit/build-angular 0.8.0-beta.2 storybook-angular fails at getting angular-cli webpack config.

It's just a warning and do no prevent storybook to run BUT as config from angular.json is not loaded it causes styles and app specific configs not to be used. And so in my company project every SASS/CSS styles are failing.

Expected Behavior

Webpack config loading should be working great, like with previous version of @angular-devkit/build-angular

Steps to reproduce

Just follow the getting started:

• Generate an angular project with @angular/cli:

  • npm i -g @angular/cli
  • ng new your-angular-prj

• Add storybook to the project:

  • npm i -g @storybook/cli
  • getstorybook

• Add bable deps:

  • npm i -D @babel/core babel-loader@next

• Start storybook:

  • npm run storybook

Please specify which version of Storybook and optionally any affected addons that you're running

• @storybook/angular: v4.0.0-alpha.24
• @storybook/addon-actions: v4.0.0-alpha.24
• @storybook/addon-links: v4.0.0-alpha.24
• @storybook/addon-notes: v4.0.0-alpha.24
• @storybook/addons: v4.0.0-alpha.24

Affected platforms

• All angular projects generated with @angular/cli v6.2.0-beta.2 or newer

[gaetanmaisse]

After investigation, problem comes from changes made in @angular-devkit/build-angular to support Ivy renderer option:

...
const isIvyEnabled = wco.tsConfig.raw.angularCompilerOptions
                    && wco.tsConfig.raw.angularCompilerOptions.enableIvy;

...

And it looks like wco.tsConfig object given by storybook during startup has no raw.

Will see to fix this today and make a PR.

[gaetanmaisse]

Looks like this bug was fixed yesterday by commit https://github.com/storybooks/storybook/commit/22d4de112b51a1790aade6ef31211323fea44483 of @igor-dv, thanks!
Just have to wait for the next release now.

[sunlanterns]

I'm getting this issue, while trying to work with Angular v. 7.2.0 and Storybook v. 4.1.6 - which already has the solution posted. Working on base apps for both frameworks with no customization in place yet to explain away the issue.

[IdanCo]

same problem with angular 7.2.0 and @storybook/angular 4.1.6

Steps to reproduce

• Generate an angular project with @angular/cli:
  
  
  
  • ng new your-angular-prj
  
  
• Add storybook to the project:
  
  
  
  • sb init
  
  
• Start storybook:
  
  
  
  • npm run storybook
  
  

[cargillchantry]

I am also having this issue. Should this be reopened?

[yjcxy12]

Specifying @angular-devkit version worked as a workaround for us for now.

Add these to devDependencies then do npm install

"@angular-devkit/build-angular": ~0.10.7,
"@angular-devkit/build-ng-packagr": ~0.10.7,

[sunlanterns]

@yjcxy12 Great workaround!

There is an open issue for this now for anyone looking:

5239

[shilman]

Huzzah!! I just released https://github.com/storybooks/storybook/releases/tag/v5.0.0-rc.7 containing PR #5776 that references this issue. Upgrade today to try it out!

Because it's a pre-release you can find it on the @next NPM tag.

[androdel]

I get the following when I try to run storybook@next:

Error: Cannot find module 'emotion-theming/package.json'
EntryModuleNotFoundError: Entry module not found: Error: Can't resolve './src' in [project]

[shilman]

@androdel Have you tried removing node_modules and reinstalling? Or even removing yarn.lock and node_modules and reinstalling (if you're using yarn)?

[androdel]

Doesn't make a difference

[martinmcwhorter]

I am seeing this exact issue with Storybook 5.0.3 and Angular 6.1.8.

I have upgraded the @angular-devkit packages as described above, with no success in solving this issue.

Is their a way to completely ignore the Angular CLI webpack config, as another option?

[MaximSagan]

Having the same issue (Failed to get angular-cli webpack config.) in the latest Storybook with the latest @angular-devkit/build-angular. Will try to look into this when I have a chance.

[jkvim]

update @angular-devkit/build-angular to 0.13.1 fix the issue

[MaximSagan]

@jkvim The issue causing Failed to get angular-cli webpack config is not the same for all of us. I was on 0.13.8, and I assume @martinmcwhorter was user a newer version too.

Anyway, I finally got around to looking into this, and I have identified the issue in my case.

The error was, as in other cases, indeed caused here when Storybook's getAngularCliParts() calls @angular-devkit/build-angular's getCommonConfig. However, for me, within this function the error was thrown by path.resolve() here because the argument buildOptions.outputPath was undefined.

Now why was outputPath undefined? This is where it's Storybook's fault. Storybook here assumes that sufficient build options can be found in project.architect.build.options. However, this is really only for the a project's build's default options. If your build has multiple configurations (which mine did), the bulk of your settings may be located within project.architect.build.configurations.<configurationName> where the configuration name will be something like prod or staging.

Now, in my case, as Storybook doesn't seem to use outputPath for anything, I can just set project.architect.build.options.outputPath to a dummy string to solve this issue. You might argue that it is good practice to have one of my configurations as the "base" configuration, described in project.architect.build.options rather than within project.architect.build.configurations.<baseConfiguration>. However, I think the bigger issue at play here is that Storybook does not respect project configurations. It barely supports multiple projects (FYI monorepos can have multiple projects defined within one angular.json file), so this is hardly surprising.

I think the best solution is for Storybook to allow specification of both the Angular project and its configuration. (With regards to the project selection, Angular currently takes the project marked in angular.json's defaultProject property, which is hardly convenient as it requires us to change angular.json in order to have Storybook target a different project.). I will probably make a PR for this in the not-too-distant future.

[Ludevik]

@MaximSagan i struggled with same issue. Wondered why my storybook behaves strange until i added defaultProject to angular.json. When the storybook failed to load angular-cli webpack config then i had multiple issues, like not able to import components from my shared library, not able to use .less files, etc. Adding project from angular.json as a parameter for storybook would help in my case too.

[bjornandersson]

@MaximSagan @Ludevik I have the same issue on Angular 8.2.4 and Storybook 5.1.11 and none of the above workarounds seems to be working for me. Was there ever a PR made for this or was the workaround accepted as a solution?

[Ludevik]

@bjornandersson I am not sure. The version I used was Angular 8.1.2 and Storybook 5.1.9 so there may be differences. My latest setup was, instead of using default project in angular.json, to create storybook application configuration in angular.json. Content was mostly copied from my real application. You might try that as well.