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:
- ng new ng12-lib --create-application=false
- cd .\ng12-lib\
- ng generate library my-lib
- npx sb@next init
- npm run storybook
- 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)
For some reason the generated storybook tsconfig had
"extends": "../False",When I changed that to
it started to look manageable.
But seems you forgot about e2e tests. They too are generated by default. Had to add
"../projects/**/e2e/**/*"@snebjorn Can you try using the 7.0 release (which is currently in RC):
I believe this is already fixed there.