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

Author: atscott

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

@@ -436,14 +436,18 @@ async function initializeApplication(
     externalDependencies: options.externalDependencies,
   };
 
+  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

@@ -13,11 +13,14 @@ import { OutputHashing } from '../../../application/schema';
 import { NormalizedUnitTestBuilderOptions, injectTestingPolyfills } from '../../options';
 import { findTests, getTestEntrypoints } from '../../test-discovery';
 import { RunnerOptions } from '../api';
+import { u } from 'tar';
 
 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 +31,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 +116,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,
   });

tests/legacy-cli/e2e/tests/build/app-shell/app-shell-ngmodule.ts

@@ -7,7 +7,15 @@ import { updateJsonFile } from '../../../utils/project';
 const snapshots = require('../../../ng-snapshot/package.json');
 
 export default async function () {
-  await ng('generate', 'app', 'test-project-two', '--routing', '--no-standalone', '--skip-install');
+  await ng(
+    'generate',
+    'app',
+    'test-project-two',
+    '--routing',
+    '--no-standalone',
+    '--skip-install',
+    '--no-zoneless',
+  );
   await ng('generate', 'app-shell', '--project', 'test-project-two');
 
   const isSnapshotBuild = getGlobalVariable('argv')['ng-snapshots'];

tests/legacy-cli/e2e/tests/build/jit-ngmodule.ts

@@ -3,8 +3,15 @@ import { ng } from '../../utils/process';
 import { updateJsonFile, useCIChrome, useCIDefaults } from '../../utils/project';
 
 export default async function () {
-  await ng('generate', 'app', 'test-project-two', '--no-standalone', '--skip-install');
-  await ng('generate', 'private-e2e', '--related-app-name=test-project-two');
+  await ng(
+    'generate',
+    'app',
+    'test-project-two',
+    '--no-standalone',
+    '--skip-install',
+    '--no-zoneless',
+  );
+  await ng('generate', 'private-e2e', '--related-app-name=test-project-two', '--no-zoneless');
 
   // Setup testing to use CI Chrome.
   await useCIChrome('test-project-two', './projects/test-project-two/e2e');

tests/legacy-cli/e2e/tests/build/server-rendering/express-engine-ngmodule.ts

@@ -15,7 +15,14 @@ export default async function () {
   // forcibly remove in case another test doesn't clean itself up
   await rimraf('node_modules/@angular/ssr');
 
-  await ng('generate', 'app', 'test-project-two', '--no-standalone', '--skip-install');
+  await ng(
+    'generate',
+    'app',
+    'test-project-two',
+    '--no-standalone',
+    '--skip-install',
+    '--no-zoneless',
+  );
   await ng('generate', 'private-e2e', '--related-app-name=test-project-two');
 
   // Setup testing to use CI Chrome.

tests/legacy-cli/e2e/tests/commands/builder-project-by-cwd.ts

@@ -3,8 +3,8 @@ import { expectFileToExist } from '../../utils/fs';
 import { ng } from '../../utils/process';
 
 export default async function () {
-  await ng('generate', 'app', 'second-app', '--skip-install');
-  await ng('generate', 'app', 'third-app', '--skip-install');
+  await ng('generate', 'app', 'second-app', '--skip-install', '--no-zoneless');
+  await ng('generate', 'app', 'third-app', '--skip-install', '--no-zoneless');
   const startCwd = process.cwd();
 
   try {

tests/legacy-cli/e2e/tests/commands/project-cannot-be-determined-by-cwd.ts

@@ -14,8 +14,8 @@ export default async function () {
     delete workspaceJson.projects['test-project'];
   });
 
-  await ng('generate', 'app', 'second-app', '--skip-install');
-  await ng('generate', 'app', 'third-app', '--skip-install');
+  await ng('generate', 'app', 'second-app', '--skip-install', '--no-zoneless');
+  await ng('generate', 'app', 'third-app', '--skip-install', '--no-zoneless');
 
   const startCwd = process.cwd();