feat: add support for Angular 21

AtofStryker · AtofStryker · commit 0d85a784ba8a · 2025-11-25T12:39:30.000-05:00
diff --git a/.circleci/src/pipeline/@pipeline.yml b/.circleci/src/pipeline/@pipeline.yml
@@ -121,7 +121,7 @@ commands:
           name: Set environment variable to determine whether or not to persist artifacts
           command: |
             echo "Setting SHOULD_PERSIST_ARTIFACTS variable"
-            echo 'if ! [[ "$CIRCLE_BRANCH" != "develop" && "$CIRCLE_BRANCH" != "release/"* && "$CIRCLE_BRANCH" != "fix/angular_dep_resolution_windows" ]]; then
+            echo 'if ! [[ "$CIRCLE_BRANCH" != "develop" && "$CIRCLE_BRANCH" != "release/"* && "$CIRCLE_BRANCH" != "feat/support_angular_21" ]]; then
                 export SHOULD_PERSIST_ARTIFACTS=true
             fi' >> "$BASH_ENV"
   # You must run `setup_should_persist_artifacts` command and be using bash before running this command
diff --git a/.circleci/src/pipeline/workflows/@main.yml b/.circleci/src/pipeline/workflows/@main.yml
@@ -4,7 +4,7 @@ linux-x64:
       - equal: [ develop, << pipeline.git.branch >> ]
       # use the following branch as well to ensure that v8 snapshot cache updates are fully tested
       - equal: [ 'update-v8-snapshot-cache-on-develop', << pipeline.git.branch >> ]
-      - equal: [ 'fix/angular_dep_resolution_windows', << pipeline.git.branch >> ]
+      - equal: [ 'feat/support_angular_21', << pipeline.git.branch >> ]
       - matches:
           pattern: /^release\/\d+\.\d+\.\d+$/
           value: << pipeline.git.branch >>
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/cypress-schematic/src/e2e.spec.ts b/npm/cypress-schematic/src/e2e.spec.ts
@@ -25,7 +25,7 @@ const runCommandInProject = (command: string, projectPath: string) => {
 
 const cypressSchematicPackagePath = path.join(__dirname, '..')
 
-const ANGULAR_PROJECTS: ProjectFixtureDir[] = ['angular-19', 'angular-20']
+const ANGULAR_PROJECTS: ProjectFixtureDir[] = ['angular-20', 'angular-21']
 
 describe('ng add @cypress/schematic / only e2e', { timeout: 1000 * 60 * 5 }, function () {
   for (const project of ANGULAR_PROJECTS) {
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,39 +33,34 @@ 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 () => {
-    const projectRoot = await scaffoldMigrationProject('angular-20')
+  it('sources the config from angular-21', async () => {
+    const projectRoot = await scaffoldMigrationProject('angular-21')
 
     process.chdir(projectRoot)
     const devServerConfig = {
@@ -87,10 +82,6 @@ describe('angularHandler', { timeout: 60000 }, function () {
       sourceRoot: 'src',
       buildOptions: {
         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',
         assets: ['src/favicon.ico', 'src/assets'],
         styles: ['src/styles.scss'],
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/project-fixtures/angular/src/app/mount.cy.ts b/system-tests/project-fixtures/angular/src/app/mount.cy.ts
@@ -68,8 +68,9 @@ describe('angular mount', () => {
       return cy.contains('h1', 'Hello World from Spec').wrap(fixture)
     })
     .then((fixture) => {
-      fixture.componentInstance.msg = 'I just changed!'
-      fixture.detectChanges()
+      // NOTE: the correct way to set an input is to use the componentRef.setInput method so angular change detection runs properly.
+      // @see https://github.com/cypress-io/cypress/issues/32391 thread for more details.
+      fixture.componentRef.setInput('msg', 'I just changed!')
       cy.contains('h1', 'I just changed!')
     })
   })
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`