[Feature Request]: Compatibility with Angular 15

[yannbf]

Is your feature request related to a problem? Please describe

Angular 15 was released yesterday, and our CI detected a regression in Storybook.

When running Storybook with Angular 15.0.0, Storybook opens fine in the browser, however an error is thrown in the console:

runtime~styles.iframe.bundle.js:31 Uncaught TypeError: __webpack_require__.nmd is not a function
    at ./node_modules/webpack-hot-middleware/client.js?reload=true&quiet=false&noInfo=undefined (vendors-node_modules_storybook_addon-docs_angular_index_js-node_modules_storybook_addon-essen-10c1db.iframe.bundle.js:169050:53)
    at __webpack_require__ (runtime~styles.iframe.bundle.js:28:33)
    at __webpack_exec__ (main.iframe.bundle.js:275:48)
    at main.iframe.bundle.js:276:148
    at __webpack_require__.O (runtime~styles.iframe.bundle.js:72:23)
    at main.iframe.bundle.js:277:56
    at webpackJsonpCallback (runtime~styles.iframe.bundle.js:1077:39)
    at Array.forEach (<anonymous>)
    at runtime~styles.iframe.bundle.js:1091:31
    at runtime~styles.iframe.bundle.js:1093:13

Note
It's still unclear exactly what is the cause of the issue. However, I did identify that the issue started happening in 15.0.0-next.4. The error did not happen in 15.0.0-next.3.

How to reproduce the issue

The fastest way to get a Storybook + Angular 15 project is by running the following command in the terminal:

npx giget "gh:storybookjs/repro-templates-temp/angular-cli/default-ts/after-storybook#next" angular-storybook-repro
cd angular-storybook-repro
yarn
yarn storybook
(open in browser & inspect browser console)

Describe the solution you'd like

Storybook runs fine with Angular 15, without any errors thrown in the console.

Describe alternatives you've considered

No response

Are you able to assist to bring the feature to reality?

yes, I can

Additional context

Some investigation has been going on and findings have been reported at #19875

Also, I don't think it matters, but Storybook is completely broken from Angular 15.0.0-next.2 and lower alphas:

ERR! TypeError [ERR_INVALID_ARG_TYPE]: The "path" argument must be of type string. Received an instance of Array
ERR!     at __node_internal_captureLargerStackTrace (node:internal/errors:478:5)
ERR!     at new NodeError (node:internal/errors:387:5)
ERR!     at validateString (node:internal/validators:162:11)
ERR!     at Object.resolve (node:path:1098:7)
ERR!     at getCommonConfig (/Users/yannbraga/experiments/delete-angular/node_modules/@angular-devkit/build-angular/src/webpack/configs/common.js:82:43)
ERR!     at async Promise.all (index 0)
ERR!     at generateWebpackConfig (/Users/yannbraga/experiments/delete-angular/node_modules/@angular-devkit/build-angular/src/utils/webpack-browser-config.js:64:22)
ERR!     at generateBrowserWebpackConfigFromContext (/Users/yannbraga/experiments/delete-angular/node_modules/@angular-devkit/build-angular/src/utils/webpack-browser-config.js:125:20)
ERR!     at generateI18nBrowserWebpackConfigFromContext (/Users/yannbraga/experiments/delete-angular/node_modules/@angular-devkit/build-angular/src/utils/webpack-browser-config.js:73:20)
ERR!     at exports.getWebpackConfig (/Users/yannbraga/experiments/delete-angular/node_modules/@storybook/angular/dist/server/angular-cli-webpack-13.x.x.js:18:35)
ERR!     at Object.O (/Users/yannbraga/experiments/delete-angular/node_modules/@storybook/builder-webpack5/dist/presets/custom-webpack-preset.js:1:2117)
ERR!     at G (/Users/yannbraga/experiments/delete-angular/node_modules/@storybook/builder-webpack5/dist/index.js:1:1754)
ERR!     at Object.M (/Users/yannbraga/experiments/delete-angular/node_modules/@storybook/builder-webpack5/dist/index.js:1:3509)
ERR!     at async storybookDevServer (/Users/yannbraga/experiments/delete-angular/node_modules/@storybook/core-server/dist/cjs/dev-server.js:200:23)
ERR!     at async buildDevStandalone (/Users/yannbraga/experiments/delete-angular/node_modules/@storybook/core-server/dist/cjs/build-dev.js:134:31)

[yannbf]

Update: the error seems to be related with changes in @angular-devkit/build-angular, from 15.0.0-next-3 to 15.0.0-next-4.

[yannbf]

Another update:

@alan-agius4 kindly helped and here are their findings:

The error happens with these changes in Angular

Not really sure how the entries are being modified in the Storybook Webpack config though which causes such error to happen.

One thing I did notice that the configs are being hand merged as opposed to using Webpack merge API: https://github.com/storybookjs/storybook/blob/7035ea7389393da041985ebc491ee58dedb5[…]ode/frameworks/angular/src/server/angular-cli-webpack-13.x.x.js

[Marklb]

From my understanding, storybook dev and storybook build are not supported anymore by the Angular framework and instead have to use the Angular builder. Storybook's init generator does not seem to be updated for that yet, but that is how the docs say to install in Angular: https://storybook.js.org/docs/7.0/angular/get-started/install

Switching to the builder seems to fix an Angular 15.0.0 project I setup last week, but it still throws an error on the reproduction in this issue. I am trying to figure out what the difference between them is now.

[shilman]

Boo-yah!! I just released https://github.com/storybookjs/storybook/releases/tag/v7.0.0-alpha.53 containing PR #19937 that references this issue. Upgrade today to the @next NPM tag to try it out!

npx sb upgrade --prerelease

Closing this issue. Please re-open if you think there's still more to do.

[lucas-labs]

Hi @shilman, is this fix going to be available in v6.x or should we wait for the first stable v7.x release before migrating to angular 15?

Thanks!

[shilman]

@lucas-labs good question. @valentinpalkovic what do you think?

[valentinpalkovic]

@shilman We can make it available for 6.x. If cherry picking is not possible, I can create a PR for it.

[rsheptolut]

@valentinpalkovic Sounds great! Do you think this issue should be reopened to keep track of this work until this is made available in 6.x? Was just curious about this because our team is waiting on this. :) Thanks for your work!

[shilman]

Great Caesar's ghost!! I just released https://github.com/storybookjs/storybook/releases/tag/v6.5.14-alpha.2 containing PR #20043 that references this issue. Upgrade today to the @prerelease NPM tag to try it out!

npx sb upgrade --prerelease

[shilman]

Boo-yah!! I just released https://github.com/storybookjs/storybook/releases/tag/v6.5.14 containing PR #20043 that references this issue. Upgrade today to the @latest NPM tag to try it out!

npx sb upgrade