Update Angular support in migration guide and package dependencies to require Angular 18 and above

2025-04-05 16:11:33 +08:00 · 2025-03-27 09:15:02 +01:00 · 2025-03-27 09:15:02 +01:00 · e0fc72bd15
commit e0fc72bd15
parent c72f0219bc
6 changed files with 54 additions and 83 deletions
--- a/MIGRATION.md
+++ b/MIGRATION.md
@ -25,6 +25,8 @@
  - [Dropped support for TypeScript \< 4.9](#dropped-support-for-typescript--49)
  - [Test addon renamed from experimental to stable](#test-addon-renamed-from-experimental-to-stable)
  - [Experimental Status API has turned into a Status Store](#experimental-status-api-has-turned-into-a-status-store)
+  - [Framework-specific changes](#framework-specific-changes)
+    - [Angular = Require v18 and up](#angular--require-v18-and-up)
 - [From version 8.5.x to 8.6.x](#from-version-85x-to-86x)
  - [Angular: Support experimental zoneless support](#angular-support-experimental-zoneless-support)
  - [Framework-specific Vite plugins have to be explicitly added](#framework-specific-vite-plugins-have-to-be-explicitly-added)
@ -58,7 +60,7 @@
    - [Removed `sb babelrc` command](#removed-sb-babelrc-command)
    - [Changed interfaces for `@storybook/router` components](#changed-interfaces-for-storybookrouter-components)
    - [Extract no longer batches](#extract-no-longer-batches)
-  - [Framework-specific changes](#framework-specific-changes)
+  - [Framework-specific changes](#framework-specific-changes-1)
    - [React](#react)
      - [`react-docgen` component analysis by default](#react-docgen-component-analysis-by-default)
    - [Next.js](#nextjs)
@ -760,6 +762,22 @@ addons.register(MY_ADDON_ID, (api) => {
 +  }]);
 ```

+### Framework-specific changes
+
+#### Angular = Require v18 and up
+
+Storybook has dropped support for Angular versions 15-17. The minimum supported version is now Angular 18.
+
+If you're using an older version of Angular, you'll need to upgrade to Angular 18 or newer to use the latest version of Storybook.
+
+Key changes:
+- All Angular packages in peerDependencies now require `>=18.0.0 < 20.0.0`
+- Removed legacy code supporting Angular < 18
+- Standalone components are now the default (can be opted out by explicitly setting `standalone: false` in component decorators)
+- Updated RxJS requirement to `^7.4.0`
+- Updated TypeScript requirement to `^4.9.0 || ^5.0.0`
+- Updated Zone.js requirement to `^0.14.0 || ^0.15.0`
+
 ## From version 8.5.x to 8.6.x

 ### Angular: Support experimental zoneless support
--- a/code/frameworks/angular/package.json
+++ b/code/frameworks/angular/package.json
@ -93,22 +93,22 @@
    "zone.js": "^0.15.0"
  },
  "peerDependencies": {
-    "@angular-devkit/architect": ">=0.1500.0 < 0.2000.0",
-    "@angular-devkit/build-angular": ">=15.0.0 < 20.0.0",
-    "@angular-devkit/core": ">=15.0.0 < 20.0.0",
-    "@angular/animations": ">=15.0.0 < 20.0.0",
-    "@angular/cli": ">=15.0.0 < 20.0.0",
-    "@angular/common": ">=15.0.0 < 20.0.0",
-    "@angular/compiler": ">=15.0.0 < 20.0.0",
-    "@angular/compiler-cli": ">=15.0.0 < 20.0.0",
-    "@angular/core": ">=15.0.0 < 20.0.0",
-    "@angular/forms": ">=15.0.0 < 20.0.0",
-    "@angular/platform-browser": ">=15.0.0 < 20.0.0",
-    "@angular/platform-browser-dynamic": ">=15.0.0 < 20.0.0",
-    "rxjs": "^6.0.0 || ^7.4.0",
+    "@angular-devkit/architect": ">=0.1800.0 < 0.2000.0",
+    "@angular-devkit/build-angular": ">=18.0.0 < 20.0.0",
+    "@angular-devkit/core": ">=18.0.0 < 20.0.0",
+    "@angular/animations": ">=18.0.0 < 20.0.0",
+    "@angular/cli": ">=18.0.0 < 20.0.0",
+    "@angular/common": ">=18.0.0 < 20.0.0",
+    "@angular/compiler": ">=18.0.0 < 20.0.0",
+    "@angular/compiler-cli": ">=18.0.0 < 20.0.0",
+    "@angular/core": ">=18.0.0 < 20.0.0",
+    "@angular/forms": ">=18.0.0 < 20.0.0",
+    "@angular/platform-browser": ">=18.0.0 < 20.0.0",
+    "@angular/platform-browser-dynamic": ">=18.0.0 < 20.0.0",
+    "rxjs": "^6.5.3 || ^7.4.0",
    "storybook": "workspace:^",
    "typescript": "^4.9.0 || ^5.0.0",
-    "zone.js": ">= 0.11.1 < 1.0.0"
+    "zone.js": ">=0.14.0"
  },
  "peerDependenciesMeta": {
    "@angular/animations": {
--- a/code/frameworks/angular/src/server/angular-cli-webpack.js
+++ b/code/frameworks/angular/src/server/angular-cli-webpack.js
@ -8,39 +8,12 @@ const {
  default: StorybookNormalizeAngularEntryPlugin,
 } = require('./plugins/storybook-normalize-angular-entry-plugin');

-const getAngularWebpackUtils = () => {
-  try {
-    // Angular < 16.1.0
-    const {
-      getCommonConfig,
-      getStylesConfig,
-      getDevServerConfig,
-      getTypeScriptConfig,
-    } = require('@angular-devkit/build-angular/src/webpack/configs');
-
-    return {
-      getCommonConfig,
-      getStylesConfig,
-      getDevServerConfig,
-      getTypeScriptConfig,
-    };
-  } catch (e) {
-    // Angular > 16.1.0
-    const {
-      getCommonConfig,
-      getStylesConfig,
-      getDevServerConfig,
-      getTypeScriptConfig,
-    } = require('@angular-devkit/build-angular/src/tools/webpack/configs');
-
-    return {
-      getCommonConfig,
-      getStylesConfig,
-      getDevServerConfig,
-      getTypeScriptConfig,
-    };
-  }
-};
+const {
+  getCommonConfig,
+  getStylesConfig,
+  getDevServerConfig,
+  getTypeScriptConfig,
+} = require('@angular-devkit/build-angular/src/tools/webpack/configs');

 /**
 * Extract webpack config from angular-cli 13.x.x ⚠️ This file is in JavaScript to not use
@ -52,8 +25,6 @@ const getAngularWebpackUtils = () => {
 */
 exports.getWebpackConfig = async (baseConfig, { builderOptions, builderContext }) => {
  /** Get angular-cli Webpack config */
-  const { getCommonConfig, getStylesConfig, getDevServerConfig, getTypeScriptConfig } =
-    getAngularWebpackUtils();
  const { config: cliConfig } = await generateI18nBrowserWebpackConfigFromContext(
    {
      // Default options
--- a/code/frameworks/angular/src/server/framework-preset-angular-ivy.ts
+++ b/code/frameworks/angular/src/server/framework-preset-angular-ivy.ts
@ -51,36 +51,19 @@ export const runNgcc = async () => {
 };

 export const webpack = async (webpackConfig: Configuration, options: PresetOptions) => {
-  const packageJsonPath = require.resolve('@angular/core/package.json');
-  const packageJson = JSON.parse(readFileSync(packageJsonPath, 'utf8'));
-  const VERSION = packageJson.version;
  const framework = await options.presets.apply<Preset>('framework');
  const angularOptions = (typeof framework === 'object' ? framework.options : {}) as AngularOptions;
-  const angularMajorVersion = VERSION.split('.')[0];
-  const isAngular16OrNewer = parseInt(angularMajorVersion, 10) >= 16;

  // Default to true, if undefined
  if (angularOptions.enableIvy === false) {
    return webpackConfig;
  }

-  let extraMainFields: string[] = [];
-
-  if (angularOptions.enableNgcc !== false && !isAngular16OrNewer) {
-    // TODO: Drop if Angular 14 and 15 are not supported anymore
-    runNgcc();
-    extraMainFields = ['es2015_ivy_ngcc', 'module_ivy_ngcc', 'main_ivy_ngcc'];
-  }
-
-  if (!isAngular16OrNewer) {
-    extraMainFields.push('es2015');
-  }
-
  return {
    ...webpackConfig,
    resolve: {
      ...webpackConfig.resolve,
-      mainFields: [...extraMainFields, 'browser', 'module', 'main'],
+      mainFields: ['browser', 'module', 'main'],
    },
  };
 };
--- a/code/frameworks/angular/src/types.ts
+++ b/code/frameworks/angular/src/types.ts
@ -46,5 +46,4 @@ export type StorybookConfig = Omit<

 export interface AngularOptions {
  enableIvy?: boolean;
-  enableNgcc?: boolean;
 }
--- a/code/yarn.lock
+++ b/code/yarn.lock
@ -6362,22 +6362,22 @@ __metadata:
    webpack: "npm:5"
    zone.js: "npm:^0.15.0"
  peerDependencies:
-    "@angular-devkit/architect": ">=0.1500.0 < 0.2000.0"
-    "@angular-devkit/build-angular": ">=15.0.0 < 20.0.0"
-    "@angular-devkit/core": ">=15.0.0 < 20.0.0"
-    "@angular/animations": ">=15.0.0 < 20.0.0"
-    "@angular/cli": ">=15.0.0 < 20.0.0"
-    "@angular/common": ">=15.0.0 < 20.0.0"
-    "@angular/compiler": ">=15.0.0 < 20.0.0"
-    "@angular/compiler-cli": ">=15.0.0 < 20.0.0"
-    "@angular/core": ">=15.0.0 < 20.0.0"
-    "@angular/forms": ">=15.0.0 < 20.0.0"
-    "@angular/platform-browser": ">=15.0.0 < 20.0.0"
-    "@angular/platform-browser-dynamic": ">=15.0.0 < 20.0.0"
-    rxjs: ^6.0.0 || ^7.4.0
+    "@angular-devkit/architect": ">=0.1800.0 < 0.2000.0"
+    "@angular-devkit/build-angular": ">=18.0.0 < 20.0.0"
+    "@angular-devkit/core": ">=18.0.0 < 20.0.0"
+    "@angular/animations": ">=18.0.0 < 20.0.0"
+    "@angular/cli": ">=18.0.0 < 20.0.0"
+    "@angular/common": ">=18.0.0 < 20.0.0"
+    "@angular/compiler": ">=18.0.0 < 20.0.0"
+    "@angular/compiler-cli": ">=18.0.0 < 20.0.0"
+    "@angular/core": ">=18.0.0 < 20.0.0"
+    "@angular/forms": ">=18.0.0 < 20.0.0"
+    "@angular/platform-browser": ">=18.0.0 < 20.0.0"
+    "@angular/platform-browser-dynamic": ">=18.0.0 < 20.0.0"
+    rxjs: ^6.5.3 || ^7.4.0
    storybook: "workspace:^"
    typescript: ^4.9.0 || ^5.0.0
-    zone.js: ">= 0.11.1 < 1.0.0"
+    zone.js: ">=0.14.0"
  peerDependenciesMeta:
    "@angular/animations":
      optional: true