feat: add support for Angular 21

AtofStryker · AtofStryker · commit 0f3772bced46 · 2025-11-24T14:12:32.000-05:00
diff --git a/cli/CHANGELOG.md b/cli/CHANGELOG.md
@@ -7,6 +7,10 @@ _Released 12/2/2025 (PENDING)_
 
 - Improved performance when viewing command snapshots in the Command Log. Element highlighting is now significantly faster, especially when highlighting multiple elements or complex pages. This is achieved by reducing redundant style calculations and batching DOM operations to minimize browser reflows. Addressed in [#32951](https://github.com/cypress-io/cypress/pull/32951).
 
+**Features:**
+
+- `Angular` version 21 is now supported within component testing. Addressed in [#33004](https://github.com/cypress-io/cypress/pull/33004).
+
 ## 15.7.0
 
 _Released 11/19/2025_
diff --git a/npm/cypress-schematic/src/ct.spec.ts b/npm/cypress-schematic/src/ct.spec.ts
@@ -24,7 +24,7 @@ const copyAngularMount = async (projectPath: string) => {
 
 const cypressSchematicPackagePath = path.join(__dirname, '..')
 
-const ANGULAR_PROJECTS: ProjectFixtureDir[] = ['angular-19', 'angular-20']
+const ANGULAR_PROJECTS: ProjectFixtureDir[] = ['angular-20', 'angular-21']
 
 const timeout = 1000 * 60 * 5
 
diff --git a/npm/webpack-dev-server/cypress/e2e/angular.cy.ts b/npm/webpack-dev-server/cypress/e2e/angular.cy.ts
@@ -6,6 +6,7 @@ const WEBPACK_ANGULAR: ProjectFixtureDir[] = [
   'angular-18',
   'angular-19',
   'angular-20',
+  'angular-21',
 ]
 
 // Add to this list to focus on a particular permutation
diff --git a/npm/webpack-dev-server/test/handlers/angularHandler.spec.ts b/npm/webpack-dev-server/test/handlers/angularHandler.spec.ts
@@ -17,8 +17,8 @@ import {
 import { scaffoldMigrationProject } from '../test-helpers/scaffoldProject'
 
 describe('angularHandler', { timeout: 60000 }, function () {
-  it('sources the config from angular-19', async () => {
-    const projectRoot = await scaffoldMigrationProject('angular-19')
+  it('sources the config from angular-20', async () => {
+    const projectRoot = await scaffoldMigrationProject('angular-20')
 
     process.chdir(projectRoot)
     const devServerConfig = {
@@ -33,38 +33,33 @@ describe('angularHandler', { timeout: 60000 }, function () {
     expect(webpackConfig).toBeDefined()
     expect((webpackConfig?.entry as any).main).toBeUndefined()
     expect(sourceWebpackModulesResult.framework?.importPath).toContain(path.join('@angular-devkit', 'build-angular'))
-    expect(webpackConfig.stats).toEqual('errors-only')
     const projectConfig = await getProjectConfig(projectRoot)
 
     expect(projectConfig).toEqual({
       root: '',
       sourceRoot: 'src',
       buildOptions: {
-        outputPath: 'dist/angular',
-        index: 'src/index.html',
-        main: 'src/main.ts',
-        polyfills: 'src/polyfills.ts',
+        browser: 'src/main.ts',
+        // because of the way the main fixtures are configured in the system-test projects, we need to run as a zone.js application
+        polyfills: [
+          'zone.js',
+        ],
         tsConfig: 'tsconfig.app.json',
-        inlineStyleLanguage: 'scss',
         assets: ['src/favicon.ico', 'src/assets'],
         styles: ['src/styles.scss'],
-        scripts: [],
-        buildOptimizer: false,
         optimization: false,
-        vendorChunk: true,
         extractLicenses: false,
         sourceMap: true,
-        namedChunks: true,
       },
     })
 
     await expectLoadsAngularJson(projectRoot)
     await expectLoadsAngularCLiModules(projectRoot)
-    await expectGeneratesTsConfig(devServerConfig, projectConfig.buildOptions, true)
+    await expectGeneratesTsConfig(devServerConfig, projectConfig.buildOptions, false)
     expectLoadsAngularBuildOptions(projectConfig.buildOptions)
   })
 
-  it('sources the config from angular-20', async () => {
+  it('sources the config from angular-21', async () => {
     const projectRoot = await scaffoldMigrationProject('angular-20')
 
     process.chdir(projectRoot)
diff --git a/packages/app/cypress/e2e/runner/reporter-ct-mount-hover.cy.ts b/packages/app/cypress/e2e/runner/reporter-ct-mount-hover.cy.ts
@@ -3,7 +3,7 @@ import type { fixtureDirs } from '@tooling/system-tests'
 type ProjectDirs = typeof fixtureDirs
 
 const PROJECTS: {projectName: ProjectDirs[number], test: string}[] = [
-  { projectName: 'angular-20', test: 'app.component' },
+  { projectName: 'angular-21', test: 'app.component' },
   { projectName: 'react-vite-ts-configured', test: 'App.cy' },
   { projectName: 'react18', test: 'App.cy' },
   { projectName: 'next-14', test: 'index.cy' },
diff --git a/packages/scaffold-config/src/dependencies.ts b/packages/scaffold-config/src/dependencies.ts
@@ -70,7 +70,7 @@ export const WIZARD_DEPENDENCY_ANGULAR_CLI = {
   package: '@angular/cli',
   installer: '@angular/cli',
   description: 'CLI tool that you use to initialize, develop, scaffold, and maintain Angular applications.',
-  minVersion: '^18.0.0 || ^19.0.0 || ^20.0.0',
+  minVersion: '^18.0.0 || ^19.0.0 || ^20.0.0 || ^21.0.0',
 } as const
 
 export const WIZARD_DEPENDENCY_ANGULAR_DEVKIT_BUILD_ANGULAR = {
@@ -79,7 +79,7 @@ export const WIZARD_DEPENDENCY_ANGULAR_DEVKIT_BUILD_ANGULAR = {
   package: '@angular-devkit/build-angular',
   installer: '@angular-devkit/build-angular',
   description: 'Angular Webpack build facade',
-  minVersion: '^18.0.0 || ^19.0.0 || ^20.0.0',
+  minVersion: '^18.0.0 || ^19.0.0 || ^20.0.0 || ^21.0.0',
 } as const
 
 export const WIZARD_DEPENDENCY_ANGULAR_CORE = {
@@ -88,7 +88,7 @@ export const WIZARD_DEPENDENCY_ANGULAR_CORE = {
   package: '@angular/core',
   installer: '@angular/core',
   description: 'The core of the Angular framework',
-  minVersion: '^18.0.0 || ^19.0.0 || ^20.0.0',
+  minVersion: '^18.0.0 || ^19.0.0 || ^20.0.0 || ^21.0.0',
 } as const
 
 export const WIZARD_DEPENDENCY_ANGULAR_COMMON = {
@@ -97,7 +97,7 @@ export const WIZARD_DEPENDENCY_ANGULAR_COMMON = {
   package: '@angular/common',
   installer: '@angular/common',
   description: 'Commonly needed Angular directives and services',
-  minVersion: '^18.0.0 || ^19.0.0 || ^20.0.0',
+  minVersion: '^18.0.0 || ^19.0.0 || ^20.0.0 || ^21.0.0',
 } as const
 
 export const WIZARD_DEPENDENCY_ANGULAR_PLATFORM_BROWSER_DYNAMIC = {
@@ -106,7 +106,7 @@ export const WIZARD_DEPENDENCY_ANGULAR_PLATFORM_BROWSER_DYNAMIC = {
   package: '@angular/platform-browser-dynamic',
   installer: '@angular/platform-browser-dynamic',
   description: 'Library for using Angular in a web browser with JIT compilation',
-  minVersion: '^18.0.0 || ^19.0.0 || ^20.0.0',
+  minVersion: '^18.0.0 || ^19.0.0 || ^20.0.0 || ^21.0.0',
 } as const
 
 export const WIZARD_DEPENDENCY_SVELTE: Cypress.CypressComponentDependency = {
diff --git a/packages/scaffold-config/test/detect.spec.ts b/packages/scaffold-config/test/detect.spec.ts
@@ -85,7 +85,7 @@ describe('detectFramework', () => {
     })
   })
 
-  ;['18.2.0', '19.2.9'].forEach((v) => {
+  ;['20.1.0', '21.0.0'].forEach((v) => {
     it(`Angular CLI v${v}`, async () => {
       const projectPath = await scaffoldMigrationProject('angular-cli-unconfigured')
 
diff --git a/system-tests/projects/angular-21/README.md b/system-tests/projects/angular-21/README.md
@@ -0,0 +1 @@
+NOTE: Angular-21 comes zoneless by default, meaning the application is zoneless but `cypress/angular` currently is. When the zoneless angular handler is added, we will need to reference it here and likely not set the project up through fixture. We also need to remove the zone dependencies and cypress config resolution.
diff --git a/system-tests/projects/angular-21/angular.json b/system-tests/projects/angular-21/angular.json
@@ -0,0 +1,68 @@
+{
+  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+  "version": 1,
+  "newProjectRoot": "projects",
+  "projects": {
+    "angular": {
+      "projectType": "application",
+      "schematics": {},
+      "root": "",
+      "sourceRoot": "src",
+      "prefix": "app",
+      "architect": {
+        "build": {
+          "builder": "@angular/build:application",
+          "options": {
+            "browser": "src/main.ts",
+            "tsConfig": "tsconfig.app.json",
+            "assets": [
+              "src/favicon.ico",
+              "src/assets"
+            ],
+            "styles": [
+              "src/styles.scss"
+            ]
+          },
+          "configurations": {
+            "production": {
+              "budgets": [
+                {
+                  "type": "initial",
+                  "maximumWarning": "500kB",
+                  "maximumError": "1MB"
+                },
+                {
+                  "type": "anyComponentStyle",
+                  "maximumWarning": "4kB",
+                  "maximumError": "8kB"
+                }
+              ],
+              "outputHashing": "all"
+            },
+            "development": {
+              "optimization": false,
+              "extractLicenses": false,
+              "sourceMap": true
+            }
+          },
+          "defaultConfiguration": "production"
+        },
+        "serve": {
+          "builder": "@angular/build:dev-server",
+          "configurations": {
+            "production": {
+              "buildTarget": "angular:build:production"
+            },
+            "development": {
+              "buildTarget": "angular:build:development"
+            }
+          },
+          "defaultConfiguration": "development"
+        }
+      }
+    }
+  },
+  "cli": {
+    "analytics": false
+  }
+}
diff --git a/system-tests/projects/angular-21/cypress.config.ts b/system-tests/projects/angular-21/cypress.config.ts
@@ -0,0 +1,32 @@
+import { defineConfig } from 'cypress'
+
+export default defineConfig({
+  component: {
+    experimentalSingleTabRunMode: true,
+    devServer: {
+      framework: 'angular',
+      bundler: 'webpack',
+      webpackConfig: {
+        resolve: {
+          alias: {
+            '@angular/common/http': require.resolve('@angular/common/http'),
+            '@angular/common/testing': require.resolve('@angular/common/testing'),
+            '@angular/common': require.resolve('@angular/common'),
+            '@angular/core/testing': require.resolve('@angular/core/testing'),
+            '@angular/core/primitives/di': require.resolve('@angular/core/primitives/di'),
+            '@angular/core/primitives/event-dispatch': require.resolve('@angular/core/primitives/event-dispatch'),
+            '@angular/core/primitives/signals': require.resolve('@angular/core/primitives/signals'),
+            '@angular/core': require.resolve('@angular/core'),
+            '@angular/platform-browser/testing': require.resolve('@angular/platform-browser/testing'),
+            '@angular/platform-browser': require.resolve('@angular/platform-browser'),
+            '@angular/platform-browser-dynamic/testing': require.resolve('@angular/platform-browser-dynamic/testing'),
+            '@angular/platform-browser-dynamic': require.resolve('@angular/platform-browser-dynamic'),
+            'zone.js/testing': require.resolve('zone.js/testing'),
+            'zone.js': require.resolve('zone.js'),
+          },
+        },
+      },
+    },
+    specPattern: 'src/**/*.cy.ts',
+  },
+})
diff --git a/system-tests/projects/angular-21/package.json b/system-tests/projects/angular-21/package.json
@@ -0,0 +1,34 @@
+{
+  "name": "angular-21",
+  "version": "0.0.0",
+  "private": true,
+  "scripts": {
+    "build": "ng build",
+    "ng": "ng",
+    "start": "ng serve",
+    "test": "ng test",
+    "watch": "ng build --watch --configuration development"
+  },
+  "dependencies": {
+    "@angular/common": "^21.0.0",
+    "@angular/compiler": "^21.0.0",
+    "@angular/core": "^21.0.0",
+    "@angular/forms": "^21.0.0",
+    "@angular/platform-browser": "^21.0.0",
+    "@angular/router": "^21.0.0",
+    "rxjs": "~7.8.0",
+    "tslib": "^2.3.0"
+  },
+  "devDependencies": {
+    "@angular-devkit/build-angular": "^21.0.0",
+    "@angular/build": "^21.0.0",
+    "@angular/cli": "^21.0.0",
+    "@angular/compiler-cli": "^21.0.0",
+    "@angular/platform-browser-dynamic": "^21.0.0",
+    "jsdom": "^27.1.0",
+    "typescript": "~5.9.2",
+    "vitest": "^4.0.8",
+    "zone.js": "~0.15.0"
+  },
+  "projectFixtureDirectory": "angular"
+}
diff --git a/system-tests/projects/angular-21/tsconfig.json b/system-tests/projects/angular-21/tsconfig.json
@@ -0,0 +1,25 @@
+/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
+/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
+{
+  "compileOnSave": false,
+  "compilerOptions": {
+    "strict": true,
+    "noImplicitOverride": true,
+    "noPropertyAccessFromIndexSignature": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true,
+    "skipLibCheck": true,
+    "isolatedModules": true,
+    "experimentalDecorators": true,
+    "importHelpers": true,
+    "target": "ES2022",
+    "module": "preserve"
+  },
+  "angularCompilerOptions": {
+    "enableI18nLegacyMessageIdFormat": false,
+    "strictInjectionParameters": true,
+    "strictInputAccessModifiers": true,
+    "strictTemplates": true
+  },
+  "files": []
+}
diff --git a/system-tests/projects/angular-21/yarn.lock b/system-tests/projects/angular-21/yarn.lock
diff --git a/system-tests/test/component_testing_spec.ts b/system-tests/test/component_testing_spec.ts

Original file line number	Diff line number	Diff line change
`@@ -6,6 +6,7 @@ const WEBPACK_ANGULAR: ProjectFixtureDir[] = [`
`6`	`6`	`'angular-18',`
`7`	`7`	`'angular-19',`
`8`	`8`	`'angular-20',`
	`9`	`+ 'angular-21',`
`9`	`10`	`]`
`10`	`11`
`11`	`12`	`// Add to this list to focus on a particular permutation`
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1 @@`
	`1`	+NOTE: Angular-21 comes zoneless by default, meaning the application is zoneless but `cypress/angular` currently is. When the zoneless angular handler is added, we will need to reference it here and likely not set the project up through fixture. We also need to remove the zone dependencies and cypress config resolution.