feat(angular-rspack): Add "zoneless" option to enable Angular's provideZonelessChangeDetection() usage (#115)

* feat(angular-rspack): add "zoneless" option to disable zone.js initialization within PrerenderPlugin

* test: add e2e fixture for zoneless CSR with CSS spec

* test: add e2e fixture for zoneless CSR (i18n) with CSS spec

* test: add e2e fixture for zoneless SSG with CSS spec

* test: add e2e fixture for zoneless SSR with CSS spec

* fix: update import format

* fix: replace zoneless property, inferring zone.js polyfill presence instead

* fix: update pnpm-lock.yaml

---------

Co-authored-by: Jakub Chlebowicz <contact@jakubchlebowicz.com>

Author: 2 people

packages/angular-rspack/src/lib/models/angular-rspack-plugin-options.ts

@@ -379,4 +379,5 @@ export interface NormalizedAngularRspackPluginOptions
   tsConfig: string;
   vendorChunk: boolean;
   watch: boolean;
+  zoneless: boolean;
 }

packages/angular-rspack/src/lib/models/normalize-options.ts

@@ -216,6 +216,10 @@ export async function normalizeOptions(
         type: budget.type as any,
       }));
 
+  const zoneless = options.polyfills
+    ? !options.polyfills.includes('zone.js')
+    : true;
+
   const stylePreprocessorOptions = options.stylePreprocessorOptions ?? {};
   if (stylePreprocessorOptions.includePaths?.length) {
     stylePreprocessorOptions.includePaths = [
@@ -273,6 +277,7 @@ export async function normalizeOptions(
     vendorChunk: options.vendorChunk ?? false,
     verbose: options.verbose ?? false,
     watch: options.watch ?? false,
+    zoneless,
   };
 }
 

packages/angular-rspack/src/lib/plugins/prerender-plugin.ts

@@ -57,15 +57,11 @@ export class PrerenderPlugin implements RspackPluginInstance {
       this.#_options.index as IndexExpandedDefinition
     );
 
-    const zonePackage = require.resolve('zone.js', {
-      paths: [workspaceRoot],
-    });
-
     const worker = new WorkerPool({
       filename: require.resolve('./tools/render-worker'),
       maxThreads: maxWorkers(),
       workerData: {
-        zonePackage,
+        zonePackage: this.#resolveZonePackage(workspaceRoot),
       },
       recordTiming: false,
     });
@@ -145,15 +141,11 @@ export class PrerenderPlugin implements RspackPluginInstance {
       this.#_options.index as IndexExpandedDefinition
     );
 
-    const zonePackage = require.resolve('zone.js', {
-      paths: [workspaceRoot],
-    });
-
     const worker = new WorkerPool({
       filename: require.resolve('./tools/render-worker'),
       maxThreads: maxWorkers(),
       workerData: {
-        zonePackage,
+        zonePackage: this.#resolveZonePackage(workspaceRoot),
       },
       recordTiming: false,
     });
@@ -270,7 +262,7 @@ export class PrerenderPlugin implements RspackPluginInstance {
           indexFile,
           outputPath,
           serverBundlePath,
-          zonePackage: require.resolve('zone.js', { paths: [workspaceRoot] }),
+          zonePackage: this.#resolveZonePackage(workspaceRoot),
         },
         recordTiming: false,
       });
@@ -303,4 +295,9 @@ export class PrerenderPlugin implements RspackPluginInstance {
 
     return this.#_options.prerender;
   }
+
+  #resolveZonePackage(workspaceRoot: string): string | false {
+    if (this.#_options.zoneless) return false;
+    return require.resolve('zone.js', { paths: [workspaceRoot] });
+  }
 }

packages/angular-rspack/src/lib/plugins/tools/render-worker.ts

@@ -54,7 +54,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 | false;
 };
 
 /**
@@ -182,7 +182,9 @@ function isBootstrapFn(value: unknown): value is () => Promise<ApplicationRef> {
  */
 async function initialize() {
   // Setup Zone.js
-  await import(zonePackage);
+  if (zonePackage) {
+    await import(zonePackage);
+  }
 
   // Return the render function for use
   return render;

packages/angular-rspack/src/lib/plugins/tools/routes-extractor-worker.ts

@@ -14,7 +14,7 @@ import * as path from 'node:path';
 import { workerData } from 'node:worker_threads';
 
 export interface RoutesExtractorWorkerData {
-  zonePackage: string;
+  zonePackage: string | false;
   indexFile: string;
   outputPath: string;
   serverBundlePath: string;
@@ -74,7 +74,9 @@ async function extract(): Promise<string[]> {
  */
 async function initialize() {
   // Setup Zone.js
-  await import(zonePackage);
+  if (zonePackage) {
+    await import(zonePackage);
+  }
 
   return extract;
 }