Storybook for Angular fails with default/initial library config (Zero-config setup) #16110
Comments
|
After adding the "architect": {
"build": {
"builder": "@angular-devkit/build-angular:ng-packagr",
"options": {
"project": "projects/my-lib/ng-package.json",
"tsConfig": "projects/my-lib/tsconfig.lib.prod.json" // <--- added
},and running I was expecting a working but empty storybook page. |
|
For some reason the generated storybook tsconfig had 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. {
"exclude": [
"../src/test.ts",
"../src/**/*.spec.ts",
"../projects/**/*.spec.ts",
"../projects/**/e2e/**/*" // <--- added this
], |
|
Storybook didn't automatically pickup on my stories. I needed to alter module.exports = {
stories: [
'../stories/**/*.stories.mdx',
'../stories/**/*.stories.@(js|jsx|ts|tsx)',
// added the below
'../projects/**/*.stories.mdx',
'../projects/**/*.stories.@(js|jsx|ts|tsx)',
],Ideally it would be as below. But in my default library project there is no module.exports = {
stories: [
'../stories/**/*.stories.mdx',
'../stories/**/*.stories.@(js|jsx|ts|tsx)',
'../src/**/*.stories.mdx',
'../src/**/*.stories.@(js|jsx|ts|tsx)',
'../projects/**/*.stories.mdx',
'../projects/**/*.stories.@(js|jsx|ts|tsx)',
], |
|
Another workaround : I don't know if this will help but I had the same need on my project here's what I did: I added a new project specifically for storybook and I use the native storybook builder. // angular.json
"projects": {
...(i've only one other library with ng-pkgr)
"storybook": {
"projectType": "library",
"root": "./",
"architect": {
"style-injection": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"tsConfig": ".storybook/tsconfig.json", // <- needed to have dedicated tsconfig for storybook
"styles": [".storybook/index.scss"], // <- to add global style like in real app
"outputPath": "noop",
"index": "noop",
"main": "noop"
}
},
"start": {
"builder": "@storybook/angular:start-storybook",
"options": {
"browserTarget": "storybook:style-injection",
"compodoc": false,
"port": 9008
}
},
"build": {
"builder": "@storybook/angular:build-storybook",
"options": {
"browserTarget": "storybook:style-injection",
"compodoc": false
}
}
}
}
...in my package.json script : |
|
@ThibaudAV Do you have an example repo where this is setup? What does the |
|
https://github.com/storybookjs/storybook/blob/next/examples/angular-cli/angular.json @chriscarpenter12 I've started to document the migration here. I'm not an Angular person, so any suggestions are welcome: |
|
I saw the new architect configs referenced in a few places, but how is that picked up by running/building storybook? Because your package.json storybook script isn't calling that architect? Shouldn't it be something like Also what is this config? |
|
@chriscarpenter12 Yes |
|
you currently have 2 ways to start Storybook
if you have an angular workspace with only library I recommend you to use the builder
here for ex: |
|
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! |
|
Just checked with the latest versions.
Then when I run I get this error Seems this is still an issue. These are the packages from the package.json "dependencies": {
"@angular/animations": "^15.2.0",
"@angular/common": "^15.2.0",
"@angular/compiler": "^15.2.0",
"@angular/core": "^15.2.0",
"@angular/forms": "^15.2.0",
"@angular/platform-browser": "^15.2.0",
"@angular/platform-browser-dynamic": "^15.2.0",
"@angular/router": "^15.2.0",
"rxjs": "~7.8.0",
"tslib": "^2.3.0",
"zone.js": "~0.12.0"
},
"devDependencies": {
"@angular-devkit/build-angular": "^15.2.4",
"@angular/cli": "~15.2.4",
"@angular/compiler-cli": "^15.2.0",
"@types/jasmine": "~4.3.0",
"jasmine-core": "~4.5.0",
"karma": "~6.4.0",
"karma-chrome-launcher": "~3.1.0",
"karma-coverage": "~2.2.0",
"karma-jasmine": "~5.1.0",
"karma-jasmine-html-reporter": "~2.0.0",
"typescript": "~4.9.4"
}Seems to be missing at least |
|
@snebjorn Can you try using the 7.0 release (which is currently in RC): I believe this is already fixed there. |
|
Just checked with the latest RC versions. (as of writing: [email protected])
v7 docs doesn't say to alter angular.json so I didn't (https://storybook.js.org/docs/7.0/angular/get-started/install) Running: Docs didn't say to create my-project:storybook in angular.json so the project target do indeed not exist. Here's the packages from the package.json "dependencies": {
"@angular/animations": "^15.2.0",
"@angular/common": "^15.2.0",
"@angular/compiler": "^15.2.0",
"@angular/core": "^15.2.0",
"@angular/forms": "^15.2.0",
"@angular/platform-browser": "^15.2.0",
"@angular/platform-browser-dynamic": "^15.2.0",
"@angular/router": "^15.2.0",
"rxjs": "~7.8.0",
"tslib": "^2.3.0",
"zone.js": "~0.12.0"
},
"devDependencies": {
"@angular-devkit/build-angular": "^15.2.4",
"@angular/cli": "~15.2.4",
"@angular/compiler-cli": "^15.2.0",
"@types/jasmine": "~4.3.0",
"jasmine-core": "~4.5.0",
"karma": "~6.4.0",
"karma-chrome-launcher": "~3.1.0",
"karma-coverage": "~2.2.0",
"karma-jasmine": "~5.1.0",
"karma-jasmine-html-reporter": "~2.0.0",
"typescript": "~4.9.4"
} |
@snebjorn Right, because Storybook does this for you when you run I cannot reproduce your issue with the following steps:
The |
|
I'm using Windows |
|
@snebjorn I am still unable to replicate your mentioned issue on a Windows machine. The |
|
does |
|
It seems that even the
I can't see this output in your logs. I have also tried your node and npm version and I am still not able to reproduce the issue :/ |
|
Appears there's an issue with running
|
|
Great! I will close this issue then. |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Describe the bug
Storybook for Angular fails to build with default (initial) library configuration. It'll complain about a missing
tsConfigsetting. But thetsConfigis present - just not in the expected place.This is the default (created by angular cli) library config (angular.json)
To Reproduce
Repo: https://github.com/snebjorn/ng12-lib
Steps to reproduce:
Error: Missing required options in project target. Check "tsConfig"System
Other concerns
When installing NPM threw these warnings.
Would probably be a good idea to get these updated :)
The text was updated successfully, but these errors were encountered: