-
-
Notifications
You must be signed in to change notification settings - Fork 9.5k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Added MIGRATION instructions for Angular 13 / SB6.4 for Angular #16980
Changes from all commits
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -17,7 +17,10 @@ | |
- [Emotion11 quasi-compatibility](#emotion11-quasi-compatibility) | ||
- [Babel mode v7](#babel-mode-v7) | ||
- [Loader behavior with args changes](#loader-behavior-with-args-changes) | ||
- [Angular component parameter removed](#angular-component-parameter-removed) | ||
- [6.4 Angular changes](#64-angular-changes) | ||
- [SB Angular builder](#sb-angular-builder) | ||
- [Angular13](#angular13) | ||
- [Angular component parameter removed](#angular-component-parameter-removed) | ||
- [6.4 deprecations](#64-deprecations) | ||
- [Deprecated --static-dir CLI flag](#deprecated---static-dir-cli-flag) | ||
- [From version 6.2.x to 6.3.0](#from-version-62x-to-630) | ||
|
@@ -470,7 +473,53 @@ This will create a `.babelrc.json` file. This file includes a bunch of babel plu | |
|
||
In 6.4 the behavior of loaders when arg changes occurred was tweaked so loaders do not re-run. Instead the previous value of the loader is passed to the story, irrespective of the new args. | ||
|
||
### Angular component parameter removed | ||
### 6.4 Angular changes | ||
|
||
#### SB Angular builder | ||
|
||
Since SB6.3, Storybook for Angular supports a builder configuration in your project's `angular.json`. This provides an Angular-style configuration for running and building your Storybook. The full builder documentation will be shown in the [main documentation page](https://storybook.js.org/docs/angular) soon, but for now you can check out an example here: | ||
|
||
- `start-storybook`: https://github.com/storybookjs/storybook/blob/next/examples/angular-cli/angular.json#L78 | ||
- `build-storybook`: https://github.com/storybookjs/storybook/blob/next/examples/angular-cli/angular.json#L86 | ||
|
||
#### Angular13 | ||
|
||
Angular 13 introduces breaking changes that require updating your Storybook configuration if you are migrating from a previous version of Angular. | ||
|
||
Most notably, the documented way of including global styles is no longer supported by Angular13. Previously you could write the following in your `.storybook/preview.js` config: | ||
|
||
``` | ||
import '!style-loader!css-loader!sass-loader!./styles.scss'; | ||
``` | ||
|
||
If you use Angular 13 and above, you should use the builder configuration instead: | ||
|
||
```json | ||
"my-default-project": { | ||
"architect": { | ||
"build": { | ||
"builder": "@angular-devkit/build-angular:browser", | ||
"options": { | ||
"styles": ["src/styles.css", "src/styles.scss"], | ||
} | ||
} | ||
}, | ||
}, | ||
``` | ||
|
||
If you need storybook-specific styles separate from your app, you can configure the styles in the [SB Angular builder](#sb-angular-builder), which completely overrides your project's styles: | ||
|
||
```json | ||
"storybook": { | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. @shilman see #16950 (comment) -- I don't know if this is specific to the |
||
"builder": "@storybook/angular:start-storybook", | ||
"options": { | ||
"browserTarget": "my-default-project:build", | ||
"styles": [".storybook/custom-styles.scss"], | ||
}, | ||
} | ||
``` | ||
|
||
#### Angular component parameter removed | ||
|
||
In SB6.3 and earlier, the `default.component` metadata was implemented as a parameter, meaning that stories could set `parameters.component` to override the default export. This was an internal implementation that was never documented, but it was mistakenly used in some Angular examples. | ||
|
||
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
How would we use global SCSS in storybook with Angular 13 libraries? We're using the
@nrwl/angular:package
executor from Nx workspaces. It doesn't have an option to add global style sheets.