Merge pull request #19937 from storybookjs/valentin/fix-angular-15-in…

…compatibility

Fix "__webpack_require__.nmd is not a function issue" in Angular 15

.circleci/config.yml

@@ -4,17 +4,17 @@ parameters:
   workflow:
     description: Which workflow to run
     type: enum
-    enum: ['ci', 'pr', 'merged', 'daily']
-    default: 'ci'
+    enum: ["ci", "pr", "merged", "daily"]
+    default: "ci"
 
 executors:
   sb_node_16_classic:
     parameters:
       class:
         description: The Resource class
         type: enum
-        enum: ['small', 'medium', 'medium+', 'large', 'xlarge']
-        default: 'small'
+        enum: ["small", "medium", "medium+", "large", "xlarge"]
+        default: "small"
     working_directory: /tmp/storybook
     docker:
       - image: cimg/node:16.17.1
@@ -26,8 +26,8 @@ executors:
       class:
         description: The Resource class
         type: enum
-        enum: ['small', 'medium', 'medium+', 'large', 'xlarge']
-        default: 'small'
+        enum: ["small", "medium", "medium+", "large", "xlarge"]
+        default: "small"
     working_directory: /tmp/storybook
     docker:
       - image: cimg/node:16.17.1-browsers
@@ -39,8 +39,8 @@ executors:
       class:
         description: The Resource class
         type: enum
-        enum: ['small', 'medium', 'medium+', 'large', 'xlarge']
-        default: 'small'
+        enum: ["small", "medium", "medium+", "large", "xlarge"]
+        default: "small"
     working_directory: /tmp/storybook
     docker:
       - image: mcr.microsoft.com/playwright:v1.28.0-focal
@@ -167,7 +167,7 @@ commands:
             git reset --hard "$CIRCLE_SHA1"
           name: Checkout code shallow
   cancel-workflow-on-failure:
-    description: 'Cancels the entire workflow in case the previous step has failed'
+    description: "Cancels the entire workflow in case the previous step has failed"
     steps:
       - run:
           name: Cancel current workflow
@@ -177,13 +177,13 @@ commands:
             echo "To execute all checks locally, please run yarn ci-tests"
             curl -X POST --header "Content-Type: application/json" "https://circleci.com/api/v2/workflow/${CIRCLE_WORKFLOW_ID}/cancel?circle-token=${WORKFLOW_CANCELER}"
   report-workflow-on-failure:
-    description: 'Reports failures to discord'
+    description: "Reports failures to discord"
     parameters:
       template:
         description: |
           Which template to report in discord. Applicable for parallel sandbox jobs
         type: string
-        default: 'none'
+        default: "none"
     steps:
       - run:
           when: on_fail
@@ -199,7 +199,7 @@ jobs:
       name: sb_node_16_classic
     steps:
       - checkout_advanced:
-          clone_options: '--depth 1 --verbose'
+          clone_options: "--depth 1 --verbose"
       - run:
           name: Prettier
           command: |
@@ -212,7 +212,7 @@ jobs:
       name: sb_node_16_classic
     steps:
       - checkout_advanced:
-          clone_options: '--depth 1 --verbose'
+          clone_options: "--depth 1 --verbose"
       - restore_cache:
           name: Restore Yarn cache
           keys:
@@ -254,7 +254,7 @@ jobs:
     working_directory: /tmp/storybook
     steps:
       - checkout_advanced:
-          clone_options: '--depth 1 --verbose'
+          clone_options: "--depth 1 --verbose"
       - attach_workspace:
           at: .
       - run:
@@ -295,7 +295,7 @@ jobs:
     working_directory: /tmp/storybook
     steps:
       - checkout_advanced:
-          clone_options: '--depth 1 --verbose'
+          clone_options: "--depth 1 --verbose"
       - attach_workspace:
           at: .
       - run:
@@ -335,7 +335,7 @@ jobs:
       name: sb_node_16_classic
     steps:
       - checkout_advanced:
-          clone_options: '--depth 1 --verbose'
+          clone_options: "--depth 1 --verbose"
       - attach_workspace:
           at: .
       - run:
@@ -351,7 +351,7 @@ jobs:
       name: sb_node_16_classic
     steps:
       - checkout_advanced:
-          clone_options: '--depth 1 --verbose'
+          clone_options: "--depth 1 --verbose"
       - attach_workspace:
           at: .
       - run:
@@ -365,7 +365,7 @@ jobs:
     executor: sb_node_16_browsers
     steps:
       - checkout_advanced:
-          clone_options: '--depth 1 --verbose'
+          clone_options: "--depth 1 --verbose"
       - attach_workspace:
           at: .
       - run:
@@ -383,7 +383,7 @@ jobs:
       name: sb_node_16_browsers
     steps:
       - checkout_advanced:
-          clone_options: '--depth 1 --verbose'
+          clone_options: "--depth 1 --verbose"
       - attach_workspace:
           at: .
       - run:
@@ -405,7 +405,7 @@ jobs:
       name: sb_node_16_browsers
     steps:
       - checkout_advanced:
-          clone_options: '--depth 1 --verbose'
+          clone_options: "--depth 1 --verbose"
       - attach_workspace:
           at: .
       - run:
@@ -419,7 +419,7 @@ jobs:
       class: medium+
       name: sb_node_16_browsers
     environment:
-        NODE_OPTIONS: --max_old_space_size=6144
+      NODE_OPTIONS: --max_old_space_size=6144
     steps:
       # switched this to the CircleCI helper to get the full git history for TurboSnap
       - checkout
@@ -446,7 +446,7 @@ jobs:
     parallelism: << parameters.parallelism >>
     steps:
       - checkout_advanced:
-          clone_options: '--depth 1 --verbose'
+          clone_options: "--depth 1 --verbose"
       - attach_workspace:
           at: .
       - run:
@@ -471,7 +471,7 @@ jobs:
     parallelism: << parameters.parallelism >>
     steps:
       - checkout_advanced:
-          clone_options: '--depth 1 --verbose'
+          clone_options: "--depth 1 --verbose"
       - attach_workspace:
           at: .
       - run:
@@ -492,7 +492,7 @@ jobs:
     parallelism: << parameters.parallelism >>
     steps:
       - checkout_advanced:
-          clone_options: '--depth 1 --verbose'
+          clone_options: "--depth 1 --verbose"
       - attach_workspace:
           at: .
       - run:
@@ -517,7 +517,7 @@ jobs:
     parallelism: << parameters.parallelism >>
     steps:
       - checkout_advanced:
-          clone_options: '--depth 1 --verbose'
+          clone_options: "--depth 1 --verbose"
       - attach_workspace:
           at: .
       - run:
@@ -558,7 +558,7 @@ jobs:
     parallelism: << parameters.parallelism >>
     steps:
       - checkout_advanced:
-          clone_options: '--depth 1 --verbose'
+          clone_options: "--depth 1 --verbose"
       - attach_workspace:
           at: .
       - run:
@@ -697,7 +697,7 @@ workflows:
           requires:
             - create-sandboxes
       - test-runner-sandboxes:
-          parallelism: 14
+          parallelism: 15
           requires:
             - build-sandboxes
       - chromatic-sandboxes:
@@ -725,7 +725,7 @@ workflows:
           requires:
             - create-sandboxes
       - test-runner-sandboxes:
-          parallelism: 24
+          parallelism: 25
           requires:
             - build-sandboxes
       - chromatic-sandboxes:

code/frameworks/angular/src/server/angular-cli-webpack-13.x.x.js → code/frameworks/angular/src/server/angular-cli-webpack.js

@@ -9,8 +9,10 @@ const {
   getTypeScriptConfig,
 } = require('@angular-devkit/build-angular/src/webpack/configs');
 const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');
-
 const { filterOutStylingRules } = require('./utils/filter-out-styling-rules');
+const {
+  default: StorybookNormalizeAngularEntryPlugin,
+} = require('./plugins/storybook-normalize-angular-entry-plugin');
 
 /**
  * Extract webpack config from angular-cli 13.x.x
@@ -66,7 +68,11 @@ exports.getWebpackConfig = async (baseConfig, { builderOptions, builderContext }
     rules: [...cliConfig.module.rules, ...rulesExcludingStyles],
   };
 
-  const plugins = [...(cliConfig.plugins ?? []), ...baseConfig.plugins];
+  const plugins = [
+    ...(cliConfig.plugins ?? []),
+    ...baseConfig.plugins,
+    new StorybookNormalizeAngularEntryPlugin(),
+  ];
 
   const resolve = {
     ...baseConfig.resolve,

code/frameworks/angular/src/server/framework-preset-angular-cli.ts

@@ -7,8 +7,8 @@ import semver from 'semver';
 import { dedent } from 'ts-dedent';
 
 import { JsonObject, logging } from '@angular-devkit/core';
+import { getWebpackConfig as getCustomWebpackConfig } from './angular-cli-webpack';
 import { moduleIsAvailable } from './utils/module-is-available';
-import { getWebpackConfig as getWebpackConfig13_x_x } from './angular-cli-webpack-13.x.x';
 import { PresetOptions } from './preset-options';
 import {
   getDefaultProjectName,
@@ -43,7 +43,7 @@ export async function webpackFinal(baseConfig: webpack.Configuration, options: P
         const builderOptions = await getBuilderOptions(_options, builderContext);
         const legacyDefaultOptions = await getLegacyDefaultBuildOptions(_options);
 
-        return getWebpackConfig13_x_x(_baseConfig, {
+        return getCustomWebpackConfig(_baseConfig, {
           builderOptions: {
             watch: options.configType === 'DEVELOPMENT',
             ...legacyDefaultOptions,

code/frameworks/angular/src/server/plugins/storybook-normalize-angular-entry-plugin.js

@@ -0,0 +1,49 @@
+const PLUGIN_NAME = 'storybook-normalize-angular-entry-plugin';
+
+/**
+ * Angular's webpack plugin @angular-devkit/build-angular/src/webpack/plugins/styles-webpack-plugin.js
+ * transforms the original webpackOptions.entry point array into a structure like this:
+ *
+ * ```js
+ * {
+ *  main: {
+ *    import: [...]
+ *  },
+ *
+ *  styles: {
+ *    import: [...]
+ *  },
+ * }
+ * ```
+ *
+ * Storybook throws an __webpack_require__.nmd is not a function error, when another runtime bundle (styles~runtime.iframe.bundle.js) is loaded.
+ * To prevent this error, we have to normalize the entry point to only generate one runtime bundle (main~runtime.iframe.bundle.js).
+ */
+export default class StorybookNormalizeAngularEntryPlugin {
+  constructor(options) {
+    this.options = options;
+  }
+
+  apply(compiler) {
+    const webpackOptions = compiler.options;
+    const entry =
+      typeof webpackOptions.entry === 'function' ? webpackOptions.entry() : webpackOptions.entry;
+
+    webpackOptions.entry = async () => {
+      const entryResult = await entry;
+
+      if (entryResult.main && entryResult.styles) {
+        return {
+          main: {
+            import: Array.from(new Set([...entryResult.main.import, ...entryResult.styles.import])),
+          },
+        };
+      }
+
+      return entry;
+    };
+    compiler.hooks.thisCompilation.tap(PLUGIN_NAME, (compilation) => {
+      this.compilation = compilation;
+    });
+  }
+}

code/lib/channels/src/index.ts

@@ -40,7 +40,7 @@ export class Channel {
 
   private data: Record<string, any> = {};
 
-  private readonly transport: ChannelTransport;
+  private readonly transport: ChannelTransport | undefined = undefined;
 
   constructor({ transport, async = false }: ChannelArgs = {}) {
     this.isAsync = async;

code/lib/cli/src/repro-templates.ts

@@ -141,7 +141,6 @@ export const allTemplates = {
     name: 'Angular CLI (latest)',
     script:
       'npx -p @angular/cli ng new angular-latest --directory . --routing=true --minimal=true --style=scss --strict --skip-git --skip-install --package-manager=yarn',
-    skipTasks: ['test-runner'],
     expected: {
       framework: '@storybook/angular',
       renderer: '@storybook/angular',
@@ -262,8 +261,7 @@ type TemplateKey = keyof typeof allTemplates;
 export const ci: TemplateKey[] = ['cra/default-ts', 'react-vite/default-ts'];
 export const pr: TemplateKey[] = [
   ...ci,
-  // TODO: swap with 'angular-cli/default-ts' once angular 15 fully works with Storybook
-  'angular-cli/14-ts',
+  'angular-cli/default-ts',
   'vue3-vite/default-ts',
   'vue-cli/vue2-default-js',
   'lit-vite/default-ts',
@@ -275,7 +273,7 @@ export const merged: TemplateKey[] = [
   ...pr,
   'react-webpack/18-ts',
   'react-webpack/17-ts',
-  'angular-cli/default-ts',
+  'angular-cli/14-ts',
   'angular-cli/13-ts',
   'preact-webpack5/default-ts',
   'html-webpack/default',

code/lib/router/src/utils.ts

@@ -82,8 +82,13 @@ const validateArgs = (key = '', value: unknown): boolean => {
       COLOR_REGEXP.test(value)
     );
   }
-  if (Array.isArray(value)) return value.every((v) => validateArgs(key, v));
-  if (isPlainObject(value)) return Object.entries(value).every(([k, v]) => validateArgs(k, v));
+  if (Array.isArray(value)) {
+    return value.every((v) => validateArgs(key, v));
+  }
+
+  if (isPlainObject(value)) {
+    return Object.entries(value as Record<string, any>).every(([k, v]) => validateArgs(k, v));
+  }
   return false;
 };
 
@@ -97,7 +102,7 @@ const encodeSpecialValues = (value: unknown): any => {
   }
   if (Array.isArray(value)) return value.map(encodeSpecialValues);
   if (isPlainObject(value)) {
-    return Object.entries(value).reduce(
+    return Object.entries(value as Record<string, any>).reduce(
       (acc, [key, val]) => Object.assign(acc, { [key]: encodeSpecialValues(val) }),
       {}
     );