fix(@angular-devkit/build-angular): make zone.js optional in server and app-shell builders

alan-agius4 · alan-agius4 · commit 7a8c94615164 · 2025-09-24T15:46:09.000+02:00
This commit refactors the server and Jest builders to make `zone.js` an optional dependency, preventing errors in projects that do not include it.

For server builds, `zone.js/node` is now only imported if `zone.js` is detected in the project's dependencies.
diff --git a/packages/angular_devkit/build_angular/src/builders/app-shell/index.ts b/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) {
diff --git a/packages/angular_devkit/build_angular/src/builders/app-shell/render-worker.ts b/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;
diff --git a/packages/angular_devkit/build_angular/src/builders/jest/index.ts b/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.
diff --git a/packages/angular_devkit/build_angular/src/builders/jest/init-test-bed.mjs b/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';
 
diff --git a/packages/angular_devkit/build_angular/src/builders/prerender/index.ts b/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,
     });
diff --git a/packages/angular_devkit/build_angular/src/builders/prerender/render-worker.ts b/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;
diff --git a/packages/angular_devkit/build_angular/src/builders/prerender/routes-extractor-worker.ts b/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;
 }
diff --git a/packages/angular_devkit/build_angular/src/builders/server/index.ts b/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'),
+          },
         },
-      }
-    : {};
+      ],
+    },
+  };
 }
diff --git a/packages/angular_devkit/build_angular/src/builders/server/platform-server-exports-loader.ts b/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;
diff --git a/packages/angular_devkit/build_angular/src/builders/ssr-dev-server/specs/proxy_spec.ts b/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';
diff --git a/packages/angular_devkit/build_angular/src/builders/ssr-dev-server/specs/ssl_spec.ts b/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';
diff --git a/packages/angular_devkit/build_angular/src/builders/ssr-dev-server/specs/works_spec.ts b/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';
diff --git a/packages/schematics/angular/application/index_spec.ts b/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' }]);
 
diff --git a/packages/schematics/angular/ssr/files/server-builder/server.ts.template b/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';
diff --git a/tests/legacy-cli/e2e/utils/jest.ts b/tests/legacy-cli/e2e/utils/jest.ts
@@ -4,6 +4,7 @@ import { updateJsonFile } from './project';
 /** Updates the `test` builder in the current workspace to use Jest with the given options. */
 export async function applyJestBuilder(
   options: {} = {
+    polyfills: [],
     tsConfig: 'tsconfig.spec.json',
   },
 ): Promise<void> {
