Angular: Add support for v21

code/frameworks/angular/package.json

@@ -90,18 +90,17 @@
     "zone.js": "^0.15.0"
   },
   "peerDependencies": {
-    "@angular-devkit/architect": ">=0.1800.0 < 0.2100.0",
-    "@angular-devkit/build-angular": ">=18.0.0 < 21.0.0",
-    "@angular-devkit/core": ">=18.0.0 < 21.0.0",
-    "@angular/animations": ">=18.0.0 < 21.0.0",
-    "@angular/cli": ">=18.0.0 < 21.0.0",
-    "@angular/common": ">=18.0.0 < 21.0.0",
-    "@angular/compiler": ">=18.0.0 < 21.0.0",
-    "@angular/compiler-cli": ">=18.0.0 < 21.0.0",
-    "@angular/core": ">=18.0.0 < 21.0.0",
-    "@angular/forms": ">=18.0.0 < 21.0.0",
-    "@angular/platform-browser": ">=18.0.0 < 21.0.0",
-    "@angular/platform-browser-dynamic": ">=18.0.0 < 21.0.0",
+    "@angular-devkit/architect": ">=0.1800.0 < 0.2200.0",
+    "@angular-devkit/build-angular": ">=18.0.0 < 22.0.0",
+    "@angular-devkit/core": ">=18.0.0 < 22.0.0",
+    "@angular/animations": ">=18.0.0 < 22.0.0",
+    "@angular/cli": ">=18.0.0 < 22.0.0",
+    "@angular/common": ">=18.0.0 < 22.0.0",
+    "@angular/compiler": ">=18.0.0 < 22.0.0",
+    "@angular/compiler-cli": ">=18.0.0 < 22.0.0",
+    "@angular/core": ">=18.0.0 < 22.0.0",
+    "@angular/platform-browser": ">=18.0.0 < 22.0.0",
+    "@angular/platform-browser-dynamic": ">=18.0.0 < 22.0.0",
     "rxjs": "^6.5.3 || ^7.4.0",
     "storybook": "workspace:^",
     "typescript": "^4.9.0 || ^5.0.0",

code/lib/cli-storybook/src/sandbox-templates.ts

@@ -584,6 +584,10 @@ export const baseTemplates = {
     name: 'Angular CLI Prerelease (Webpack | TypeScript)',
     script:
       'npx -p @angular/cli@next ng new angular-v16 --directory {{beforeDir}} --routing=true --minimal=true --style=scss --strict --skip-git --skip-install --package-manager=yarn --ssr',
+    modifications: {
+      // Angular 21 has introduced a peer dependency requirement on standard-schema via @angular/forms`
+      extraDependencies: ['@standard-schema/spec@^1', '@angular/forms@next'],
+    },
     expected: {
       framework: '@storybook/angular',
       renderer: '@storybook/angular',
@@ -595,6 +599,9 @@ export const baseTemplates = {
     name: 'Angular CLI Latest (Webpack | TypeScript)',
     script:
       'npx -p @angular/cli ng new angular-latest --directory {{beforeDir}} --routing=true --minimal=true --style=scss --strict --skip-git --skip-install --package-manager=yarn --ssr',
+    modifications: {
+      extraDependencies: ['@angular/forms@latest'],
+    },
     expected: {
       framework: '@storybook/angular',
       renderer: '@storybook/angular',

code/lib/create-storybook/src/generators/ANGULAR/index.ts

@@ -5,6 +5,7 @@ import { AngularJSON, ProjectType, copyTemplate } from 'storybook/internal/cli';
 import { logger, prompt } from 'storybook/internal/node-logger';
 import { SupportedBuilder, SupportedFramework, SupportedRenderer } from 'storybook/internal/types';
 
+import semver from 'semver';
 import { dedent } from 'ts-dedent';
 
 import { defineGeneratorModule } from '../modules/GeneratorModule';
@@ -85,11 +86,39 @@ export default defineGeneratorModule({
       copyTemplate(templateDir, root || undefined);
     }
 
+    const toDevkitVersion = (ngRange?: string | null) => {
+      if (!ngRange) {
+        return undefined;
+      }
+      const min = semver.minVersion(ngRange);
+
+      if (!min) {
+        return undefined;
+      }
+      const pre = min.prerelease && min.prerelease.length > 0 ? `-${min.prerelease.join('.')}` : '';
+      // devkit follows 0.<major*100 + minor>.<patch>
+      const devkitMinor = min.major * 100 + min.minor;
+      const versionCore = `0.${devkitMinor}.${min.patch}${pre}`;
+      const hasCaret = ngRange.trim().startsWith('^');
+      return hasCaret ? `^${versionCore}` : versionCore;
+    };
+
+    const devkitVersion = toDevkitVersion(angularVersion);
+
+    const extraAngularDeps = [
+      angularVersion
+        ? `@angular-devkit/build-angular@${angularVersion}`
+        : '@angular-devkit/build-angular',
+      devkitVersion ? `@angular-devkit/architect@${devkitVersion}` : '@angular-devkit/architect',
+      angularVersion ? `@angular-devkit/core@${angularVersion}` : '@angular-devkit/core',
+      angularVersion
+        ? `@angular/platform-browser-dynamic@${angularVersion}`
+        : '@angular/platform-browser-dynamic',
+    ];
+
     return {
       extraPackages: [
-        angularVersion
-          ? `@angular-devkit/build-angular@${angularVersion}`
-          : '@angular-devkit/build-angular',
+        ...extraAngularDeps,
         ...(useCompodoc ? ['@compodoc/compodoc', '@storybook/addon-docs'] : []),
       ],
       addScripts: false, // Handled above based on project count

code/yarn.lock

@@ -7833,18 +7833,17 @@ __metadata:
     webpack: "npm:5"
     zone.js: "npm:^0.15.0"
   peerDependencies:
-    "@angular-devkit/architect": ">=0.1800.0 < 0.2100.0"
-    "@angular-devkit/build-angular": ">=18.0.0 < 21.0.0"
-    "@angular-devkit/core": ">=18.0.0 < 21.0.0"
-    "@angular/animations": ">=18.0.0 < 21.0.0"
-    "@angular/cli": ">=18.0.0 < 21.0.0"
-    "@angular/common": ">=18.0.0 < 21.0.0"
-    "@angular/compiler": ">=18.0.0 < 21.0.0"
-    "@angular/compiler-cli": ">=18.0.0 < 21.0.0"
-    "@angular/core": ">=18.0.0 < 21.0.0"
-    "@angular/forms": ">=18.0.0 < 21.0.0"
-    "@angular/platform-browser": ">=18.0.0 < 21.0.0"
-    "@angular/platform-browser-dynamic": ">=18.0.0 < 21.0.0"
+    "@angular-devkit/architect": ">=0.1800.0 < 0.2200.0"
+    "@angular-devkit/build-angular": ">=18.0.0 < 22.0.0"
+    "@angular-devkit/core": ">=18.0.0 < 22.0.0"
+    "@angular/animations": ">=18.0.0 < 22.0.0"
+    "@angular/cli": ">=18.0.0 < 22.0.0"
+    "@angular/common": ">=18.0.0 < 22.0.0"
+    "@angular/compiler": ">=18.0.0 < 22.0.0"
+    "@angular/compiler-cli": ">=18.0.0 < 22.0.0"
+    "@angular/core": ">=18.0.0 < 22.0.0"
+    "@angular/platform-browser": ">=18.0.0 < 22.0.0"
+    "@angular/platform-browser-dynamic": ">=18.0.0 < 22.0.0"
     rxjs: ^6.5.3 || ^7.4.0
     storybook: "workspace:^"
     typescript: ^4.9.0 || ^5.0.0