Angular: Raise the supported floor to 21

MIGRATION.md

@@ -2,8 +2,9 @@
 
 - [From version 10.x to 11.0.0](#from-version-10x-to-1100)
   - [Vitest Addon: requires Vitest 4.0 or higher](#vitest-addon-requires-vitest-40-or-higher)
-  - [Dropped support for Vite 5 and Vite 6](#dropped-support-for-vite-5-and-vite-6)
+  - [Vite: requires Vite 7.0 or higher](#vite-requires-vite-70-or-higher)
   - [Next.js: Require v15 and up](#nextjs-require-v15-and-up)
+  - [Angular: requires Angular 21 or higher](#angular-requires-angular-21-or-higher)
 
 - [From version 10.5.x to 10.6.0](#from-version-105x-to-1060)
   - [Vue 3: `vue-docgen-api` is deprecated](#vue-3-vue-docgen-api-is-deprecated)
@@ -541,7 +542,7 @@
 
 The `@storybook/addon-vitest` addon requires **Vitest 4.0 or higher**. Setup now always installs `@vitest/browser-playwright`, generates configuration with the `test.projects` array, and no longer creates or updates `vitest.workspace.*` files. If your Vitest config still uses the deprecated `test.workspace` / `defineWorkspace` style, rename it to `test.projects` and re-run `npx storybook@latest add @storybook/addon-vitest` to merge your existing config.
 
-### Dropped support for Vite 5 and Vite 6
+### Vite: requires Vite 7.0 or higher
 
 Storybook 11.0 drops support for Vite 5 and Vite 6. The minimum supported version is now Vite 7.0.0. This change affects all Vite-based frameworks and builders:
 
@@ -587,6 +588,21 @@ If you're using an older version of Next.js, you'll need to upgrade to Next.js 1
 
 For help upgrading your Next.js application, see the [Next.js upgrade guide](https://nextjs.org/docs/app/building-your-application/upgrading).
 
+### Angular: requires Angular 21 or higher
+
+Storybook has dropped support for Angular versions 18-20. The minimum supported version is now Angular 21.
+
+If you're using an older version of Angular, you'll need to upgrade to Angular 21 or newer to use the latest version of Storybook.
+
+For help upgrading your Angular application, see the [Angular update guide](https://angular.dev/update-guide).
+
+Key changes:
+
+- All Angular packages in peerDependencies now require `>=21.0.0 < 23.0.0`
+- `@angular-devkit/architect` now requires `>=0.2100.0 < 0.2300.0`
+- The RxJS peer requirement accepts `^6.5.3 || ^7.4.0`, matching Angular 21's own range
+- Standalone components are always treated as the default in `@storybook/angular`
+
 ## From version 10.5.x to 10.6.0
 
 ### Vue 3: `vue-docgen-api` is deprecated

code/frameworks/angular/package.json

@@ -67,39 +67,39 @@
     "webpack": "5"
   },
   "devDependencies": {
-    "@analogjs/vite-plugin-angular": "^1.12.1",
-    "@angular-devkit/architect": "^0.1901.1",
-    "@angular-devkit/build-angular": "^19.1.1",
-    "@angular-devkit/core": "^19.1.1",
-    "@angular/animations": "^19.1.1",
-    "@angular/common": "^19.1.1",
-    "@angular/compiler": "^19.1.1",
-    "@angular/compiler-cli": "^19.1.1",
-    "@angular/core": "^19.1.1",
-    "@angular/forms": "^19.1.1",
-    "@angular/platform-browser": "^19.1.1",
-    "@angular/platform-browser-dynamic": "^19.1.1",
+    "@analogjs/vite-plugin-angular": "^2.5.2",
+    "@angular-devkit/architect": "^0.2100.0",
+    "@angular-devkit/build-angular": "^21.0.0",
+    "@angular-devkit/core": "^21.0.0",
+    "@angular/animations": "^21.0.0",
+    "@angular/common": "^21.0.0",
+    "@angular/compiler": "^21.0.0",
+    "@angular/compiler-cli": "^21.0.0",
+    "@angular/core": "^21.0.0",
+    "@angular/forms": "^21.0.0",
+    "@angular/platform-browser": "^21.0.0",
+    "@angular/platform-browser-dynamic": "^21.0.0",
     "@storybook/angular-compodoc": "workspace:*",
     "@storybook/core-webpack": "workspace:*",
     "@types/node": "^22.19.1",
     "empathic": "^2.0.0",
     "rimraf": "^6.0.1",
     "typescript": "^6.0.3",
     "webpack": "5",
-    "zone.js": "^0.15.0"
+    "zone.js": "^0.16.0"
   },
   "peerDependencies": {
-    "@angular-devkit/architect": ">=0.1800.0 < 0.2300.0",
-    "@angular-devkit/build-angular": ">=18.0.0 < 23.0.0",
-    "@angular-devkit/core": ">=18.0.0 < 23.0.0",
-    "@angular/animations": ">=18.0.0 < 23.0.0",
-    "@angular/cli": ">=18.0.0 < 23.0.0",
-    "@angular/common": ">=18.0.0 < 23.0.0",
-    "@angular/compiler": ">=18.0.0 < 23.0.0",
-    "@angular/compiler-cli": ">=18.0.0 < 23.0.0",
-    "@angular/core": ">=18.0.0 < 23.0.0",
-    "@angular/platform-browser": ">=18.0.0 < 23.0.0",
-    "@angular/platform-browser-dynamic": ">=18.0.0 < 23.0.0",
+    "@angular-devkit/architect": ">=0.2100.0 < 0.2300.0",
+    "@angular-devkit/build-angular": ">=21.0.0 < 23.0.0",
+    "@angular-devkit/core": ">=21.0.0 < 23.0.0",
+    "@angular/animations": ">=21.0.0 < 23.0.0",
+    "@angular/cli": ">=21.0.0 < 23.0.0",
+    "@angular/common": ">=21.0.0 < 23.0.0",
+    "@angular/compiler": ">=21.0.0 < 23.0.0",
+    "@angular/compiler-cli": ">=21.0.0 < 23.0.0",
+    "@angular/core": ">=21.0.0 < 23.0.0",
+    "@angular/platform-browser": ">=21.0.0 < 23.0.0",
+    "@angular/platform-browser-dynamic": ">=21.0.0 < 23.0.0",
     "rxjs": "^6.5.3 || ^7.4.0",
     "storybook": "workspace:^",
     "typescript": "^4.9.0 || ^5.0.0 || ^6.0.0",

code/frameworks/angular/src/builders/build-storybook/index.ts

@@ -30,7 +30,6 @@ import * as pkg from 'empathic/package';
 import { errorSummary, printErrorDetails } from '../utils/error-handler.ts';
 import { runCompodoc } from '../utils/run-compodoc.ts';
 import type { StandaloneOptions } from '../utils/standalone-options.ts';
-import { VERSION } from '@angular/core';
 import { Channel } from 'storybook/internal/channels';
 
 addToGlobalContext('cliVersion', versions.storybook);
@@ -122,7 +121,8 @@ const commandBuilder: BuilderHandlerFn<StorybookBuilderOptions> = async (
     previewUrl,
     sourceMap = false,
     preserveSymlinks = false,
-    experimentalZoneless = !!(VERSION.major && Number(VERSION.major) >= 21),
+    // Angular 21+ always supports zoneless; users still opt out via `experimentalZoneless: false`
+    experimentalZoneless = true,
   } = options;
 
   const packageJsonPath = pkg.up({ cwd: __dirname });

code/frameworks/angular/src/builders/start-storybook/index.ts

@@ -31,7 +31,6 @@ import * as pkg from 'empathic/package';
 import { errorSummary, printErrorDetails } from '../utils/error-handler.ts';
 import { runCompodoc } from '../utils/run-compodoc.ts';
 import type { StandaloneOptions } from '../utils/standalone-options.ts';
-import { VERSION } from '@angular/core';
 import { Channel } from 'storybook/internal/channels';
 
 addToGlobalContext('cliVersion', versions.storybook);
@@ -146,7 +145,8 @@ const commandBuilder: BuilderHandlerFn<StorybookBuilderOptions> = (
           previewUrl,
           sourceMap = false,
           preserveSymlinks = false,
-          experimentalZoneless = !!(VERSION.major && Number(VERSION.major) >= 21),
+          // Angular 21+ always supports zoneless; users still opt out via `experimentalZoneless: false`
+          experimentalZoneless = true,
         } = options;
 
         const packageJsonPath = pkg.up({ cwd: __dirname });

code/frameworks/angular/src/client/angular-beta/utils/PropertyExtractor.ts

@@ -9,7 +9,6 @@ import {
   Output,
   Pipe,
   ɵReflectionCapabilities as ReflectionCapabilities,
-  VERSION,
 } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
 import { dedent } from 'ts-dedent';
@@ -172,19 +171,16 @@ export class PropertyExtractor implements NgModuleMetadata {
 
     // Check if the hierarchically lowest Component or Directive decorator (the only relevant for importing dependencies) is standalone.
 
-    let isStandalone =
+    // Starting in Angular 19 the default (in case it's undefined) value for standalone is true
+    const isStandalone =
       (isComponent || isDirective) &&
-      [...decorators]
+      ([...decorators]
         .reverse() // reflectionCapabilities returns decorators in a hierarchically top-down order
         .find(
           (d) =>
             this.isDecoratorInstanceOf(d, 'Component') || this.isDecoratorInstanceOf(d, 'Directive')
-        )?.standalone;
-
-    //Starting in Angular 19 the default (in case it's undefined) value for standalone is true
-    if (isStandalone === undefined) {
-      isStandalone = !!(VERSION.major && Number(VERSION.major) >= 19);
-    }
+        )?.standalone ??
+        true);
 
     return { isDeclarable, isStandalone };
   };

code/lib/cli-storybook/src/autoblock/block-dependencies-versions.test.ts

@@ -65,4 +65,44 @@ describe('dependenciesVersions blocker', () => {
 
     expect(result).toBe(false);
   });
+
+  test('@angular/core 20 is blocked with message and migration anchor', async () => {
+    const packageManager = createPackageManager({ '@angular/core': '20.0.0' });
+
+    const result = await blocker.check(createCheckOptions(packageManager));
+
+    expect(result).toEqual({
+      packageName: '@angular/core',
+      installedVersion: '20.0.0',
+      minimumVersion: '21.0.0',
+    });
+
+    if (!result) {
+      throw new Error('Expected @angular/core 20.0.0 to be blocked');
+    }
+
+    const logged = blocker.log(result);
+
+    expect(logged.title).toBe('Require Angular v21 and up');
+    expect(logged.message).toContain('Support for Angular < 21 has been removed.');
+    expect(logged.link).toBe(
+      'https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#angular-requires-angular-21-or-higher'
+    );
+  });
+
+  test.each(['21.0.0', '22.1.0'])('@angular/core %s is not blocked', async (version) => {
+    const packageManager = createPackageManager({ '@angular/core': version });
+
+    const result = await blocker.check(createCheckOptions(packageManager));
+
+    expect(result).toBe(false);
+  });
+
+  test('missing @angular/core does not block', async () => {
+    const packageManager = createPackageManager({});
+
+    const result = await blocker.check(createCheckOptions(packageManager));
+
+    expect(result).toBe(false);
+  });
 });

code/lib/cli-storybook/src/autoblock/block-dependencies-versions.ts

@@ -4,7 +4,7 @@ import { createBlocker } from './types.ts';
 import { findOutdatedPackage } from './utils.ts';
 
 const minimalVersionsMap = {
-  '@angular/core': '18.0.0',
+  '@angular/core': '21.0.0',
   'react-scripts': '5.0.0',
   next: '15.0.0',
   preact: '10.0.0',
@@ -24,12 +24,12 @@ export const blocker = createBlocker({
     switch (data.packageName) {
       case '@angular/core':
         return {
-          title: 'Angular 18 support removed',
+          title: 'Require Angular v21 and up',
           message: dedent`
-            Support for Angular < 18 has been removed.
+            Support for Angular < 21 has been removed.
             Please see the migration guide for more information:
           `,
-          link: 'https://angular.dev/update-guide',
+          link: 'https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#angular-requires-angular-21-or-higher',
         };
       case 'next':
         return {