Storybook: Startup Fails - Angular - Failed to get angular-cli webpack config - Last working version V5.0.0-rc.6

[CodeByAlex]

Describe the bug
Cannot find angular cli webpack version and begins using default webpack setup. This causes issues where different parts of monorepo cannot be found and storybook never starts.

To Reproduce
Steps to reproduce the behavior:

1. setup angular storybook project using V5.0.0-rc.7 or greater
2. run storybook

Expected behavior
Use the webpack config provided.

Screenshots
If applicable, add screenshots to help explain your problem.

Code snippets
OLD (correct):

**info @storybook/angular v5.0.0-rc.6
info
info => Loading presets
info => Loading presets
info => Loading custom addons config.
info => Found custom tsconfig.json
info => Loading angular-cli config.
info => Get angular-cli webpack config.
info => Using default webpack setup.
Starting type checking service...

NEW:

info @storybook/angular v5.0.0-rc.8
info
info => Loading presets
info => Loading presets
info => Loading custom addons config.
info => Found custom tsconfig.json
info => Loading angular-cli config.
WARN => Failed to get angular-cli webpack config.
info => Using default webpack setup.
Starting type checking service...

System:

• Framework: [angular]
• Version: [>V5.0.0-rc.7]

Additional context
Im using a monorepo style project

[shilman]

@CodeByAlex @gaetanmaisse @yjcxy12 This is the only angular-related PR that got merged in that tiemeframe, in rc.7:

• Angular: Fix global style imports (#5776)

Is that enough to debug what's going on? I don't use Angular myself... 🤷‍♂️

[CodeByAlex]

@shilman, That did help. The issue was caused by this line in the build options of the angular-cli_config.js file:
sourceMap: {},
According to #5525, both buildOptions.sourceMap and buildOptions.optimization were added by default to angular webpack config in order to ensure that @angular-devkit/build-angular does not fail. I wasnt having the original issue with devkit, @yjcxy12, could you shed some light on this?

[igor-dv]

@CodeByAlex what version of "@angular-devkit/build-angular" are you using?

[CodeByAlex]

@igor-dv, it looks like I was running an older version of @angular-devkit/build-angular: 0.8.0-rc.0. Now that I have upgraded, the issue has been fixed. Nice catch. This issue can probably be closed due to the fact that one version was not compatible with the other.

[igor-dv]

Thanks =)

[codeNoobie]

@igor-dv I am getting this error too on migration to storybook v5 from v4. What is the recommended version of angular dev kit that would work with storybook 5?

[bufke]

@codeNoobie I had this error until I used

    "@angular-devkit/build-angular": "~0.13.7",
    "@angular-devkit/build-ng-packagr": "~0.13.7",
    "@storybook/angular": "^5.0.6",

Versions have to be exact, seems like any mismatch results in the failed to get webpack config error.

[codeNoobie]

@bufke Thanks! Yes this fixed it. Sorry for a late reply. May be the storybook should declare these dev dependencies versions as a must for 5.0.6?

[shilman]

@kroeder any thoughts on this?

[fsz]

Even with the versions that @bufke mentioned I was still getting this error.

Debugging the problem I've found out that the buildOptions are missing the required options styles, scripts and outputPath. Because my project is just a library these are not included in my angular.json. After adding the three options to it the error was gone:

 "projectType": "library",
 "architect": {
        "build": {
          "builder": "@angular-devkit/build-ng-packagr:build",
          "options": {
            "tsConfig": "projects/components/tsconfig.lib.json",
            "project": "projects/components/ng-package.json",
            "styles": [],
            "scripts": [],
            "outputPath": ""
          }
        },

Maybe the options should be added by default in angular-cli_config.js -> getAngularCliWebpackConfigOptions

[fsz]

I just realized that the project is not building after adding the additional options to the angular.json. The build process does not allow these on a library.

So a fix is definitively required.

[github-actions[bot]]

Automention: Hey @MaximSagan @kroeder @ndelangen, you've been tagged! Can you give a hand here?

[shilman]

@CodeByAlex do you know what's going on here? seems like this is quiet.

[blemaire]

This error appears when using components from an Angular library. I haven't had any issues appart from the warning in the terminal.
tldr; ignore it ;)

[rootical]

None of the solutions above seem to help. Anyway with this warning I was able to run the storybook.
If you're getting errors during npm run storybook, make sure to update tsconfig (and make sure it extends a proper config, case for angular-universal, for instance). I also had to exclude tsx and server specs to make it build.

[fsz]

By ignoring the warning and not using the default angular webpack config results in parse errors in LESS files in my case. I could extend the webpack config to fix that but I would rather not do it.

I think it could easily be fixed by adding the required buildOptions parameters styles, scripts and outputPath as empty defaults to https://github.com/storybooks/storybook/blob/next/app/angular/src/server/angular-cli_config.js#L71

[stale[bot]]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

[gabrielmf]

Hey, I think I managed to fix the issue, at least it worked for me.

Context

I am creating an angular library with storybook, at first the build was not working, for the same reasons as @fsz mentioned, it was missing these properties.

Even with the versions that @bufke mentioned I was still getting this error.

Debugging the problem I've found out that the buildOptions are missing the required options styles, scripts and outputPath. Because my project is just a library these are not included in my angular.json. After adding the three options to it the error was gone:

 "projectType": "library",
 "architect": {
        "build": {
          "builder": "@angular-devkit/build-ng-packagr:build",
          "options": {
            "tsConfig": "projects/components/tsconfig.lib.json",
            "project": "projects/components/ng-package.json",
            "styles": [],
            "scripts": [],
            "outputPath": ""
          }
        },

Maybe the options should be added by default in angular-cli_config.js -> getAngularCliWebpackConfigOptions

This fixed the storybook, but then I was not able to build the library anymore. The build settings didn't match the schema from ng-packgr.

Solution

After digging into https://github.com/storybookjs/storybook/blob/next/app/angular/src/server/angular-cli_config.js#L71 I've found out that it's expecting a project named storybook in your angular.json, if none is found it will defaults to your default project.

My angular.json file looks like this:

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "",
  "projects": {
    "my-library": {
      "root": "",
      "sourceRoot": "src",
      "projectType": "library",
      "prefix": "lib",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-ng-packagr:build",
          "options": {
            "tsConfig": "src/tsconfig.lib.json",
            "project": "src/ng-package.json"
          }
        },
        "test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
            "main": "src/test.ts",
            "tsConfig": "src/tsconfig.spec.json",
            "karmaConfig": "src/karma.conf.js"
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": [
              "src/tsconfig.lib.json",
              "src/tsconfig.spec.json"
            ],
            "exclude": [
              "**/node_modules/**"
            ]
          }
        }
      }
    },
    "storybook": {
      "root": "",
      "sourceRoot": "src",
      "projectType": "library",
      "prefix": "lib",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-ng-packagr:build",
          "options": {
            "tsConfig": "src/tsconfig.lib.json",
            "project": "src/ng-package.json",
            "styles": [],
            "scripts": [],
            "outputPath": "dist"
          }
        }
      }
    }
  },
  "schematics": {
      "@schematics/angular:component": {
      "styleext": "scss"
    }
  },
  "defaultProject": "my-library"
}

By declaring the storybook as a project, I can customize the builder with any additional settings I want without interfering with the main project build.
I am using @storybook/angular": "5.1.8".

Hope it helps :)

[MatthewMSaucedo]

@gabrielmf this fix worked for me, and now my angular-cli webpack config doesn't throw any errors. However, I'm still failing immediately afterwards when the type checking service runs -- any ideas?

[shilman]

@gabrielmf @MatthewMSaucedo Does this workaround also imply a fix? If so, any interest in contributing the fix as a PR?

[MatthewMSaucedo]

Was able to fix my typing issue by then modifying the .storybook/tsconfig.json to what I needed to pass typechecking. Now running storybook with no issue 👍

It seems like the script for install should ideally be adding in the storybook project to angular.json -- I wouldn't be too sure where to begin on that pr but I may look into it.

[stale[bot]]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

[stale[bot]]

Hey there, it's me again! I am going close this issue to help our maintainers focus on the current development roadmap instead. If the issue mentioned is still a concern, please open a new ticket and mention this old one. Cheers and thanks for using Storybook!