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

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

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

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.

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,

Added tsConfig path to architect.build.builder.options

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 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.

Doesn’t make a difference

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]

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.

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.