test: change E2E to zoneless

packages/angular_devkit/build_angular/src/builders/app-shell/index.ts

@@ -43,7 +43,11 @@ async function _renderUniversal(
 
   // Locate zone.js to load in the render worker
   const root = context.workspaceRoot;
-  const zonePackage = require.resolve('zone.js', { paths: [root] });
+  let zonePackage: string | undefined;
+
+  try {
+    zonePackage = require.resolve('zone.js', { paths: [root] });
+  } catch {}
 
   const projectName = context.target && context.target.project;
   if (!projectName) {

packages/angular_devkit/build_angular/src/builders/app-shell/render-worker.ts

@@ -17,7 +17,7 @@ import { workerData } from 'node:worker_threads';
  * This is passed as workerData when setting up the worker via the `piscina` package.
  */
 const { zonePackage } = workerData as {
-  zonePackage: string;
+  zonePackage: string | undefined;
 };
 
 interface ServerBundleExports {
@@ -136,8 +136,9 @@ function isBootstrapFn(
  * @returns A promise resolving to the render function of the worker.
  */
 async function initialize() {
-  // Setup Zone.js
-  await import(zonePackage);
+  if (zonePackage) {
+    await import(zonePackage);
+  }
 
   // Return the render function for use
   return render;

packages/angular_devkit/build_angular/src/builders/jest/index.ts

@@ -133,7 +133,7 @@ export default createBuilder(
       // the environment for fake async to work correctly.
       // Third, we initialize `TestBed`. This is dependent on fake async being set up correctly beforehand.
       `--setupFilesAfterEnv="<rootDir>/jest-global.mjs"`,
-      ...(options.polyfills ? [`--setupFilesAfterEnv="<rootDir>/polyfills.mjs"`] : []),
+      ...(options.polyfills?.length ? [`--setupFilesAfterEnv="<rootDir>/polyfills.mjs"`] : []),
       `--setupFilesAfterEnv="<rootDir>/init-test-bed.mjs"`,
 
       // Don't run any infrastructure files as tests, they are manually loaded where needed.

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

@@ -9,7 +9,7 @@
 // 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 { NgModule, provideZoneChangeDetection } from '@angular/core';
 import { getTestBed } from '@angular/core/testing';
 import { BrowserTestingModule, platformBrowserTesting } from '@angular/platform-browser/testing';
 

packages/angular_devkit/build_angular/src/builders/prerender/index.ts

@@ -57,6 +57,11 @@ async function getRoutes(
     }
   }
 
+  let zonePackage: string | undefined;
+  try {
+    zonePackage = require.resolve('zone.js/node', { paths: [workspaceRoot] });
+  } catch {}
+
   if (discoverRoutes) {
     const renderWorker = new Piscina({
       filename: require.resolve('./routes-extractor-worker'),
@@ -65,7 +70,7 @@ async function getRoutes(
         indexFile,
         outputPath,
         serverBundlePath,
-        zonePackage: require.resolve('zone.js', { paths: [workspaceRoot] }),
+        zonePackage,
       } as RoutesExtractorWorkerData,
       recordTiming: false,
     });
@@ -168,7 +173,10 @@ async function _renderUniversal(
     browserOptions.optimization,
   );
 
-  const zonePackage = require.resolve('zone.js', { paths: [context.workspaceRoot] });
+  let zonePackage: string | undefined;
+  try {
+    zonePackage = require.resolve('zone.js/node', { paths: [context.workspaceRoot] });
+  } catch {}
 
   const { baseOutputPath = '' } = serverResult;
   const worker = new Piscina({

packages/angular_devkit/build_angular/src/builders/prerender/render-worker.ts

@@ -51,7 +51,7 @@ interface ServerBundleExports {
  * This is passed as workerData when setting up the worker via the `piscina` package.
  */
 const { zonePackage } = workerData as {
-  zonePackage: string;
+  zonePackage: string | undefined;
 };
 
 /**
@@ -163,8 +163,10 @@ function isBootstrapFn(
  * @returns A promise resolving to the render function of the worker.
  */
 async function initialize() {
-  // Setup Zone.js
-  await import(zonePackage);
+  if (zonePackage) {
+    // Setup Zone.js
+    await import(zonePackage);
+  }
 
   // Return the render function for use
   return render;

packages/angular_devkit/build_angular/src/builders/prerender/routes-extractor-worker.ts

@@ -15,7 +15,7 @@ import * as path from 'node:path';
 import { workerData } from 'node:worker_threads';
 
 export interface RoutesExtractorWorkerData {
-  zonePackage: string;
+  zonePackage: string | undefined;
   indexFile: string;
   outputPath: string;
   serverBundlePath: string;
@@ -74,8 +74,10 @@ async function extract(): Promise<string[]> {
  * @returns A promise resolving to the extract function of the worker.
  */
 async function initialize() {
-  // Setup Zone.js
-  await import(zonePackage);
+  if (zonePackage) {
+    // Setup Zone.js
+    await import(zonePackage);
+  }
 
   return extract;
 }

packages/angular_devkit/build_angular/src/builders/server/index.ts

@@ -198,7 +198,6 @@ async function initialize(
   const originalOutputPath = options.outputPath;
   // Assets are processed directly by the builder except when watching
   const adjustedOptions = options.watch ? options : { ...options, assets: [] };
-
   const { config, projectRoot, projectSourceRoot, i18n } =
     await generateI18nBrowserWebpackConfigFromContext(
       {
@@ -271,23 +270,18 @@ function getPlatformServerExportsConfig(wco: BrowserWebpackConfigOptions): Parti
   // Add `@angular/platform-server` exports.
   // This is needed so that DI tokens can be referenced and set at runtime outside of the bundle.
 
-  // Only add `@angular/platform-server` exports when it is installed.
-  // In some cases this builder is used when `@angular/platform-server` is not installed.
-  // Example: when using `@nguniversal/common/clover` which does not need `@angular/platform-server`.
-
-  return isPackageInstalled(wco.root, '@angular/platform-server')
-    ? {
-        module: {
-          rules: [
-            {
-              loader: require.resolve('./platform-server-exports-loader'),
-              include: [path.resolve(wco.root, wco.buildOptions.main)],
-              options: {
-                angularSSRInstalled: isPackageInstalled(wco.root, '@angular/ssr'),
-              },
-            },
-          ],
+  return {
+    module: {
+      rules: [
+        {
+          loader: require.resolve('./platform-server-exports-loader'),
+          include: [path.resolve(wco.root, wco.buildOptions.main)],
+          options: {
+            angularSSRInstalled: isPackageInstalled(wco.root, '@angular/ssr'),
+            isZoneJsInstalled: isPackageInstalled(wco.root, 'zone.js'),
+          },
         },
-      }
-    : {};
+      ],
+    },
+  };
 }

packages/angular_devkit/build_angular/src/builders/server/platform-server-exports-loader.ts

@@ -12,11 +12,14 @@
  * @see https://github.com/webpack/webpack/issues/15936.
  */
 export default function (
-  this: import('webpack').LoaderContext<{ angularSSRInstalled: boolean }>,
+  this: import('webpack').LoaderContext<{
+    angularSSRInstalled: boolean;
+    isZoneJsInstalled: boolean;
+  }>,
   content: string,
   map: Parameters<import('webpack').LoaderDefinitionFunction>[1],
 ) {
-  const { angularSSRInstalled } = this.getOptions();
+  const { angularSSRInstalled, isZoneJsInstalled } = this.getOptions();
 
   let source = `${content}
 
@@ -30,6 +33,11 @@ export default function (
     `;
   }
 
+  if (isZoneJsInstalled) {
+    source = `import 'zone.js/node';
+    ${source}`;
+  }
+
   this.callback(null, source, map);
 
   return;

packages/angular_devkit/build_angular/src/builders/ssr-dev-server/specs/proxy_spec.ts

@@ -32,8 +32,6 @@ describe('Serve SSR Builder', () => {
 
     host.writeMultipleFiles({
       'src/main.server.ts': `
-        import 'zone.js/node';
-
         import { CommonEngine } from '@angular/ssr/node';
         import * as express from 'express';
         import { resolve, join } from 'node:path';

packages/angular_devkit/build_angular/src/builders/ssr-dev-server/specs/ssl_spec.ts

@@ -32,8 +32,6 @@ describe('Serve SSR Builder', () => {
 
     host.writeMultipleFiles({
       'src/main.server.ts': `
-        import 'zone.js/node';
-
         import { CommonEngine } from '@angular/ssr/node';
         import * as express from 'express';
         import { resolve, join } from 'node:path';

packages/angular_devkit/build_angular/src/builders/ssr-dev-server/specs/works_spec.ts

@@ -31,8 +31,6 @@ describe('Serve SSR Builder', () => {
 
     host.writeMultipleFiles({
       'src/main.server.ts': `
-      import 'zone.js/node';
-
       import { CommonEngine } from '@angular/ssr/node';
       import * as express from 'express';
       import { resolve, join } from 'node:path';

packages/schematics/angular/application/index_spec.ts

@@ -389,7 +389,7 @@ describe('Application Schematic', () => {
       expect(buildOpt.index).toBeUndefined();
       expect(buildOpt.browser).toEqual('src/main.ts');
       expect(buildOpt.assets).toEqual([{ 'glob': '**/*', 'input': 'public' }]);
-      expect(buildOpt.polyfills).toEqual(undefined);
+      expect(buildOpt.polyfills).toBeUndefined();
       expect(buildOpt.tsConfig).toEqual('tsconfig.app.json');
 
       const testOpt = prj.architect.test.options;
@@ -478,7 +478,7 @@ describe('Application Schematic', () => {
       expect(project.root).toEqual('foo');
       const buildOpt = project.architect.build.options;
       expect(buildOpt.browser).toEqual('foo/src/main.ts');
-      expect(buildOpt.polyfills).toEqual(undefined);
+      expect(buildOpt.polyfills).toBeUndefined();
       expect(buildOpt.tsConfig).toEqual('foo/tsconfig.app.json');
       expect(buildOpt.assets).toEqual([{ 'glob': '**/*', 'input': 'foo/public' }]);
 

packages/schematics/angular/ssr/files/server-builder/server.ts.template

@@ -1,5 +1,3 @@
-import 'zone.js/node';
-
 import { APP_BASE_HREF } from '@angular/common';
 import { CommonEngine } from '@angular/ssr/node';
 import express from 'express';

tests/legacy-cli/e2e/initialize/500-create-project.ts

@@ -20,7 +20,7 @@ export default async function () {
     // Ensure local test registry is used when outside a project
     await setNPMConfigRegistry(true);
 
-    await ng('new', 'test-project', '--skip-install', '--no-zoneless');
+    await ng('new', 'test-project', '--skip-install');
     await expectFileToExist(join(process.cwd(), 'test-project'));
     process.chdir('./test-project');
 

tests/legacy-cli/e2e/tests/basic/scripts-array.ts

@@ -58,7 +58,6 @@ export default async function () {
     await expectFileToMatch(
       'dist/test-project/browser/index.html',
       [
-        '<script src="polyfills.js" type="module"></script>',
         '<script src="scripts.js" defer></script>',
         '<script src="renamed-script.js" defer></script>',
         '<script src="main.js" type="module"></script>',
@@ -69,7 +68,6 @@ export default async function () {
       'dist/test-project/browser/index.html',
       [
         '<script src="runtime.js" type="module"></script>',
-        '<script src="polyfills.js" type="module"></script>',
         '<script src="scripts.js" defer></script>',
         '<script src="renamed-script.js" defer></script>',
         '<script src="vendor.js" type="module"></script>',

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

@@ -7,15 +7,7 @@ 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',
-    '--no-zoneless',
-  );
+  await ng('generate', 'app', 'test-project-two', '--routing', '--no-standalone', '--skip-install');
   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,14 +3,7 @@ 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',
-    '--no-zoneless',
-  );
+  await ng('generate', 'app', 'test-project-two', '--no-standalone', '--skip-install');
   await ng('generate', 'private-e2e', '--related-app-name=test-project-two');
 
   // Setup testing to use CI Chrome.

tests/legacy-cli/e2e/tests/build/prerender/http-requests-assets.ts

@@ -1,7 +1,7 @@
 import { ng } from '../../../utils/process';
 import { getGlobalVariable } from '../../../utils/env';
-import { expectFileToMatch, rimraf, writeMultipleFiles } from '../../../utils/fs';
-import { installWorkspacePackages } from '../../../utils/packages';
+import { expectFileToMatch, writeMultipleFiles } from '../../../utils/fs';
+import { installWorkspacePackages, uninstallPackage } from '../../../utils/packages';
 import { useSha } from '../../../utils/project';
 
 export default async function () {
@@ -11,16 +11,15 @@ export default async function () {
     return;
   }
 
-  // Forcibly remove in case another test doesn't clean itself up.
-  await rimraf('node_modules/@angular/ssr');
-  await ng('add', '@angular/ssr', '--skip-confirmation');
+  await uninstallPackage('@angular/ssr');
+  await ng('add', '@angular/ssr', '--skip-confirmation', '--skip-install');
   await useSha();
   await installWorkspacePackages();
 
   await writeMultipleFiles({
     // Add http client and route
     'src/app/app.config.ts': `
-      import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';
+      import { ApplicationConfig } from '@angular/core';
       import { provideRouter } from '@angular/router';
 
       import {Home} from './home/home';
@@ -35,7 +34,6 @@ export default async function () {
           }]),
           provideClientHydration(),
           provideHttpClient(withFetch()),
-          provideZoneChangeDetection({ eventCoalescing: true }),
         ],
       };
     `,
@@ -46,7 +44,7 @@ export default async function () {
 
     // Update component to do an HTTP call to asset.
     'src/app/app.ts': `
-    import { Component, inject } from '@angular/core';
+    import { ChangeDetectorRef, Component, inject } from '@angular/core';
     import { CommonModule } from '@angular/common';
     import { RouterOutlet } from '@angular/router';
     import { HttpClient } from '@angular/common/http';
@@ -64,15 +62,18 @@ export default async function () {
     export class App {
       data: any;
       dataWithSpace: any;
+      private readonly cdr: ChangeDetectorRef = inject(ChangeDetectorRef);
 
       constructor() {
         const http = inject(HttpClient);
         http.get('/media.json').subscribe((d) => {
           this.data = d;
+          this.cdr.markForCheck();
         });
 
         http.get('/media%20with-space.json').subscribe((d) => {
           this.dataWithSpace = d;
+          this.cdr.markForCheck();
         });
       }
     }

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

@@ -15,14 +15,7 @@ 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',
-    '--no-zoneless',
-  );
+  await ng('generate', 'app', 'test-project-two', '--no-standalone', '--skip-install');
   await ng('generate', 'private-e2e', '--related-app-name=test-project-two');
 
   // Setup testing to use CI Chrome.