Skip to content
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

Merged
merged 2 commits into from
Dec 10, 2021
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
53 changes: 51 additions & 2 deletions MIGRATION.md
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand Down Expand Up @@ -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"],
Copy link

@pixtim pixtim Jan 23, 2022

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.

}
}
},
},
```

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": {

Choose a reason for hiding this comment

The 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 @nrwl/nx set ups or not, but I specifically needed to put this in the build-storybook stanza that follows, NOT the storybook one here. I don't have time to update migration guide, sorry, but just a heads up for posterity and others searching until docs proper get updated.

"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.

Expand Down