From e0fc72bd15c53dd267e6c4af7fc912b2bcc5adc6 Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Thu, 27 Mar 2025 09:15:02 +0100 Subject: [PATCH] Update Angular support in migration guide and package dependencies to require Angular 18 and above --- MIGRATION.md | 20 ++++++++- code/frameworks/angular/package.json | 28 ++++++------- .../angular/src/server/angular-cli-webpack.js | 41 +++---------------- .../server/framework-preset-angular-ivy.ts | 19 +-------- code/frameworks/angular/src/types.ts | 1 - code/yarn.lock | 28 ++++++------- 6 files changed, 54 insertions(+), 83 deletions(-) diff --git a/MIGRATION.md b/MIGRATION.md index b396d2e6266..a11faf04afd 100644 --- 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 diff --git a/code/frameworks/angular/package.json b/code/frameworks/angular/package.json index 51482a204d8..38b7310bfed 100644 --- 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": { diff --git a/code/frameworks/angular/src/server/angular-cli-webpack.js b/code/frameworks/angular/src/server/angular-cli-webpack.js index d9514a4b610..5e9531b826c 100644 --- 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 diff --git a/code/frameworks/angular/src/server/framework-preset-angular-ivy.ts b/code/frameworks/angular/src/server/framework-preset-angular-ivy.ts index 57b5710e398..1816f88a38d 100644 --- 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('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'], }, }; }; diff --git a/code/frameworks/angular/src/types.ts b/code/frameworks/angular/src/types.ts index a30e2174efd..7a9103d785c 100644 --- 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; } diff --git a/code/yarn.lock b/code/yarn.lock index 0f715cf7a02..9ac29892aac 100644 --- 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