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

.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).
 
 ## 15.7.1
 

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",

cli/scripts/post-build.ts

@@ -11,6 +11,7 @@ const npmModulesToCopy: string[] = [
   'react',
   'vue',
   'angular',
+  'angular-zoneless',
   'svelte',
 ]
 

npm/angular-zoneless/.eslintignore

@@ -0,0 +1,5 @@
+**/dist
+**/*.d.ts
+**/package-lock.json
+**/tsconfig.json
+**/cypress/fixtures

npm/angular-zoneless/.eslintrc

@@ -0,0 +1,8 @@
+{
+  "plugins": [
+    "cypress"
+  ],
+  "extends": [
+    "plugin:@cypress/dev/tests"
+  ]
+}

npm/angular-zoneless/.npmignore

@@ -0,0 +1,3 @@
+examples
+src
+cypress

npm/angular-zoneless/.releaserc.js

@@ -0,0 +1,3 @@
+module.exports = {
+  ...require('../../.releaserc'),
+}

npm/angular-zoneless/README.md

@@ -0,0 +1,15 @@
+# @cypress/angular-zoneless
+
+Mount Angular components in the open source [Cypress.io](https://www.cypress.io/) test runner without leveraging zone.js for change detection
+
+> **Note:** This package is bundled with the `cypress` package and should not need to be installed separately. See the [Angular Component Testing Docs](https://docs.cypress.io/guides/component-testing/angular/overview) for mounting Angular components. Installing and importing `mount` from `@cypress/angular-zoneless` should only be done for advanced use-cases.
+
+## Requirements
+
+- Angular 21.0.0 or Angular 20.0.0 with development preview of zoneless change detection
+
+## Development
+
+Run `yarn build` to compile and sync packages to the `cypress` cli package.
+
+## [Changelog](./CHANGELOG.md)

npm/angular-zoneless/package.json

@@ -0,0 +1,74 @@
+{
+  "name": "@cypress/angular-zoneless",
+  "version": "0.0.0-development",
+  "description": "Test Angular Components with Cypress without zone.js",
+  "main": "dist/index.js",
+  "scripts": {
+    "prebuild": "rimraf dist",
+    "build": "rollup -c rollup.config.mjs",
+    "postbuild": "node ../../scripts/sync-exported-npm-with-cli.js",
+    "check-ts": "tsc --noEmit",
+    "dev": "rollup -c rollup.config.mjs -w",
+    "lint": "eslint --ext .js,.ts,.json, ."
+  },
+  "dependencies": {},
+  "devDependencies": {
+    "@angular/common": "^21.0.0",
+    "@angular/core": "^21.0.0",
+    "@angular/platform-browser-dynamic": "^21.0.0",
+    "@cypress/mount-utils": "0.0.0-development",
+    "rollup": "^4.24.4",
+    "typescript": "~5.9.2"
+  },
+  "peerDependencies": {
+    "@angular/common": ">=20.0.0",
+    "@angular/core": ">=20.0.0",
+    "@angular/platform-browser-dynamic": ">=20.0.0",
+    "rxjs": ">=7.8.0"
+  },
+  "files": [
+    "dist"
+  ],
+  "types": "dist/index.d.ts",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/cypress-io/cypress.git"
+  },
+  "homepage": "https://github.com/cypress-io/cypress/blob/develop/npm/angular-zoneless/#readme",
+  "bugs": "https://github.com/cypress-io/cypress/issues/new?assignees=&labels=npm%3A%20%40cypress%2Fangular-zoneless&template=1-bug-report.md&title=",
+  "keywords": [
+    "angular",
+    "cypress",
+    "cypress-io",
+    "test",
+    "testing",
+    "zoneless"
+  ],
+  "contributors": [
+    {
+      "name": "Bill Glesias",
+      "social": "@atofstryker"
+    }
+  ],
+  "module": "dist/index.js",
+  "publishConfig": {
+    "access": "public"
+  },
+  "nx": {
+    "targets": {
+      "build": {
+        "outputs": [
+          "{workspaceRoot}/cli/angular-zoneless"
+        ]
+      }
+    }
+  },
+  "standard": {
+    "globals": [
+      "Cypress",
+      "cy",
+      "expect"
+    ]
+  }
+}

npm/angular-zoneless/rollup.config.mjs

@@ -0,0 +1,13 @@
+import { createEntries } from '@cypress/mount-utils/create-rollup-entry.mjs'
+
+const config = {
+  external: [
+    '@angular/core',
+    '@angular/core/testing',
+    '@angular/common',
+    '@angular/platform-browser-dynamic/testing',
+    '@angular/core/rxjs-interop',
+  ],
+}
+
+export default createEntries({ formats: ['es'], input: 'src/index.ts', config })

npm/angular-zoneless/src/index.ts

@@ -0,0 +1 @@
+export * from './mount'