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

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® Core™ 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]

@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": []
          }
        },

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