Skip to content

Commit b1d85c9

Browse files
AtofStrykerAtofStryker
authored
feat: add support for Angular 21 (#33004)
* feat: add support for Angular 21 * convert old rxjs code from angular 18+ to signals as this is the new recommended approach since then * clean up fixtures * update caffold-config docs * readd tsconfig faux config as its needed for the schematic tess * fix issue with incorrect placement of tsconfig in angular config * Update system-tests/projects/angular-21/README.md
1 parent 1f53666 commit b1d85c9

File tree

24 files changed

+7269
-106
lines changed

24 files changed

+7269
-106
lines changed

‎.circleci/src/pipeline/@pipeline.yml‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -121,7 +121,7 @@ commands:
121121
name: Set environment variable to determine whether or not to persist artifacts
122122
command: |
123123
echo "Setting SHOULD_PERSIST_ARTIFACTS variable"
124-
echo 'if ! [[ "$CIRCLE_BRANCH" != "develop" && "$CIRCLE_BRANCH" != "release/"* && "$CIRCLE_BRANCH" != "fix/angular_dep_resolution_windows" ]]; then
124+
echo 'if ! [[ "$CIRCLE_BRANCH" != "develop" && "$CIRCLE_BRANCH" != "release/"* && "$CIRCLE_BRANCH" != "feat/support_angular_21" ]]; then
125125
export SHOULD_PERSIST_ARTIFACTS=true
126126
fi' >> "$BASH_ENV"
127127
# You must run `setup_should_persist_artifacts` command and be using bash before running this command

‎.circleci/src/pipeline/workflows/@main.yml‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ linux-x64:
44
- equal: [ develop, << pipeline.git.branch >> ]
55
# use the following branch as well to ensure that v8 snapshot cache updates are fully tested
66
- equal: [ 'update-v8-snapshot-cache-on-develop', << pipeline.git.branch >> ]
7-
- equal: [ 'fix/angular_dep_resolution_windows', << pipeline.git.branch >> ]
7+
- equal: [ 'feat/support_angular_21', << pipeline.git.branch >> ]
88
- matches:
99
pattern: /^release\/\d+\.\d+\.\d+$/
1010
value: << pipeline.git.branch >>

‎cli/CHANGELOG.md‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,12 @@
11
<!-- See the ../guides/writing-the-cypress-changelog.md for details on writing the changelog. -->
2+
## 15.8.0
3+
4+
_Released 12/16/2025 (PENDING)_
5+
6+
**Features:**
7+
8+
- `Angular` version 21 is now supported within component testing. Addressed in [#33004](https://github.com/cypress-io/cypress/pull/33004).
9+
210
## 15.7.1
311

412
_Released 12/2/2025_

‎npm/cypress-schematic/src/ct.spec.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ const copyAngularMount = async (projectPath: string) => {
2424

2525
const cypressSchematicPackagePath = path.join(__dirname, '..')
2626

27-
const ANGULAR_PROJECTS: ProjectFixtureDir[] = ['angular-19', 'angular-20']
27+
const ANGULAR_PROJECTS: ProjectFixtureDir[] = ['angular-20', 'angular-21']
2828

2929
const timeout = 1000 * 60 * 5
3030

‎npm/cypress-schematic/src/e2e.spec.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@ const runCommandInProject = (command: string, projectPath: string) => {
2525

2626
const cypressSchematicPackagePath = path.join(__dirname, '..')
2727

28-
const ANGULAR_PROJECTS: ProjectFixtureDir[] = ['angular-19', 'angular-20']
28+
const ANGULAR_PROJECTS: ProjectFixtureDir[] = ['angular-20', 'angular-21']
2929

3030
describe('ng add @cypress/schematic / only e2e', { timeout: 1000 * 60 * 5 }, function () {
3131
for (const project of ANGULAR_PROJECTS) {

‎npm/webpack-dev-server/cypress/e2e/angular.cy.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ const WEBPACK_ANGULAR: ProjectFixtureDir[] = [
66
'angular-18',
77
'angular-19',
88
'angular-20',
9+
'angular-21',
910
]
1011

1112
// Add to this list to focus on a particular permutation

‎npm/webpack-dev-server/test/handlers/angularHandler.spec.ts‎

Lines changed: 10 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -17,8 +17,8 @@ import {
1717
import { scaffoldMigrationProject } from '../test-helpers/scaffoldProject'
1818

1919
describe('angularHandler', { timeout: 60000 }, function () {
20-
it('sources the config from angular-19', async () => {
21-
const projectRoot = await scaffoldMigrationProject('angular-19')
20+
it('sources the config from angular-20', async () => {
21+
const projectRoot = await scaffoldMigrationProject('angular-20')
2222

2323
process.chdir(projectRoot)
2424
const devServerConfig = {
@@ -33,39 +33,34 @@ describe('angularHandler', { timeout: 60000 }, function () {
3333
expect(webpackConfig).toBeDefined()
3434
expect((webpackConfig?.entry as any).main).toBeUndefined()
3535
expect(sourceWebpackModulesResult.framework?.importPath).toContain(path.join('@angular-devkit', 'build-angular'))
36-
expect(webpackConfig.stats).toEqual('errors-only')
3736
const projectConfig = await getProjectConfig(projectRoot)
3837

3938
expect(projectConfig).toEqual({
4039
root: '',
4140
sourceRoot: 'src',
4241
buildOptions: {
43-
outputPath: 'dist/angular',
44-
index: 'src/index.html',
45-
main: 'src/main.ts',
46-
polyfills: 'src/polyfills.ts',
42+
browser: 'src/main.ts',
43+
// because of the way the main fixtures are configured in the system-test projects, we need to run as a zone.js application
44+
polyfills: [
45+
'zone.js',
46+
],
4747
tsConfig: 'tsconfig.app.json',
48-
inlineStyleLanguage: 'scss',
4948
assets: ['src/favicon.ico', 'src/assets'],
5049
styles: ['src/styles.scss'],
51-
scripts: [],
52-
buildOptimizer: false,
5350
optimization: false,
54-
vendorChunk: true,
5551
extractLicenses: false,
5652
sourceMap: true,
57-
namedChunks: true,
5853
},
5954
})
6055

6156
await expectLoadsAngularJson(projectRoot)
6257
await expectLoadsAngularCLiModules(projectRoot)
63-
await expectGeneratesTsConfig(devServerConfig, projectConfig.buildOptions, true)
58+
await expectGeneratesTsConfig(devServerConfig, projectConfig.buildOptions, false)
6459
expectLoadsAngularBuildOptions(projectConfig.buildOptions)
6560
})
6661

67-
it('sources the config from angular-20', async () => {
68-
const projectRoot = await scaffoldMigrationProject('angular-20')
62+
it('sources the config from angular-21', async () => {
63+
const projectRoot = await scaffoldMigrationProject('angular-21')
6964

7065
process.chdir(projectRoot)
7166
const devServerConfig = {
@@ -87,10 +82,6 @@ describe('angularHandler', { timeout: 60000 }, function () {
8782
sourceRoot: 'src',
8883
buildOptions: {
8984
browser: 'src/main.ts',
90-
// because of the way the main fixtures are configured in the system-test projects, we need to run as a zone.js application
91-
polyfills: [
92-
'zone.js',
93-
],
9485
tsConfig: 'tsconfig.app.json',
9586
assets: ['src/favicon.ico', 'src/assets'],
9687
styles: ['src/styles.scss'],

‎packages/app/cypress/e2e/runner/reporter-ct-mount-hover.cy.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import type { fixtureDirs } from '@tooling/system-tests'
33
type ProjectDirs = typeof fixtureDirs
44

55
const PROJECTS: {projectName: ProjectDirs[number], test: string}[] = [
6-
{ projectName: 'angular-20', test: 'app.component' },
6+
{ projectName: 'angular-21', test: 'app.component' },
77
{ projectName: 'react-vite-ts-configured', test: 'App.cy' },
88
{ projectName: 'react18', test: 'App.cy' },
99
{ projectName: 'next-14', test: 'index.cy' },

‎packages/scaffold-config/README.md‎

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -8,16 +8,16 @@ We will also attempt to scaffold a configuration file for projects using React a
88

99
### Supported Frameworks and Libraries
1010

11-
| Name | Version | Dev Server | Version | Library | Component Adaptor | Example Project |
12-
| ---------------- | -----------| ---------- | ---------- | ------------------ | -------------------------- | ------------------------------------------------------------------- |
13-
| React | - | Vite | 5, 6, 7 | React 18, 19 | `@cypress/react@latest` | [Link](../../system-tests/projects/react-vite-ts-configured) |
14-
| React | - | Webpack | 5 | React 18, 19 | `@cypress/vue@latest` | [Link](../../system-tests/projects/react18) |
15-
| Vue | - | Vite | 5, 6, 7 | Vue 3 | `@cypress/react@latest` | [Link](../../system-tests/projects/vue3-vite-ts-configured) |
16-
| Vue | - | Webpack | 5 | Vue 3 | `@cypress/vue@latest` | [Link](../../system-tests/projects/vue3-webpack-ts-configured) |
17-
| Angular | - | Webpack | 5 | Angular 17, 18, 19 | `@cypress/angular@latest` | [Link](../../system-tests/projects/angular-cli-configured) |
18-
| Svelte | - | Vite | 5, 6, 7 | Svelte 5 | `@cypress/svelte@latest` | [Link](../../system-tests/projects/svelte-vite-configured) |
19-
| Svelte | - | Webpack | 5 | Svelte 5 | `@cypress/svelte@latest` | [Link](../../system-tests/projects/svelte-webpack-configured) |
20-
| Next.js | 14, 15, 16 | Webpack | 5 | React 18, 19 | `@cypress/react@latest` | [Link](../../system-tests/projects/nextjs-configured) |
11+
| Name | Version | Dev Server | Version | Library | Component Adaptor | Example Project |
12+
| ---------------- | -----------| ---------- | ---------- | ---------------------- | -------------------------- | ------------------------------------------------------------------- |
13+
| React | - | Vite | 5, 6, 7 | React 18, 19 | `@cypress/react@latest` | [Link](../../system-tests/projects/react-vite-ts-configured) |
14+
| React | - | Webpack | 5 | React 18, 19 | `@cypress/vue@latest` | [Link](../../system-tests/projects/react18) |
15+
| Vue | - | Vite | 5, 6, 7 | Vue 3 | `@cypress/react@latest` | [Link](../../system-tests/projects/vue3-vite-ts-configured) |
16+
| Vue | - | Webpack | 5 | Vue 3 | `@cypress/vue@latest` | [Link](../../system-tests/projects/vue3-webpack-ts-configured) |
17+
| Angular | - | Webpack | 5 | Angular 18, 19, 20, 21 | `@cypress/angular@latest` | [Link](../../system-tests/projects/angular-cli-configured) |
18+
| Svelte | - | Vite | 5, 6, 7 | Svelte 5 | `@cypress/svelte@latest` | [Link](../../system-tests/projects/svelte-vite-configured) |
19+
| Svelte | - | Webpack | 5 | Svelte 5 | `@cypress/svelte@latest` | [Link](../../system-tests/projects/svelte-webpack-configured) |
20+
| Next.js | 14, 15, 16 | Webpack | 5 | React 18, 19 | `@cypress/react@latest` | [Link](../../system-tests/projects/nextjs-configured) |
2121

2222
### Adding More Projects
2323

‎packages/scaffold-config/src/dependencies.ts‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -70,7 +70,7 @@ export const WIZARD_DEPENDENCY_ANGULAR_CLI = {
7070
package: '@angular/cli',
7171
installer: '@angular/cli',
7272
description: 'CLI tool that you use to initialize, develop, scaffold, and maintain Angular applications.',
73-
minVersion: '^18.0.0 || ^19.0.0 || ^20.0.0',
73+
minVersion: '^18.0.0 || ^19.0.0 || ^20.0.0 || ^21.0.0',
7474
} as const
7575

7676
export const WIZARD_DEPENDENCY_ANGULAR_DEVKIT_BUILD_ANGULAR = {
@@ -79,7 +79,7 @@ export const WIZARD_DEPENDENCY_ANGULAR_DEVKIT_BUILD_ANGULAR = {
7979
package: '@angular-devkit/build-angular',
8080
installer: '@angular-devkit/build-angular',
8181
description: 'Angular Webpack build facade',
82-
minVersion: '^18.0.0 || ^19.0.0 || ^20.0.0',
82+
minVersion: '^18.0.0 || ^19.0.0 || ^20.0.0 || ^21.0.0',
8383
} as const
8484

8585
export const WIZARD_DEPENDENCY_ANGULAR_CORE = {
@@ -88,7 +88,7 @@ export const WIZARD_DEPENDENCY_ANGULAR_CORE = {
8888
package: '@angular/core',
8989
installer: '@angular/core',
9090
description: 'The core of the Angular framework',
91-
minVersion: '^18.0.0 || ^19.0.0 || ^20.0.0',
91+
minVersion: '^18.0.0 || ^19.0.0 || ^20.0.0 || ^21.0.0',
9292
} as const
9393

9494
export const WIZARD_DEPENDENCY_ANGULAR_COMMON = {
@@ -97,7 +97,7 @@ export const WIZARD_DEPENDENCY_ANGULAR_COMMON = {
9797
package: '@angular/common',
9898
installer: '@angular/common',
9999
description: 'Commonly needed Angular directives and services',
100-
minVersion: '^18.0.0 || ^19.0.0 || ^20.0.0',
100+
minVersion: '^18.0.0 || ^19.0.0 || ^20.0.0 || ^21.0.0',
101101
} as const
102102

103103
export const WIZARD_DEPENDENCY_ANGULAR_PLATFORM_BROWSER_DYNAMIC = {
@@ -106,7 +106,7 @@ export const WIZARD_DEPENDENCY_ANGULAR_PLATFORM_BROWSER_DYNAMIC = {
106106
package: '@angular/platform-browser-dynamic',
107107
installer: '@angular/platform-browser-dynamic',
108108
description: 'Library for using Angular in a web browser with JIT compilation',
109-
minVersion: '^18.0.0 || ^19.0.0 || ^20.0.0',
109+
minVersion: '^18.0.0 || ^19.0.0 || ^20.0.0 || ^21.0.0',
110110
} as const
111111

112112
export const WIZARD_DEPENDENCY_SVELTE: Cypress.CypressComponentDependency = {

0 commit comments

Comments
 (0)