feat: add support for Angular 21

[AtofStryker]

• Closes N/A

Additional details

Adds support for Angular 21 within Cypress Component testing. Right now the Angular 21 projects needs zone.js as a devDependency as cypress/angular currently only supports zone.js. I have a follow up PR #33025 that adds a zoneless mount handler and defaults the scaffolding to cypress/angular-zoneless for Angular 21 applications

As Angular 21's change detection is a bit different from the legacy implementations, I refactored some of the angular fixtures to use signals instead of observables as signals are fully supported as of angular 18+

Steps to test

use the prepublished binaries to make sure scaffolding works on a new angular 21 project

How has the user experience changed?

Users will now be able to use Angular 21 without Cypress scaffolding warnings. NOTE: this currently still requires the zone.js devDependency until the zoneless mount handler is merged down. The intent is for both of these two be shipped at the same time but the work is considered separate.

PR Tasks

• Have tests been added/updated?
• Has a PR for user-facing changes been opened in cypress-documentation? chore: add angular 21 and zoneless documentation cypress-documentation#6326
• Have API changes been updated in the type definitions?

---

Note

Adds Angular 21 support across component testing, scaffolding, CI, and docs, with new fixtures/tests and dependency updates.

• Angular 21 Support:
  • Add system-test project system-tests/projects/angular-21 (config, deps, tsconfig, cypress aliases for zone.js/Angular packages).
  • Update test matrices to include angular-21 (webpack-dev-server e2e, component_testing_spec).
  • Changelog entry for support in cli/CHANGELOG.md.
• Scaffolding/Detection:
  • Extend supported Angular package ranges to include ^21.0.0 in packages/scaffold-config/src/dependencies.ts.
  • Update framework detection tests to recognize Angular CLI 20.x/21.x.
  • README supported versions updated to “Angular 18–21”.
• Fixtures/Specs Refactor:
  • Replace RxJS/HttpClient patterns with Angular signals/model and async fetch in Angular example components/services.
  • Adjust CT specs (mount.cy.ts) to drop HttpClientModule, use componentRef.setInput, and Promise-based service doubles.
• Dev Server/Handler Tests:
  • Add angular-21 to webpack dev-server E2E; update angularHandler tests for Angular 20/21 build options and tsconfig generation flag.
• CI/Workflow:
  • CircleCI branch filters updated to feat/support_angular_21 and artifact persist conditions.
• Docs/Meta:
  • Add 15.8.0 release notes noting Angular 21 support.

^{Written by Cursor Bugbot for commit 3a67480. This will update automatically on new commits. Configure here.}

[cypress]

cypress    Run #67716

Run Properties:   Failed #67716  •  3a674801c4: Update system-tests/projects/angular-21/README.md

Project	cypress
Branch Review	feat/support_angular_21
Run status	Failed #67716
Run duration	18m 52s
Commit	3a674801c4: Update system-tests/projects/angular-21/README.md
Committer	Bill Glesias
View all properties for this run ↗︎

---

Test results
Failures	1
Flaky	9
Pending	1097
Skipped	4
Passing	26691
View all changes introduced in this branch ↗︎

---

Warning

Partial Report: The results for the Application Quality reports may be incomplete.

UI Coverage  45.48%
Untested elements	188
Tested elements	161

Accessibility  97.99%
Failed rules	4 critical   8 serious   2 moderate   2 minor
Failed elements	101

---

Tests for review

  src/runner/ResizablePanels.cy.tsx • 1 failed test • app-ct

View Output

Test		Artifacts
An uncaught error was detected outside of a test		Test Replay

  issues/28527.cy.ts • 1 flaky test • 5x-driver-chrome

View Output

Test		Artifacts
issue 28527 > fails and then retries and verifies about:blank is not displayed		Test Replay Screenshots

  issues/28527.cy.ts • 1 flaky test • 5x-driver-chrome:beta

View Output

Test		Artifacts
issue 28527 > fails and then retries and verifies about:blank is not displayed		Test Replay Screenshots

  e2e/origin/config_env.cy.ts • 1 flaky test • 5x-driver-electron

View Output

Test		Artifacts
cy.origin- Cypress.config() > serializable > overwrites different values in secondary if one exists in the primary		Test Replay

  issues/28527.cy.ts • 1 flaky test • 5x-driver-electron

View Output

Test		Artifacts
issue 28527 > fails and then retries and verifies about:blank is not displayed		Test Replay Screenshots

  e2e/origin/config_env.cy.ts • 1 flaky test • 5x-driver-inject-document-domain-chrome

View Output

Test		Artifacts
cy.origin- Cypress.config() > serializable > overwrites different values in secondary if one exists in the primary		Test Replay

The first 5 flaky specs are shown, see all 9 specs in Cypress Cloud.

[jennifer-shehane]

Got this running CT tests in Angular 21. I presume this error is expected for people to see, seems straightforward.

[AtofStryker]

Got this running CT tests in Angular 21. I presume this error is expected for people to see, seems straightforward.

correct. If you are using cypress/angular, you will need to install zone.js as a devDependency. However, #33025 fixes this, with also scaffolding using the new mount handler, cypress/angular-zoneless for angular 21+ projects so it should no longer error