feat: add cypress/angular-zoneless testing harness for Angular 21 (also supports Angular 20) (#33025)

* feat: add cypress/angular-zoneless mount handler and auto scaffold for angular 21 zoneless

* make active fixture sync and update angular-21 examples to signals where applicable

Author: AtofStryker

.circleci/cache-version.txt

@@ -1,2 +1,2 @@
 # Bump this version to force CI to re-create the cache from scratch.
-11-25-2025
+12-02-2025

.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" != "feat/support_angular_21" ]]; then
+            echo 'if ! [[ "$CIRCLE_BRANCH" != "develop" && "$CIRCLE_BRANCH" != "release/"* && "$CIRCLE_BRANCH" != "feat/add_zoneless_angular_harness" ]]; 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
@@ -2301,6 +2301,14 @@ jobs:
           name: Build
           command: yarn lerna run build --scope=@cypress/angular
 
+  npm-angular-zoneless:
+    <<: *defaults
+    steps:
+      - restore_cached_workspace
+      - run:
+          name: Build
+          command: yarn lerna run build --scope @cypress/angular-zoneless
+
   npm-puppeteer-unit-tests:
     <<: *defaults
     steps:

.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: [ 'feat/support_angular_21', << pipeline.git.branch >> ]
+      - equal: [ 'feat/add_zoneless_angular_harness', << pipeline.git.branch >> ]
       - matches:
           pattern: /^release\/\d+\.\d+\.\d+$/
           value: << pipeline.git.branch >>
@@ -236,6 +236,9 @@ linux-x64:
     - npm-angular:
         requires:
           - build
+    - npm-angular-zoneless:
+        requires:
+          - build
     - npm-mount-utils:
         requires:
           - build
@@ -258,6 +261,7 @@ linux-x64:
           - check-ts
           - health-check
           - npm-angular
+          - npm-angular-zoneless
           - npm-eslint-plugin-dev
           - npm-puppeteer-unit-tests
           - npm-puppeteer-cypress-tests

.circleci/src/pipeline/workflows/pull-request.yml

@@ -290,6 +290,11 @@ jobs:
         - internal-pr-build
         - external-pr-build
         - approve-contributor-pr
+  - npm-angular-zoneless:
+      requires:
+        - internal-pr-build
+        - external-pr-build
+        - approve-contributor-pr
   - npm-mount-utils:
       requires:
         - internal-pr-build

CHANGELOG.md

@@ -2,6 +2,7 @@
 
 - [Cypress App](https://on.cypress.io/changelog)
 - [`@cypress/angular`](https://github.com/cypress-io/cypress/blob/develop/npm/angular/CHANGELOG.md)
+- [`@cypress/angular-zoneless`](https://github.com/cypress-io/cypress/blob/develop/npm/angular-zoneless/CHANGELOG.md)
 - [`@cypress/eslint-plugin-dev`](https://github.com/cypress-io/cypress/blob/develop/npm/eslint-plugin-dev/CHANGELOG.md)
 - [`@cypress/mount-utils`](https://github.com/cypress-io/cypress/blob/develop/npm/mount-utils/CHANGELOG.md)
 - [`@cypress/react`](https://github.com/cypress-io/cypress/blob/develop/npm/react/CHANGELOG.md)

CONTRIBUTING.md

@@ -215,6 +215,7 @@ Here is a list of the npm packages in this repository:
  | Folder Name                                            | Package Name                       | Purpose                                                                      |
  | :----------------------------------------------------- | :--------------------------------- | :--------------------------------------------------------------------------- |
  | [angular](./npm/angular)                               | `@cypress/angular`                   | Cypress component testing for Angular.     |
+ | [angular-zoneless](./npm/angular-zoneless)             | `@cypress/angular-zoneless`        | Cypress component testing for Angular using zoneless change detection.       |
  | [eslint-plugin-dev](./npm/eslint-plugin-dev)           | `@cypress/eslint-plugin-dev`       | Eslint plugin for internal development.          |
  | [grep](./npm/grep)                                       | `@cypress/grep`                     | Filter tests using substring                        |
  | [mount-utils](./npm/mount-utils)                       | `@cypress/mount-utils`             | Common functionality for Vue/React/Angular adapters. |

cli/.gitignore

@@ -19,6 +19,7 @@ vue
 react*
 mount-utils
 angular
+angular-zoneless
 svelte
 index.js
 lib/**/*.js

cli/CHANGELOG.md

@@ -6,6 +6,7 @@ _Released 12/16/2025 (PENDING)_
 **Features:**
 
 - `Angular` version 21 is now supported within component testing. Addressed in [#33004](https://github.com/cypress-io/cypress/pull/33004).
+- Adds zoneless support for `Angular` Component Testing through the `angular-zoneless` mount function. Addresses [#31504](https://github.com/cypress-io/cypress/issues/31504) and [#30070](https://github.com/cypress-io/cypress/issues/30070).
 
 **Bugfixes:**
 

cli/eslint.config.ts

@@ -36,6 +36,7 @@ export default [
       '**/build/**/*',
       'package.json',
       '**/angular/**/*',
+      '**/angular-zoneless/**/*',
       '**/react/**/*',
       '**/vue/**/*',
       '**/svelte/**/*',

cli/package.json

@@ -62,6 +62,7 @@
   },
   "devDependencies": {
     "@cypress/angular": "0.0.0-development",
+    "@cypress/angular-zoneless": "0.0.0-development",
     "@cypress/grep": "0.0.0-development",
     "@cypress/mount-utils": "0.0.0-development",
     "@cypress/react": "0.0.0-development",
@@ -102,6 +103,7 @@
     "vue",
     "react",
     "angular",
+    "angular-zoneless",
     "svelte"
   ],
   "bin": {
@@ -143,6 +145,11 @@
       "import": "./angular/dist/index.js",
       "require": "./angular/dist/index.js"
     },
+    "./angular-zoneless": {
+      "types": "./angular-zoneless/dist/index.d.ts",
+      "import": "./angular-zoneless/dist/index.js",
+      "require": "./angular-zoneless/dist/index.js"
+    },
     "./svelte": {
       "types": "./svelte/dist/index.d.ts",
       "import": "./svelte/dist/cypress-svelte.esm-bundler.js",