storybook: Storybook for Angular fails with default/initial library config (Zero-config setup)

Describe the bug

Storybook for Angular fails to build with default (initial) library configuration. It’ll complain about a missing tsConfig setting. But the tsConfig is present - just not in the expected place.

info => Using angular project "my-lib:build" for configuring Storybook
ERR! => Could not get angular cli webpack config
ERR! Error: Missing required options in project target. Check "tsConfig"

This is the default (created by angular cli) library config (angular.json)

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "my-lib": {
      "projectType": "library",
      "root": "projects/my-lib",
      "sourceRoot": "projects/my-lib/src",
      "prefix": "lib",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:ng-packagr",
          "options": {
            "project": "projects/my-lib/ng-package.json"
            // <-------------------------------------------------- Storybook complains there is no tsConfig here
          },
          "configurations": {
            "production": {
              "tsConfig": "projects/my-lib/tsconfig.lib.prod.json" // <-- but it's here
            },
            "development": {
              "tsConfig": "projects/my-lib/tsconfig.lib.json" // <------- and here
            }
          },
          "defaultConfiguration": "production"
        },
        "test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
            "main": "projects/my-lib/src/test.ts",
            "tsConfig": "projects/my-lib/tsconfig.spec.json",
            "karmaConfig": "projects/my-lib/karma.conf.js"
          }
        }
      }
    }
  },
  "defaultProject": "my-lib"
}

To Reproduce Repo: https://github.com/snebjorn/ng12-lib

Steps to reproduce:

  1. ng new ng12-lib --create-application=false
  2. cd .\ng12-lib\
  3. ng generate library my-lib
  4. npx sb@next init
  5. npm run storybook
  6. Observe error: Error: Missing required options in project target. Check "tsConfig"

System

Environment Info:

  System:
    OS: Windows 10 10.0.19041
    CPU: (4) x64 Intel(R) Xeon(R) CPU E5-2676 v3 @ 2.40GHz
  Binaries:
    Node: 14.15.1 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.11 - ~\AppData\Roaming\npm\yarn.CMD
    npm: 7.24.0 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Chrome: 93.0.4577.82
    Edge: Spartan (44.19041.1023.0), Chromium (93.0.961.52)
  npmPackages:
    @storybook/addon-actions: ^6.4.0-alpha.39 => 6.4.0-alpha.39
    @storybook/addon-essentials: ^6.4.0-alpha.39 => 6.4.0-alpha.39
    @storybook/addon-links: ^6.4.0-alpha.39 => 6.4.0-alpha.39
    @storybook/angular: ^6.4.0-alpha.39 => 6.4.0-alpha.39
    @storybook/builder-webpack5: ^6.4.0-alpha.39 => 6.4.0-alpha.39
    @storybook/manager-webpack5: ^6.4.0-alpha.39 => 6.4.0-alpha.39

Other concerns When installing NPM threw these warnings.

npm WARN deprecated chokidar@2.1.8: Chokidar 2 will break on node v14+. Upgrade to chokidar 3 with 15x less dependencies.
npm WARN deprecated sane@4.1.0: some dependency vulnerabilities fixed, support for node < 10 dropped, and newer ECMAScript syntax/features added
npm WARN deprecated uuid@3.4.0: Please upgrade  to version 7 or higher.  Older versions may use Math.random() in certain circumstances, which is known to be problematic.  See https://v8.dev/blog/math-random for details.
npm WARN deprecated core-js@2.6.12: core-js@<3.3 is no longer maintained and not recommended for usage due to the number of issues. Because of the V8 engine whims, feature detection in old core-js versions could cause a slowdown up to 100x even if nothing is polyfilled. Please, upgrade your dependencies to the actual version of core-js.

Would probably be a good idea to get these updated 😃

About this issue

  • Original URL
  • State: closed
  • Created 3 years ago
  • Reactions: 4
  • Comments: 20 (9 by maintainers)

Most upvoted comments

For some reason the generated storybook tsconfig had "extends": "../False",

When I changed that to

{
  "extends": "../tsconfig.json",
  // ...

it started to look manageable.

But seems you forgot about e2e tests. They too are generated by default. Had to add "../projects/**/e2e/**/*"

{
  "exclude": [
    "../src/test.ts",
    "../src/**/*.spec.ts",
    "../projects/**/*.spec.ts",
    "../projects/**/e2e/**/*" // <--- added this
  ],

@snebjorn Can you try using the 7.0 release (which is currently in RC):

npx sb@next init

I believe this is already fixed there.