chore: add support for Angular 16 (#26052)

* feat(angular): add support for Angular 16

* chore: update angular 16 pre-release version

* feat: handle getStylesConfig returning a Promise in Angular 16 (#26559)

* chore: remove next from deps to prepare for release

* remove .only, add angular-16 to webpack-dev-server e2e tests

---------

Co-authored-by: Leosvel Pérez Espinosa <leosvel.perez.espinosa@gmail.com>
Co-authored-by: astone123 <adams@cypress.io>

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

@@ -2,12 +2,12 @@
 /// <reference path="../support/e2e.ts" />
 import type { ProjectFixtureDir } from '@tooling/system-tests/lib/fixtureDirs'
 
-const WEBPACK_REACT: ProjectFixtureDir[] = ['angular-13', 'angular-14', 'angular-15']
+const WEBPACK_ANGULAR: ProjectFixtureDir[] = ['angular-13', 'angular-14', 'angular-15', 'angular-16']
 
 // Add to this list to focus on a particular permutation
 const ONLY_PROJECTS: ProjectFixtureDir[] = []
 
-for (const project of WEBPACK_REACT) {
+for (const project of WEBPACK_ANGULAR) {
   if (ONLY_PROJECTS.length && !ONLY_PROJECTS.includes(project)) {
     continue
   }

npm/webpack-dev-server/src/helpers/angularHandler.ts

@@ -260,28 +260,33 @@ async function getAngularCliWebpackConfig (devServerConfig: AngularWebpackDevSer
     buildOptions,
     context,
     (wco: any) => {
-      const stylesConfig = getStylesConfig(wco)
-
-      // We modify resolve-url-loader and set `root` to be `projectRoot` + `sourceRoot` to ensure
-      // imports in scss, sass, etc are correctly resolved.
-      // https://github.com/cypress-io/cypress/issues/24272
-      stylesConfig.module.rules.forEach((rule: RuleSetRule) => {
-        rule.rules?.forEach((ruleSet) => {
-          if (!Array.isArray(ruleSet.use)) {
-            return
-          }
-
-          ruleSet.use.map((loader) => {
-            if (typeof loader !== 'object' || typeof loader.options !== 'object' || !loader.loader?.includes('resolve-url-loader')) {
+      // Starting in Angular 16, the `getStylesConfig` function returns a `Promise`.
+      // We wrap it with `Promise.resolve` so we support older version of Angular
+      // returning a non-Promise result.
+      const stylesConfig = Promise.resolve(getStylesConfig(wco)).then((config) => {
+        // We modify resolve-url-loader and set `root` to be `projectRoot` + `sourceRoot` to ensure
+        // imports in scss, sass, etc are correctly resolved.
+        // https://github.com/cypress-io/cypress/issues/24272
+        config.module.rules.forEach((rule: RuleSetRule) => {
+          rule.rules?.forEach((ruleSet) => {
+            if (!Array.isArray(ruleSet.use)) {
               return
             }
 
-            const root = projectConfig.buildOptions.workspaceRoot || path.join(devServerConfig.cypressConfig.projectRoot, projectConfig.sourceRoot)
+            ruleSet.use.map((loader) => {
+              if (typeof loader !== 'object' || typeof loader.options !== 'object' || !loader.loader?.includes('resolve-url-loader')) {
+                return
+              }
 
-            debug('Adding root %s to resolve-url-loader options', root)
-            loader.options.root = root
+              const root = projectConfig.buildOptions.workspaceRoot || path.join(devServerConfig.cypressConfig.projectRoot, projectConfig.sourceRoot)
+
+              debug('Adding root %s to resolve-url-loader options', root)
+              loader.options.root = root
+            })
           })
         })
+
+        return config
       })
 
       return [getCommonConfig(wco), stylesConfig]

packages/scaffold-config/src/dependencies.ts

@@ -103,7 +103,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: '^=13.0.0 || ^=14.0.0 || ^=15.0.0',
+  minVersion: '^=13.0.0 || ^=14.0.0 || ^=15.0.0' || '^=16.0.0',
 } as const
 
 export const WIZARD_DEPENDENCY_ANGULAR_DEVKIT_BUILD_ANGULAR = {
@@ -112,7 +112,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: '^=13.0.0 || ^=14.0.0 || ^=15.0.0',
+  minVersion: '^=13.0.0 || ^=14.0.0 || ^=15.0.0' || '^=16.0.0',
 } as const
 
 export const WIZARD_DEPENDENCY_ANGULAR_CORE = {
@@ -121,7 +121,7 @@ export const WIZARD_DEPENDENCY_ANGULAR_CORE = {
   package: '@angular/core',
   installer: '@angular/core',
   description: 'The core of the Angular framework',
-  minVersion: '^=13.0.0 || ^=14.0.0 || ^=15.0.0',
+  minVersion: '^=13.0.0 || ^=14.0.0 || ^=15.0.0' || '^=16.0.0',
 } as const
 
 export const WIZARD_DEPENDENCY_ANGULAR_COMMON = {
@@ -130,7 +130,7 @@ export const WIZARD_DEPENDENCY_ANGULAR_COMMON = {
   package: '@angular/common',
   installer: '@angular/common',
   description: 'Commonly needed Angular directives and services',
-  minVersion: '^=13.0.0 || ^=14.0.0 || ^=15.0.0',
+  minVersion: '^=13.0.0 || ^=14.0.0 || ^=15.0.0' || '^=16.0.0',
 } as const
 
 export const WIZARD_DEPENDENCY_ANGULAR_PLATFORM_BROWSER_DYNAMIC = {
@@ -139,7 +139,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: '^=13.0.0 || ^=14.0.0 || ^=15.0.0',
+  minVersion: '^=13.0.0 || ^=14.0.0 || ^=15.0.0' || '^=16.0.0',
 } as const
 
 export const WIZARD_DEPENDENCY_SVELTE: Cypress.CypressComponentDependency = {

system-tests/project-fixtures/angular/cypress.config.ts

@@ -11,6 +11,7 @@ export default defineConfig({
         resolve: {
           alias: {
             '@angular/common/http': require.resolve('@angular/common/http'),
+            '@angular/common/testing': require.resolve('@angular/common/testing'),
             '@angular/common': require.resolve('@angular/common'),
             '@angular/core/testing': require.resolve('@angular/core/testing'),
             '@angular/core': require.resolve('@angular/core'),

system-tests/projects/angular-16/package.json

@@ -0,0 +1,39 @@
+{
+  "name": "angular-16",
+  "version": "0.0.0",
+  "private": true,
+  "scripts": {
+    "ng": "ng",
+    "start": "ng serve",
+    "build": "ng build",
+    "watch": "ng build --watch --configuration development",
+    "test": "ng test"
+  },
+  "dependencies": {
+    "@angular/animations": "^16.0.0-next.5",
+    "@angular/common": "^16.0.0-next.5",
+    "@angular/compiler": "^16.0.0-next.5",
+    "@angular/core": "^16.0.0-next.5",
+    "@angular/forms": "^16.0.0-next.5",
+    "@angular/platform-browser": "^16.0.0-next.5",
+    "@angular/platform-browser-dynamic": "^16.0.0-next.5",
+    "@angular/router": "^16.0.0-next.5",
+    "rxjs": "~7.8.0",
+    "tslib": "^2.3.0",
+    "zone.js": "~0.13.0"
+  },
+  "devDependencies": {
+    "@angular-devkit/build-angular": "^16.0.0-next.6",
+    "@angular/cli": "~16.0.0-next.6",
+    "@angular/compiler-cli": "^16.0.0-next.5",
+    "@types/jasmine": "~4.3.0",
+    "jasmine-core": "~4.5.0",
+    "karma": "~6.4.0",
+    "karma-chrome-launcher": "~3.1.0",
+    "karma-coverage": "~2.2.0",
+    "karma-jasmine": "~5.1.0",
+    "karma-jasmine-html-reporter": "~2.0.0",
+    "typescript": "~4.9.4"
+  },
+  "projectFixtureDirectory": "angular"
+}

system-tests/projects/angular-16/src/app/components/signals.component.cy.ts

@@ -0,0 +1,14 @@
+import { SignalsComponent } from './signals.component'
+
+describe('SiganlsComponent', () => {
+  it('can mount a signals component', () => {
+    cy.mount(SignalsComponent)
+  })
+
+  it('can increment the count using a signal', () => {
+    cy.mount(SignalsComponent)
+    cy.get('span').contains(0)
+    cy.get('button').click()
+    cy.get('span').contains(1)
+  })
+})

system-tests/projects/angular-16/src/app/components/signals.component.ts

@@ -0,0 +1,14 @@
+import { Component, signal } from '@angular/core'
+
+@Component({
+  standalone: true,
+  selector: 'app-signals',
+  template: `<span>{{ count() }}</span> <button (click)="increment()">+</button>`,
+})
+export class SignalsComponent {
+  count = signal(0)
+
+  increment (): void {
+    this.count.update((_count: number) => _count + 1)
+  }
+}