Angular 15 compatibility

[valentinpalkovic]

Issue: #19878

What I did

How to test

• Is this testable with Jest or Chromatic screenshots?
• Does this need a new example in the kitchen sink apps?
• Does this need an update to the documentation?

If your answer is yes to any of these, please make sure to include it in your PR.

[ndelangen]

If this works...
I assume we're going to have to think about how to make this backwards compatible?

[ndelangen]

Yeah I think you're on the right track.. in my investigation I also landed on some styles.entry/runtime being the source of the problem.

[ndelangen]

I found that this file: runtime~styles.iframe.bundle.js ran into this stack trace:

./node_modules/webpack-hot-middleware/client.js?reload=true&quiet=false&noInfo=undefined (vendors-node_modules_angular-devkit_build-angular_node_modules_css-loader_dist_runtime_api_js-dbea25.iframe.bundle.js:169259)
__webpack_require__ (runtime~styles.iframe.bundle.js:28)
__webpack_exec__ (main.iframe.bundle.js:1854)
(anonymous) (main.iframe.bundle.js:1855)
__webpack_require__.O (runtime~styles.iframe.bundle.js:72)
(anonymous) (main.iframe.bundle.js:1856)
webpackJsonpCallback (runtime~styles.iframe.bundle.js:1077)
(anonymous) (runtime~styles.iframe.bundle.js:1091)
(anonymous) (runtime~styles.iframe.bundle.js:1093)
(anonymous) (runtime~styles.iframe.bundle.js:1099)

And the code that was breaking looked like this:

/***/ "./node_modules/webpack-hot-middleware/client.js?reload=true&quiet=false&noInfo=undefined":
/*!************************************************************************************************!*\
  !*** ./node_modules/webpack-hot-middleware/client.js?reload=true&quiet=false&noInfo=undefined ***!
  \************************************************************************************************/
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

var __resourceQuery = "?reload=true&quiet=false&noInfo=undefined";
/* module decorator */ module = __webpack_require__.nmd(module);
/*eslint-env browser*/
/*global __resourceQuery __webpack_public_path__*/

var options = {
  path: '/__webpack_hmr',
  timeout: 20 * 1000,
  overlay: true,
  reload: false,
  log: true,
  warn: true,
  name: '',
  autoConnect: true,
  overlayStyles: {},
  overlayWarnings: false,
  ansiColors: {}
};
if (true) {
  var overrides = Object.fromEntries(new URLSearchParams(__resourceQuery.slice(1)));
  setOverrides(overrides);
}
if (typeof window === 'undefined') {
  // do nothing
} else if (typeof window.EventSource === 'undefined') {
  console.warn("webpack-hot-middleware's client requires EventSource to work. " + 'You should include a polyfill if you want to support this browser: ' + 'https://developer.mozilla.org/en-US/docs/Web/API/Server-sent_events#Tools');
} else {
  if (options.autoConnect) {
    connect();
  }
}

failing on:

__webpack_require__.nmd

This error happened:

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_angular-devkit_build-angular_node_modules_css-loader_dist_runtime_api_js-dbea25.iframe.bundle.js:169260:53)
    at __webpack_require__ (runtime~styles.iframe.bundle.js:28:33)
    at __webpack_exec__ (main.iframe.bundle.js:1854:48)
    at main.iframe.bundle.js:1855:148
    at __webpack_require__.O (runtime~styles.iframe.bundle.js:72:23)
    at main.iframe.bundle.js:1856: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

[ndelangen]

[ndelangen]

on a build storybook we see this error:

TypeError: __webpack_require__.n is not a function
    at ./storybook-config-entry.js (http://localhost:8001/main.e91144b0.iframe.bundle.js:1:167422)
    at __webpack_require__ (http://localhost:8001/runtime~styles.bd4c0f83.iframe.bundle.js:1:323)
    at __webpack_exec__ (http://localhost:8001/main.e91144b0.iframe.bundle.js:1:210559)
    at http://localhost:8001/main.e91144b0.iframe.bundle.js:1:210648
    at __webpack_require__.O (http://localhost:8001/runtime~styles.bd4c0f83.iframe.bundle.js:1:893)
    at http://localhost:8001/main.e91144b0.iframe.bundle.js:1:210779
    at webpackJsonpCallback (http://localhost:8001/runtime~styles.bd4c0f83.iframe.bundle.js:1:1580)
    at Array.forEach (<anonymous>)
    at http://localhost:8001/runtime~styles.bd4c0f83.iframe.bundle.js:1:1991
    at http://localhost:8001/runtime~styles.bd4c0f83.iframe.bundle.js:1:2140

see: https://app.circleci.com/pipelines/github/storybookjs/storybook/32587/workflows/0a642adb-52d5-4a09-9942-730fb6d0a58f/jobs/442637

[ndelangen]

I found out that when running storybook I see this in the terminal output:

info => Loading angular-cli config for angular >= 13.0.0

I'm not sure this is right?

Edit.. yes that's fine..
https://app.circleci.com/pipelines/github/storybookjs/storybook/32460/workflows/290c2493-a3bb-4705-9db1-70e4c658666e/jobs/442154/parallel-runs/1?filterBy=ALL
This is the last daily job that ran and it also showed this line

[ndelangen]

I ran the actual angular app, and noticed this in their HTML:

<script src="runtime.js" type="module"></script>
<script src="polyfills.js" type="module"></script>
<script src="styles.js" defer></script>
<script src="vendor.js" type="module"></script>
<script src="main.js" type="module"></script>

notice how runtime, polyfills are type=modules
then styles.js IS NOT
then vendor and main ARE

I think this might be related.

We verified that this structure is the same in 15-next.3

[valentinpalkovic]

Closing in favor of #19937