Failed to load the Angular CLI config. (Angular 8/Storybook 5.3.0-rc.8)

[cmurczek-it]

Describe the bug
I'm writing a library created with the Angular CLI (8.3.20). When I run storybook, I get the Failed to load the Angular CLI config. warning. I found #9206 dealing with a similar problem, but the suggested workaround did not fix the issue. I'd assume it's due to the fact that there is no app, just the lib.

To Reproduce
Steps to reproduce the behavior:

1. I created a repro repo at https://github.com/cmurczek/storybook-4-angular-lib
2. run storybook

Expected behavior
Storybook should be able to load the Angular CLI config

System:
Environment Info:

System:
OS: Windows 10 10.0.18363
CPU: (4) x64 Intel(R) Core(TM) i7-6600U CPU @ 2.60GHz
Binaries:
Node: 12.3.1 - C:\Program Files\nodejs\node.EXE
Yarn: 1.21.1 - C:\Program Files (x86)\Yarn\bin\yarn.CMD
npm: 6.9.0 - C:\Program Files\nodejs\npm.CMD
Browsers:
Edge: 44.18362.449.0

Additional context
the warning

WARN Failed to load the Angular CLI config. Using Storybook's default config instead.
WARN TypeError: Cannot read property 'map' of undefined
WARN at Object.normalizeExtraEntryPoints (C:...\sb4nglib\node_modules@angular-devkit\build-angular\src\angular-cli-files\models\webpack-configs\utils.js:36:29)
WARN at Object.getCommonConfig (C:...\sb4nglib\node_modules@angular-devkit\build-angular\src\angular-cli-files\models\webpack-configs\common.js:108:47)
WARN at Object.getAngularCliParts (C:...\sb4nglib\node_modules@storybook\angular\dist\server\angular-cli_utils.js:69:48)
WARN at Object.applyAngularCliWebpackConfig (C:...\sb4nglib\node_modules@storybook\angular\dist\server\angular-cli_config.js:101:40)
WARN at Object.webpackFinal (C:...\sb4nglib\node_modules@storybook\angular\dist\server\framework-preset-angular-cli.js:9:33)
WARN at C:...\sb4nglib\node_modules@storybook\core\dist\server\presets.js:250:72
WARN TypeError: Cannot read property 'map' of undefined
WARN at Object.normalizeExtraEntryPoints (C:...\sb4nglib\node_modules@angular-devkit\build-angular\src\angular-cli-files\models\webpack-configs\utils.js:36:29)
WARN at Object.getCommonConfig (C:...\sb4nglib\node_modules@angular-devkit\build-angular\src\angular-cli-files\models\webpack-configs\common.js:108:47)
WARN at Object.getAngularCliParts (C:...\sb4nglib\node_modules@storybook\angular\dist\server\angular-cli_utils.js:69:48)
WARN at Object.applyAngularCliWebpackConfig (C:...\sb4nglib\node_modules@storybook\angular\dist\server\angular-cli_config.js:101:40)
WARN at Object.webpackFinal (C:...\sb4nglib\node_modules@storybook\angular\dist\server\framework-preset-angular-cli.js:9:33)
WARN at C:...\sb4nglib\node_modules@storybook\core\dist\server\presets.js:250:72 {
WARN stack: "TypeError: Cannot read property 'map' of undefined\n at " +
WARN 'Object.normalizeExtraEntryPoints ' +
WARN '(C:\...\sb4nglib\node_modules\@Angular-devkit\build-angular\src\angular-cli-files\models\webpack-configs\utils.js:36:29)\n' +
WARN ' at Object.getCommonConfig ' +
WARN '(C:\...\sb4nglib\node_modules\@Angular-devkit\build-angular\src\angular-cli-files\models\webpack-configs\common.js:108:47)\n' +
WARN ' at Object.getAngularCliParts ' +
WARN '(C:\...\sb4nglib\node_modules\@storybook\angular\dist\server\angular-cli_utils.js:69:48)\n' +
WARN ' at Object.applyAngularCliWebpackConfig ' +
WARN '(C:\...\sb4nglib\node_modules\@storybook\angular\dist\server\angular-cli_config.js:101:40)\n' +
WARN ' at Object.webpackFinal ' +
WARN '(C:\...\sb4nglib\node_modules\@storybook\angular\dist\server\framework-preset-angular-cli.js:9:33)\n' +
WARN ' at ' +
WARN 'C:\...\sb4nglib\node_modules\@storybook\core\dist\server\presets.js:250:72'
WARN }
WARN => Failed to get angular-cli webpack config.`

[kroeder]

The same happens in the reproduction repo of this issue #9332 (comment)

Both projects are library only projects and have no app. I'll look into that

[michaelcamper]

Same issue here.

Minimal reproduction:
ng new demo --create-application false --minimal true
cd demo
npx -p @storybook/cli sb init --type angular
npm run storybook

WARN Failed to load the Angular CLI config. Using Storybook's default config instead.
WARN TypeError: Cannot read property 'map' of undefined

[kroeder]

@cmurczek I just created a PR that should fix this

Angular does not seem to handle undefined angular.json properties such as styles, scripts or outputPath

I added default values for them in https://github.com/storybookjs/storybook/pull/9390/files#diff-85c97608923e0cbbc684961efd172cacR111

You can try this in your angular.json

"my-lib": {
      "projectType": "library",
      "root": "projects/my-lib",
      "sourceRoot": "projects/my-lib/src",
      "prefix": "lib",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-ng-packagr:build",
          "options": {
            "tsConfig": "projects/my-lib/tsconfig.lib.json",
            "project": "projects/my-lib/ng-package.json",
            "budgets": [],
            "outputPath": "dist/my-lib",
            "styles": [],
            "scripts": []
          }
        },

[michaelcamper]

@kroeder Fixed it for me, good job!

[cmurczek-it]

@kroeder setting these in angular.json does resolve the warning when building storybook. It however also breaks ng build, since none of them are supported by the ng-packagr-builder. I'm just mentioning that because I saw in the PR that on line 112 you're using the outputPath property of project.architect.build.projectoptions. This key will however never exist, since angular libs are built using ng-packagr which has its config in the ng-package.json referenced under the project key. So it seems that any build related config should be taken from there.

Also my webpack.config is broken in regards to handling styles after adding the keys in angular.json. One of the issues I see is that the include paths, wich are originally set in ng-package.json and are added to webpack in my config, no longer work. This might be a different (follow up?) issue though.

[kroeder]

@cmurczek thanks for mentioning this.

The mentioned properties are set within storybook for a function call we do in @angular-devkit so it is not needed to add these to your own angular.json nor should it break ng build because ng build won't trigger any storybook webpack implementations

Let me know if I miss something!
#9390 got merged and should be released soon - let me know if this causes any trouble and we'll re-open this issue

[shilman]

w00t!! I just released https://github.com/storybookjs/storybook/releases/tag/v5.3.3 containing PR #9390 that references this issue. Upgrade today to try it out!