Loading css breaks in Angular 12.2

[fikkatra]

Bug description
When upgrading to Angular 12.2 (currently latest stable version), stylesheets are not loaded anymore.

To Reproduce
https://github.com/fikkatra/storybook-repro

When running npx sb@next repro and choosing 'angular', angular version 12.2 is installed and the issue can be reproduced as is, without any alterations to the code (except for adding a stylesheet).

Manual repro steps

Create a new Angular app:
npx ng new taskbox

This currently installs v12.1.1 (unlike npx sb@next repro, which installs 12.2).

Add storybook to the app:
cd taskbox
npx sb init

Add a stylesheet to preview.js:
import "!style-loader!css-loader!./styles.css";

Add styles.css to the .storybook directory and add the following styling:

body {
  background-color: yellow;
}

Run storybook:
npm run storybook

Result: styles are loaded:

Now upgrade Angular:
npx ng update @angular/cli @angular/core

and run again:
npm run storybook

Result: styles are not loaded:

The following Github repository demonstrates these repro steps. This commit breaks the loading of the style sheet:
https://github.com/fikkatra/storybook-repro-manual

System
Environment Info:

System:
OS: macOS 11.6
CPU: (8) x64 Intel(R) Core(TM) i5-8259U CPU @ 2.30GHz
Binaries:
Node: 14.17.3 - /usr/local/bin/node
Yarn: 1.22.15 - /usr/local/bin/yarn
npm: 6.14.13 - /usr/local/bin/npm
Browsers:
Chrome: 94.0.4606.71
Firefox: 91.0.2
Safari: 15.0

Additional context
Initial (working) version of (relevant) installed packages:
@angular/core: ~12.1.1
@angular-devkit/build-angular: ~12.1.1
css-loader: 5.2.6
style-loader: 2.0.0

Updated (not working) version of installed packages:
@angular/core: ~12.2.8
@angular-devkit/build-angular: ~12.2.8
css-loader: 5.2.6
style-loader: 2.0.0

[archfisv]

I can confirm, we have the same problem.

[archfisv]

@fikkatra did you find a workaround?

[fikkatra]

@archfisv no, for now we decided to postpone the Angular update

[vlautac]

I run into the same problem when trying to upgrade on Angular v12.2.11 + Storybook v6.3.12.
Global styles are not loaded anymore

[McGiogen]

After some research I found that the problem happens upgrading @angular-devkit/build-angular to version 12.2.0 or more.
Waiting a fix, you can upgrade every angular package to 12.2.x but @angular-devkit/build-angular (add it to devDependencies if missing).

[archfisv]

Any suggestions @shilman? Would appreciate it.

[xXCalleManXx]

I also have some problem with Angular 13 and storybook ^6.4.0-rc.2

[ThibaudAV]

we have juste discuss about this issue on discord here

With this PR : #16256

For angular 2.2.x and higher you can fix it by this way

• remove import "!style-loader!css-loader!./styles.css"; from preview.js
• use builder to start/build storybook :
  add this "architect" in your angular.json

      "architect": {
...
        "start-storybook": {
          "builder": "@storybook/angular:start-storybook",
          "options": {
            "tsConfig": ".storybook/tsconfig.json",
            "styles": ["src/styles.scss", ".storybook/index.css"],
            "compodoc": true,
            "port": 9008
          }
        },
        "build-storybook": {
          "builder": "@storybook/angular:build-storybook",
          "options": {
            "tsConfig": ".storybook/tsconfig.json",
            "styles": ["src/styles.scss", ".storybook/index.css"],
            "compodoc": true
          }
        }
...

change script in your package.json

...
    "storybook": "ng run storybook-repro:start-storybook",
    "build-storybook": "ng run storybook-repro:build-storybook",
...

[xXCalleManXx]

I tried this with Angular 13.0.2 and Storybook 6.4.0-rc.4 and getting this error

chema validation failed with the following errors:
  Data path "" must NOT have additional properties(styles).

How to reproduce:
Install angular cli version 13.0.2

$ ng new angular-storybook (I chose angular routing and scss as styling)
$ cd angular-storybook
$ npx sb@next init

I then put in the architects that @ThibaudAV have written.
I change the start scripts in package.json

...
    "storybook": "ng run angular-storybook:start-storybook",
    "build-storybook": "ng run angular-storybook:build-storybook",
...

And then if I run npm run storybook, I recieve the error message.

[ThibaudAV]

yes it doesn't work for the moment it is necessary that the PR (#16675) is merge before and that there is a release.

but you can test with a storybook build on this branch and copy the angular app dist into your node_modules. If you do it don't hesitate to give me feedback 🙏 for the moment I have uniquely tested on 2 of my projects and it works very well

for the moment this pr is waiting for a feedback from @Marklb which should be tested soon on one of these projects. Then I would take into account the feedback. And then @shilman is in charge of the merge and release.

[shilman]

@ThibaudAV happy to merge/release as soon as you're ready

[ThibaudAV]

I am waiting for the return of @Marklb and if this feature seems to be enough for a first step for him too. I'll let you know :)

[tscislo]

Unfortunatelly this issue still exists with ng 12.2.x and storybook 6.4

[archfisv]

I can confirm, I visit this issue frequently ;). I think it's about @angular-devkit/build-angular (@ v12.0.3 works well).

[valentinpalkovic]

I am closing this for now because we only continue support for Angular >= v14. Please feel free to reopen the issue, if you can reproduce it with Storybook 7 and Angular greater or equal to v14.