feat(@schematics/angular): Applications are zoneless by default

This change updates applications to omit the ZoneJS dependency by
default. It depends on angular/angular#63382,
which allows us to also exclude the `provideZonelessChangeDetection`
provider.

This change also includes the addition of `provideZoneChangeDetection`
in the `initTestEnvironment` when ZoneJS is detected in the
configuration (either on window or in the polyfills).

Author: atscott

package.json

@@ -46,20 +46,20 @@
   },
   "homepage": "https://github.com/angular/angular-cli",
   "devDependencies": {
-    "@angular/animations": "21.0.0-next.3",
-    "@angular/cdk": "21.0.0-next.3",
-    "@angular/common": "21.0.0-next.3",
-    "@angular/compiler": "21.0.0-next.3",
-    "@angular/compiler-cli": "21.0.0-next.3",
-    "@angular/core": "21.0.0-next.3",
-    "@angular/forms": "21.0.0-next.3",
-    "@angular/localize": "21.0.0-next.3",
-    "@angular/material": "21.0.0-next.3",
+    "@angular/animations": "21.0.0-next.4",
+    "@angular/cdk": "21.0.0-next.4",
+    "@angular/common": "21.0.0-next.4",
+    "@angular/compiler": "21.0.0-next.4",
+    "@angular/compiler-cli": "21.0.0-next.4",
+    "@angular/core": "21.0.0-next.4",
+    "@angular/forms": "21.0.0-next.4",
+    "@angular/localize": "21.0.0-next.4",
+    "@angular/material": "21.0.0-next.4",
     "@angular/ng-dev": "https://github.com/angular/dev-infra-private-ng-dev-builds.git#5c80533a1292f228111945c42a81614a03be6ab3",
-    "@angular/platform-browser": "21.0.0-next.3",
-    "@angular/platform-server": "21.0.0-next.3",
-    "@angular/router": "21.0.0-next.3",
-    "@angular/service-worker": "21.0.0-next.3",
+    "@angular/platform-browser": "21.0.0-next.4",
+    "@angular/platform-server": "21.0.0-next.4",
+    "@angular/router": "21.0.0-next.4",
+    "@angular/service-worker": "21.0.0-next.4",
     "@bazel/bazelisk": "1.26.0",
     "@bazel/buildifier": "8.2.1",
     "@eslint/compat": "1.3.2",

packages/angular/build/src/builders/karma/application_builder.ts

@@ -190,14 +190,18 @@ async function runEsbuild(
   context: BuilderContext,
   projectSourceRoot: string,
 ): Promise<[Result & { kind: ResultKind.Full }, AsyncIterator<Result> | null]> {
+  const usesZoneJS = buildOptions.polyfills?.includes('zone.js');
   const virtualTestBedInit = createVirtualModulePlugin({
     namespace: 'angular:test-bed-init',
     loadContent: async () => {
       const contents: string[] = [
         // Initialize the Angular testing environment
+        `import { NgModule${usesZoneJS ? ', provideZoneChangeDetection' : ''} } from '@angular/core';`,
         `import { getTestBed } from '@angular/core/testing';`,
         `import { BrowserTestingModule, platformBrowserTesting } from '@angular/platform-browser/testing';`,
-        `getTestBed().initTestEnvironment(BrowserTestingModule, platformBrowserTesting(), {`,
+        `@NgModule({ providers: [${usesZoneJS ? 'provideZoneChangeDetection(), ' : ''}], })`,
+        `export class TestModule {}`,
+        `getTestBed().initTestEnvironment([BrowserTestingModule, TestModule], platformBrowserTesting(), {`,
         `  errorOnUnknownElements: true,`,
         `  errorOnUnknownProperties: true,`,
         `});`,

packages/angular/build/src/builders/unit-test/runners/vitest/build-options.ts

@@ -17,7 +17,9 @@ import { RunnerOptions } from '../api';
 function createTestBedInitVirtualFile(
   providersFile: string | undefined,
   projectSourceRoot: string,
+  polyfills: string[] = [],
 ): string {
+  const usesZoneJS = polyfills.includes('zone.js');
   let providersImport = 'const providers = [];';
   if (providersFile) {
     const relativePath = path.relative(projectSourceRoot, providersFile);
@@ -28,15 +30,15 @@ function createTestBedInitVirtualFile(
 
   return `
     // Initialize the Angular testing environment
-    import { NgModule } from '@angular/core';
+    import { NgModule${usesZoneJS ? ', provideZoneChangeDetection' : ''} } from '@angular/core';
     import { getTestBed, ɵgetCleanupHook as getCleanupHook } from '@angular/core/testing';
     import { BrowserTestingModule, platformBrowserTesting } from '@angular/platform-browser/testing';
     ${providersImport}
     // Same as https://github.com/angular/angular/blob/05a03d3f975771bb59c7eefd37c01fa127ee2229/packages/core/testing/srcs/test_hooks.ts#L21-L29
     beforeEach(getCleanupHook(false));
     afterEach(getCleanupHook(true));
     @NgModule({
-      providers,
+      providers: [${usesZoneJS ? 'provideZoneChangeDetection(), ' : ''}...providers],
     })
     export class TestModule {}
     getTestBed().initTestEnvironment([BrowserTestingModule, TestModule], platformBrowserTesting(), {
@@ -113,7 +115,11 @@ export async function getVitestBuildOptions(
 
   buildOptions.polyfills = injectTestingPolyfills(buildOptions.polyfills);
 
-  const testBedInitContents = createTestBedInitVirtualFile(providersFile, projectSourceRoot);
+  const testBedInitContents = createTestBedInitVirtualFile(
+    providersFile,
+    projectSourceRoot,
+    buildOptions.polyfills,
+  );
 
   return {
     buildOptions,

packages/angular_devkit/build_angular/src/builders/jest/init-test-bed.mjs

@@ -9,10 +9,16 @@
 // TODO(dgp1130): These imports likely don't resolve in stricter package environments like `pnpm`, since they are resolved relative to
 // `@angular-devkit/build-angular` rather than the user's workspace. Should look into virtual modules to support those use cases.
 
+import { provideZoneChangeDetection, NgModule } from '@angular/core';
 import { getTestBed } from '@angular/core/testing';
 import { BrowserTestingModule, platformBrowserTesting } from '@angular/platform-browser/testing';
 
-getTestBed().initTestEnvironment(BrowserTestingModule, platformBrowserTesting(), {
+@NgModule({
+  providers: [typeof window.Zone !== 'undefined' ? provideZoneChangeDetection() : []],
+})
+class TestModule {}
+
+getTestBed().initTestEnvironment([BrowserTestingModule, TestModule], platformBrowserTesting(), {
   errorOnUnknownElements: true,
   errorOnUnknownProperties: true,
 });

packages/angular_devkit/build_angular/src/builders/karma/browser_builder.ts

@@ -149,14 +149,18 @@ async function initializeBrowser(
   return [karma, (await webpackConfigurationTransformer?.(config)) ?? config];
 }
 
-function getBuiltInMainFile(): string {
+function getBuiltInMainFile(includeZoneProvider = false): string {
   const content = Buffer.from(
     `
+  import { NgModule${includeZoneProvider ? ', provideZoneChangeDetection' : ''} } from '@angular/core';
   import { getTestBed } from '@angular/core/testing';
   import { BrowserTestingModule, platformBrowserTesting } from '@angular/platform-browser/testing';
 
+  @NgModule({providers: [${includeZoneProvider ? 'provideZoneChangeDetection(), ' : ''}]})
+  export class TestModule {}
+
   // Initialize the Angular testing environment.
-  getTestBed().initTestEnvironment(BrowserTestingModule, platformBrowserTesting(), {
+  getTestBed().initTestEnvironment([BrowserTestingModule, TestModule], platformBrowserTesting(), {
     errorOnUnknownElements: true,
     errorOnUnknownProperties: true
   });

packages/angular_devkit/build_angular/src/builders/web-test-runner/jasmine_runner.js

@@ -6,6 +6,7 @@
  * found in the LICENSE file at https://angular.dev/license
  */
 
+import { NgModule } from '@angular/core';
 import { getTestBed } from '@angular/core/testing';
 import { BrowserTestingModule, platformBrowserTesting } from '@angular/platform-browser/testing';
 import {
@@ -63,8 +64,13 @@ export async function runJasmineTests(jasmineEnv) {
   // eslint-disable-next-line no-undef
   jasmine.DEFAULT_TIMEOUT_INTERVAL = config.defaultTimeoutInterval;
 
+  @NgModule({
+    providers: [typeof window.Zone !== 'undefined' ? provideZoneChangeDetection() : []],
+  })
+  class TestModule {}
+
   // Initialize `TestBed` automatically for users. This assumes we already evaluated `zone.js/testing`.
-  getTestBed().initTestEnvironment(BrowserTestingModule, platformBrowserTesting(), {
+  getTestBed().initTestEnvironment([BrowserTestingModule, TestModule], platformBrowserTesting(), {
     errorOnUnknownElements: true,
     errorOnUnknownProperties: true,
   });

packages/schematics/angular/application/files/module-files/src/app/app-module.ts.template

@@ -1,4 +1,4 @@
-import { NgModule, provideBrowserGlobalErrorListeners<% if(zoneless) { %>, provideZonelessChangeDetection<% } %> } from '@angular/core';
+import { NgModule, provideBrowserGlobalErrorListeners } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
 <% if (routing) { %>
 import { AppRoutingModule } from './app-routing-module';<% } %>
@@ -13,8 +13,7 @@ import { App } from './app';
     AppRoutingModule<% } %>
   ],
   providers: [
-    provideBrowserGlobalErrorListeners()<% if (zoneless) { %>,
-    provideZonelessChangeDetection()<% } %>
+    provideBrowserGlobalErrorListeners()
   ],
   bootstrap: [App]
 })

packages/schematics/angular/application/files/module-files/src/app/app__suffix__.spec.ts.template

@@ -1,5 +1,4 @@
-<% if(zoneless) { %>import { provideZonelessChangeDetection } from '@angular/core';
-<% } %>import { TestBed } from '@angular/core/testing';<% if (routing) { %>
+import { TestBed } from '@angular/core/testing';<% if (routing) { %>
 import { RouterModule } from '@angular/router';<% } %>
 import { App } from './app';
 
@@ -11,8 +10,7 @@ describe('App', () => {
       ],<% } %>
       declarations: [
         App
-      ],<% if(zoneless) { %>
-      providers: [provideZonelessChangeDetection()]<% } %>
+      ],
     }).compileComponents();
   });
 

packages/schematics/angular/application/files/standalone-files/src/app/app.config.ts.template

@@ -1,12 +1,12 @@
-import { ApplicationConfig, provideBrowserGlobalErrorListeners, <% if(!zoneless) { %>provideZoneChangeDetection<% } else { %>provideZonelessChangeDetection<% } %> } from '@angular/core';<% if (routing) { %>
+import { ApplicationConfig, provideBrowserGlobalErrorListeners<% if(!zoneless) { %>, provideZoneChangeDetection<% } %> } from '@angular/core';<% if (routing) { %>
 import { provideRouter } from '@angular/router';
 
 import { routes } from './app.routes';<% } %>
 
 export const appConfig: ApplicationConfig = {
   providers: [
-    provideBrowserGlobalErrorListeners(),
-    <% if(zoneless) { %>provideZonelessChangeDetection()<% } else { %>provideZoneChangeDetection({ eventCoalescing: true })<% } %>,
+    provideBrowserGlobalErrorListeners(),<% if(!zoneless) { %>
+    provideZoneChangeDetection({ eventCoalescing: true }),<% } %>
     <% if (routing) {%>provideRouter(routes)<% } %>
   ]
 };

packages/schematics/angular/application/files/standalone-files/src/app/app__suffix__.spec.ts.template

@@ -1,12 +1,10 @@
-<% if(zoneless) { %>import { provideZonelessChangeDetection } from '@angular/core';
-<% } %>import { TestBed } from '@angular/core/testing';
+import { TestBed } from '@angular/core/testing';
 import { App } from './app';
 
 describe('App', () => {
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [App],<% if(zoneless) { %>
-      providers: [provideZonelessChangeDetection()]<% } %>
+      imports: [App],
     }).compileComponents();
   });