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

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.

For Jest tests, `zone.js/testing` is now only included as a polyfill when `zone.js` is already part of the application's configured polyfills.

Author: alan-agius4

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

@@ -77,13 +77,17 @@ export default createBuilder(
     // Build all the test files.
     const jestGlobal = path.join(__dirname, 'jest-global.mjs');
     const initTestBed = path.join(__dirname, 'init-test-bed.mjs');
+    const polyfills = options.polyfills?.includes('zone.js')
+      ? [...options.polyfills, 'zone.js/testing']
+      : options.polyfills;
+
     const buildResult = await first(
       buildApplicationInternal(
         {
           // Build all the test files and also the `jest-global` and `init-test-bed` scripts.
           entryPoints: new Set([...testFiles, jestGlobal, initTestBed]),
           tsConfig: options.tsConfig,
-          polyfills: options.polyfills ?? ['zone.js', 'zone.js/testing'],
+          polyfills,
           outputPath: testOut,
           aot: options.aot,
           index: false,

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,
     });

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';