feat: support Angular 19 with Cypress Component Testing

.circleci/cache-version.txt

@@ -1,3 +1,3 @@
 # Bump this version to force CI to re-create the cache from scratch.
 
-11-21-24
+11-26-24

.circleci/workflows.yml

@@ -30,7 +30,7 @@ mainBuildFilters: &mainBuildFilters
         - /^release\/\d+\.\d+\.\d+$/
         # use the following branch as well to ensure that v8 snapshot cache updates are fully tested
         - 'update-v8-snapshot-cache-on-develop'
-        - 'build-binary-placeholder'
+        - 'feat/support_angular_19'
         - 'publish-binary'
 
 # usually we don't build Mac app - it takes a long time
@@ -42,7 +42,7 @@ macWorkflowFilters: &darwin-workflow-filters
     - 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: [ 'build-binary-placeholder', << pipeline.git.branch >> ]
+    - equal: [ 'feat/support_angular_19', << pipeline.git.branch >> ]
     - matches:
         pattern: /^release\/\d+\.\d+\.\d+$/
         value: << pipeline.git.branch >>
@@ -53,7 +53,7 @@ linuxArm64WorkflowFilters: &linux-arm64-workflow-filters
     - 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: [ 'build-binary-placeholder', << pipeline.git.branch >> ]
+    - equal: [ 'feat/support_angular_19', << pipeline.git.branch >> ]
     - matches:
         pattern: /^release\/\d+\.\d+\.\d+$/
         value: << pipeline.git.branch >>
@@ -152,7 +152,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" != "build-binary-placeholder" ]]; then
+            echo 'if ! [[ "$CIRCLE_BRANCH" != "develop" && "$CIRCLE_BRANCH" != "release/"* && "$CIRCLE_BRANCH" != "feat/support_angular_19" ]]; 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

cli/CHANGELOG.md

@@ -41,6 +41,7 @@ in this [GitHub issue](https://github.com/cypress-io/cypress/issues/30447). Addr
 - Cypress Component Testing now supports:
   - `Next.js` version 15. Addresses [#30445](https://github.com/cypress-io/cypress/issues/30445).
   - `React` version 19. Cypress will allow detected use of the React 19 Release Candidate until React 19 is officially released. Addresses [#29470](https://github.com/cypress-io/cypress/issues/29470).
+  - `Angular` version 19. Addresses [#30175](https://github.com/cypress-io/cypress/issues/30175).
 
 **Bugfixes:**
 

npm/angular/src/mount.ts

@@ -219,7 +219,9 @@ function initTestBed<T> (
   return componentFixture
 }
 
-@Component({ selector: 'cy-wrapper-component', template: '' })
+// if using the Wrapper Component (template strings), the component itself cannot be
+// a standalone component
+@Component({ selector: 'cy-wrapper-component', template: '', standalone: false })
 class WrapperComponent { }
 
 /**
@@ -260,6 +262,11 @@ function setupFixture<T> (
 
   fixture.whenStable().then(() => {
     fixture.autoDetectChanges(config.autoDetectChanges ?? true)
+  }).catch((e) => {
+    // If this promise does not settle in Angular 19 it is rejected
+    // https://github.com/angular/angular/blob/main/CHANGELOG.md#1900-2024-11-19
+    // eslint-disable-next-line no-console
+    console.error(e)
   })
 
   return fixture

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

@@ -36,7 +36,7 @@ const copyAngularMount = async (projectPath: string) => {
 
 const cypressSchematicPackagePath = path.join(__dirname, '..')
 
-const ANGULAR_PROJECTS: ProjectFixtureDir[] = ['angular-17', 'angular-18']
+const ANGULAR_PROJECTS: ProjectFixtureDir[] = ['angular-18', 'angular-19']
 
 describe('ng add @cypress/schematic / e2e and ct', { timeout: 1000 * 60 * 5 }, function () {
   for (const project of ANGULAR_PROJECTS) {

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-17', 'angular-18']
+const ANGULAR_PROJECTS: ProjectFixtureDir[] = ['angular-18', 'angular-19']
 
 describe('ng add @cypress/schematic / only e2e', { timeout: 1000 * 60 * 5 }, function () {
   for (const project of ANGULAR_PROJECTS) {

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

@@ -5,6 +5,7 @@ import type { ProjectFixtureDir } from '@tooling/system-tests/lib/fixtureDirs'
 const WEBPACK_ANGULAR: ProjectFixtureDir[] = [
   'angular-17',
   'angular-18',
+  'angular-19',
 ]
 
 // Add to this list to focus on a particular permutation

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

@@ -46,8 +46,8 @@ describe('angularHandler', function () {
     expectLoadsAngularBuildOptions(buildOptions)
   })
 
-  it('sources the config from angular-18', async () => {
-    const projectRoot = await scaffoldMigrationProject('angular-18')
+  it('sources the config from angular-19', async () => {
+    const projectRoot = await scaffoldMigrationProject('angular-19')
 
     process.chdir(projectRoot)
     const devServerConfig = {

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-18', test: 'app.component' },
+  { projectName: 'angular-19', test: 'app.component' },
   { projectName: 'react-vite-ts-configured', test: 'App.cy' },
   { projectName: 'react18', test: 'App.cy' },
   { projectName: 'next-14', test: 'index.cy' },

packages/scaffold-config/src/dependencies.ts

@@ -67,7 +67,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: '^17.2.0 || ^18.0.0',
+  minVersion: '^17.2.0 || ^18.0.0 || ^19.0.0',
 } as const
 
 export const WIZARD_DEPENDENCY_ANGULAR_DEVKIT_BUILD_ANGULAR = {
@@ -76,7 +76,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: '^17.2.0 || ^18.0.0',
+  minVersion: '^17.2.0 || ^18.0.0 || ^19.0.0',
 } as const
 
 export const WIZARD_DEPENDENCY_ANGULAR_CORE = {
@@ -85,7 +85,7 @@ export const WIZARD_DEPENDENCY_ANGULAR_CORE = {
   package: '@angular/core',
   installer: '@angular/core',
   description: 'The core of the Angular framework',
-  minVersion: '^17.2.0 || ^18.0.0',
+  minVersion: '^17.2.0 || ^18.0.0 || ^19.0.0',
 } as const
 
 export const WIZARD_DEPENDENCY_ANGULAR_COMMON = {
@@ -94,7 +94,7 @@ export const WIZARD_DEPENDENCY_ANGULAR_COMMON = {
   package: '@angular/common',
   installer: '@angular/common',
   description: 'Commonly needed Angular directives and services',
-  minVersion: '^17.2.0 || ^18.0.0',
+  minVersion: '^17.2.0 || ^18.0.0 || ^19.0.0',
 } as const
 
 export const WIZARD_DEPENDENCY_ANGULAR_PLATFORM_BROWSER_DYNAMIC = {
@@ -103,7 +103,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: '^17.2.0 || ^18.0.0',
+  minVersion: '^17.2.0 || ^18.0.0 || ^19.0.0',
 } as const
 
 export const WIZARD_DEPENDENCY_SVELTE: Cypress.CypressComponentDependency = {

system-tests/project-fixtures/angular/src/app/app.component.ts

@@ -2,6 +2,7 @@ import { Component } from '@angular/core'
 
 @Component({
   selector: 'app-root',
+  standalone: false,
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.scss'],
 })

system-tests/project-fixtures/angular/src/app/components/another-child-providers.component.ts

@@ -4,6 +4,7 @@ import { take } from 'rxjs/operators'
 
 @Component({
   selector: 'app-another-child',
+  standalone: false,
   template: `<button (click)="handleClick()">{{ message }}</button>`,
   providers: [ChildProvidersService],
 })

system-tests/project-fixtures/angular/src/app/components/button-output.component.ts

@@ -2,6 +2,7 @@ import { Component, EventEmitter, Output } from '@angular/core'
 
 @Component({
   selector: 'app-button-output',
+  standalone: false,
   template: `<button (click)="clicked.emit(true)">Click Me</button>`,
 })
 export class ButtonOutputComponent {

system-tests/project-fixtures/angular/src/app/components/child-providers.component.ts

@@ -4,6 +4,7 @@ import { take } from 'rxjs/operators'
 
 @Component({
   selector: 'app-child-providers',
+  standalone: false,
   template: `<button (click)="handleClick()">{{ message }}</button>`,
 })
 export class ChildProvidersComponent {

system-tests/project-fixtures/angular/src/app/components/child.component.ts

@@ -2,6 +2,7 @@ import { Component, Input } from '@angular/core'
 
 @Component({
   selector: 'child-component',
+  standalone: false,
   template: '<h1>{{msg}}</h1>',
 })
 export class ChildComponent {

system-tests/project-fixtures/angular/src/app/components/counter.component.ts

@@ -3,6 +3,7 @@ import { CounterService } from './counter.service'
 
 @Component({
   selector: 'counter-component',
+  standalone: false,
   template: `<button (click)="increment()">
     Increment: {{ count$ | async }}
   </button>`,

system-tests/project-fixtures/angular/src/app/components/lifecycle.component.ts

@@ -2,6 +2,7 @@ import { Component, Input, OnInit, OnChanges, SimpleChanges } from '@angular/cor
 
 @Component({
   selector: 'app-lifecycle',
+  standalone: false,
   template: `<p>Hi {{ name }}. ngOnInit fired: {{ ngOnInitFired }} and ngOnChanges fired: {{ ngOnChangesFired }} and conditionalName: {{ conditionalName }}</p>`,
 })
 export class LifecycleComponent implements OnInit, OnChanges {

system-tests/project-fixtures/angular/src/app/components/parent-providers.component.ts

@@ -1,6 +1,7 @@
 import { Component } from '@angular/core'
 
 @Component({
+  standalone: false,
   template: `
     <app-child-providers></app-child-providers>
     <app-another-child></app-another-child>`,

system-tests/project-fixtures/angular/src/app/components/parent.component.ts

@@ -2,6 +2,7 @@ import { Component } from '@angular/core'
 
 @Component({
   selector: 'parent-component',
+  standalone: false,
   template: '<child-component [msg]="msg"></child-component>',
 })
 export class ParentComponent {

system-tests/project-fixtures/angular/src/app/components/projection.component.ts

@@ -2,6 +2,7 @@ import { Component } from '@angular/core'
 
 @Component({
   selector: 'app-projection',
+  standalone: false,
   template: `<h3><ng-content></ng-content></h3>`,
 })
 export class ProjectionComponent {}

system-tests/project-fixtures/angular/src/app/components/with-directives.component.ts

@@ -2,6 +2,7 @@ import { Component } from '@angular/core'
 
 @Component({
   selector: 'with-directives-component',
+  standalone: false,
   template: ` <button (click)="show = !show">Toggle Message</button>
     <ul *ngIf="show">
       <li *ngFor="let item of items">{{ item }}</li>

system-tests/project-fixtures/angular/src/app/mount.cy.ts

@@ -23,10 +23,16 @@ import { Cart, ProductComponent } from './components/cart.component'
 import { UrlImageComponent } from './components/url-image.component'
 
 @Component({
+  standalone: false,
   template: `<app-projection>Hello World</app-projection>`,
 })
 class WrapperComponent {}
 
+// Staring with Angular v19, standalone = true is the new default behavior.
+// This means that the ng module configurations, including test module configurations,
+// do not work by default with components. Cypress for non standalone components
+// injects the CommonModule by default and allows users to add module declarations.
+// unless standalone - false is configured for the component, this no longer works in Angular v19.
 describe('angular mount', () => {
   it('pushes CommonModule into component', () => {
     cy.mount(WithDirectivesComponent)
@@ -44,7 +50,10 @@ describe('angular mount', () => {
   })
 
   it('accepts declarations', () => {
-    cy.mount(ParentComponent, { declarations: [ChildComponent] })
+    cy.mount(ParentComponent, {
+      declarations: [ChildComponent],
+    })
+
     cy.contains('h1', 'Hello World from ParentComponent')
   })
 

system-tests/projects/angular-18/angular.json

@@ -0,0 +1,96 @@
+{
+  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+  "cli": {
+    "analytics": false
+  },
+  "version": 1,
+  "newProjectRoot": "projects",
+  "projects": {
+    "angular": {
+      "projectType": "application",
+      "schematics": {
+        "@schematics/angular:component": {
+          "style": "scss"
+        },
+        "@schematics/angular:application": {
+          "strict": true
+        }
+      },
+      "root": "",
+      "sourceRoot": "src",
+      "prefix": "app",
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-angular:browser",
+          "options": {
+            "outputPath": "dist/angular",
+            "index": "src/index.html",
+            "main": "src/main.ts",
+            "polyfills": "src/polyfills.ts",
+            "tsConfig": "tsconfig.app.json",
+            "inlineStyleLanguage": "scss",
+            "assets": [
+              "src/favicon.ico",
+              "src/assets"
+            ],
+            "styles": [
+              "src/styles.scss"
+            ],
+            "scripts": []
+          },
+          "configurations": {
+            "production": {
+              "budgets": [
+                {
+                  "type": "initial",
+                  "maximumWarning": "500kb",
+                  "maximumError": "1mb"
+                },
+                {
+                  "type": "anyComponentStyle",
+                  "maximumWarning": "2kb",
+                  "maximumError": "4kb"
+                }
+              ],
+              "fileReplacements": [
+                {
+                  "replace": "src/environments/environment.ts",
+                  "with": "src/environments/environment.prod.ts"
+                }
+              ],
+              "outputHashing": "all"
+            },
+            "development": {
+              "buildOptimizer": false,
+              "optimization": false,
+              "vendorChunk": true,
+              "extractLicenses": false,
+              "sourceMap": true,
+              "namedChunks": true
+            }
+          },
+          "defaultConfiguration": "production"
+        },
+        "serve": {
+          "builder": "@angular-devkit/build-angular:dev-server",
+          "configurations": {
+            "production": {
+              "browserTarget": "angular:build:production"
+            },
+            "development": {
+              "browserTarget": "angular:build:development"
+            }
+          },
+          "defaultConfiguration": "development"
+        },
+        "extract-i18n": {
+          "builder": "@angular-devkit/build-angular:extract-i18n",
+          "options": {
+            "browserTarget": "angular:build"
+          }
+        }
+      }
+    }
+  },
+  "defaultProject": "angular"
+}