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

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:

setup angular storybook project using V5.0.0-rc.7 or greater
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

About this issue

Original URL
State: closed
Created 5 years ago
Comments: 23 (9 by maintainers)

Most upvoted comments

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 😃

gabrielmf on Jun 21, 2019

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 on Apr 16, 2019

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.

fsz on Apr 17, 2019

@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?

codeNoobie on Mar 27, 2019

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

igor-dv on Mar 3, 2019