refactor(@angular-devkit/build-angular): refactor prerendering code to aid code reusability

This commit refactors the prerending code and makes it more reusable. This is needed to implement SSR support in the dev-server.

Author: alan-agius4

packages/angular_devkit/build_angular/src/builders/application/execute-build.ts

@@ -28,8 +28,8 @@ import {
 } from '../../tools/esbuild/utils';
 import { copyAssets } from '../../utils/copy-assets';
 import { maxWorkers } from '../../utils/environment-options';
+import { prerenderPages } from '../../utils/server-rendering/prerender';
 import { augmentAppWithServiceWorkerEsbuild } from '../../utils/service-worker';
-import { prerenderPages } from '../../utils/ssg/render';
 import { getSupportedBrowsers } from '../../utils/supported-browsers';
 import { NormalizedApplicationBuildOptions } from './options';
 
@@ -181,7 +181,6 @@ export async function executeBuild(
     );
 
     const { output, warnings, errors } = await prerenderPages(
-      workspaceRoot,
       options.tsconfig,
       appShellOptions,
       prerenderOptions,

packages/angular_devkit/build_angular/src/builders/application/tests/options/app-shell_spec.ts

@@ -106,6 +106,7 @@ describeBuilder(buildApplication, APPLICATION_BUILDER_INFO, (harness) => {
       harness.useTarget('build', {
         ...BASE_OPTIONS,
         server: 'src/main.server.ts',
+        polyfills: ['zone.js'],
         appShell: true,
       });
 
@@ -122,6 +123,7 @@ describeBuilder(buildApplication, APPLICATION_BUILDER_INFO, (harness) => {
       harness.useTarget('build', {
         ...BASE_OPTIONS,
         server: 'src/main.server.ts',
+        polyfills: ['zone.js'],
         appShell: true,
         styles: ['src/styles.css'],
         optimization: {
@@ -150,6 +152,7 @@ describeBuilder(buildApplication, APPLICATION_BUILDER_INFO, (harness) => {
       harness.useTarget('build', {
         ...BASE_OPTIONS,
         server: 'src/main.server.ts',
+        polyfills: ['zone.js'],
         appShell: true,
         styles: ['src/styles.css'],
         optimization: {

packages/angular_devkit/build_angular/src/builders/dev-server/builder.ts

@@ -46,6 +46,7 @@ export function execute(
     switchMap(({ builderName, normalizedOptions }) => {
       // Use vite-based development server for esbuild-based builds
       if (
+        builderName === '@angular-devkit/build-angular:application' ||
         builderName === '@angular-devkit/build-angular:browser-esbuild' ||
         normalizedOptions.forceEsbuild
       ) {

packages/angular_devkit/build_angular/src/tools/esbuild/application-code-bundle.ts

@@ -177,6 +177,10 @@ export function createServerCodeBundleOptions(
           importAndExportDec.unshift(`import '@angular/compiler';`);
         }
 
+        if (options.polyfills?.includes('zone.js')) {
+          importAndExportDec.unshift(`import 'zone.js/node';`);
+        }
+
         return {
           contents: importAndExportDec.join('\n'),
           loader: 'js',

packages/angular_devkit/build_angular/src/utils/ssg/esm-in-memory-file-loader.ts renamed to packages/angular_devkit/build_angular/src/utils/server-rendering/esm-in-memory-file-loader.ts

@@ -10,9 +10,10 @@ import { OutputFile } from 'esbuild';
 import { readFile } from 'node:fs/promises';
 import { extname, posix } from 'node:path';
 import Piscina from 'piscina';
-import type { RenderResult, ServerContext, WorkerData } from './render-worker';
+import type { RenderResult, ServerContext } from './render-page';
+import type { WorkerData } from './render-worker';
 
-interface prerenderOptions {
+interface PrerenderOptions {
   routesFile?: string;
   discoverRoutes?: boolean;
   routes?: string[];
@@ -23,10 +24,9 @@ interface AppShellOptions {
 }
 
 export async function prerenderPages(
-  workspaceRoot: string,
   tsConfigPath: string,
   appShellOptions: AppShellOptions = {},
-  prerenderOptions: prerenderOptions = {},
+  prerenderOptions: PrerenderOptions = {},
   outputFiles: Readonly<OutputFile[]>,
   document: string,
   inlineCriticalCss?: boolean,
@@ -52,7 +52,6 @@ export async function prerenderPages(
     filename: require.resolve('./render-worker'),
     maxThreads: Math.min(allRoutes.size, maxThreads),
     workerData: {
-      zonePackage: require.resolve('zone.js', { paths: [workspaceRoot] }),
       outputFiles: outputFilesForWorker,
       inlineCriticalCss,
       document,
@@ -109,7 +108,7 @@ export async function prerenderPages(
 async function getAllRoutes(
   tsConfigPath: string,
   appShellOptions: AppShellOptions,
-  prerenderOptions: prerenderOptions,
+  prerenderOptions: PrerenderOptions,
 ): Promise<Set<string>> {
   const { routesFile, discoverRoutes, routes: existingRoutes } = prerenderOptions;
   const routes = new Set(existingRoutes);

packages/angular_devkit/build_angular/src/utils/ssg/render.ts renamed to packages/angular_devkit/build_angular/src/utils/server-rendering/prerender.ts

@@ -8,15 +8,17 @@
 
 import type { ApplicationRef, StaticProvider, Type } from '@angular/core';
 import type { renderApplication, renderModule, ɵSERVER_CONTEXT } from '@angular/platform-server';
-import assert from 'node:assert';
 import { basename } from 'node:path';
-import { workerData } from 'node:worker_threads';
 import { InlineCriticalCssProcessor } from '../index-file/inline-critical-css';
 import { loadEsmModule } from '../load-esm';
 
 export interface RenderOptions {
   route: string;
   serverContext: ServerContext;
+  outputFiles: Record<string, string>;
+  document: string;
+  inlineCriticalCss?: boolean;
+  loadBundle?: (path: string) => Promise<MainServerBundleExports>;
 }
 
 export interface RenderResult {
@@ -25,47 +27,39 @@ export interface RenderResult {
   content?: string;
 }
 
-export type ServerContext = 'app-shell' | 'ssg';
+export type ServerContext = 'app-shell' | 'ssg' | 'ssr';
 
-export interface WorkerData {
-  zonePackage: string;
-  outputFiles: Record<string, string>;
-  document: string;
-  inlineCriticalCss?: boolean;
-}
-
-interface BundleExports {
+interface MainServerBundleExports {
   /** An internal token that allows providing extra information about the server context. */
-  ɵSERVER_CONTEXT?: typeof ɵSERVER_CONTEXT;
+  ɵSERVER_CONTEXT: typeof ɵSERVER_CONTEXT;
 
   /** Render an NgModule application. */
-  renderModule?: typeof renderModule;
+  renderModule: typeof renderModule;
 
   /** Method to render a standalone application. */
-  renderApplication?: typeof renderApplication;
+  renderApplication: typeof renderApplication;
 
   /** Standalone application bootstrapping function. */
-  default?: (() => Promise<ApplicationRef>) | Type<unknown>;
+  default: (() => Promise<ApplicationRef>) | Type<unknown>;
 }
 
-/**
- * The fully resolved path to the zone.js package that will be loaded during worker initialization.
- * This is passed as workerData when setting up the worker via the `piscina` package.
- */
-const { zonePackage, outputFiles, document, inlineCriticalCss } = workerData as WorkerData;
-
 /**
  * Renders each route in routes and writes them to <outputPath>/<route>/index.html.
  */
-async function render({ route, serverContext }: RenderOptions): Promise<RenderResult> {
+export async function renderPage({
+  route,
+  serverContext,
+  document,
+  inlineCriticalCss,
+  outputFiles,
+  loadBundle = loadEsmModule,
+}: RenderOptions): Promise<RenderResult> {
   const {
     default: bootstrapAppFnOrModule,
     ɵSERVER_CONTEXT,
     renderModule,
     renderApplication,
-  } = await loadEsmModule<BundleExports>('./main.server.mjs');
-
-  assert(ɵSERVER_CONTEXT, `ɵSERVER_CONTEXT was not exported.`);
+  } = await loadBundle('./main.server.mjs');
 
   const platformProviders: StaticProvider[] = [
     {
@@ -77,19 +71,12 @@ async function render({ route, serverContext }: RenderOptions): Promise<RenderRe
   let html: string | undefined;
 
   if (isBootstrapFn(bootstrapAppFnOrModule)) {
-    assert(renderApplication, `renderApplication was not exported.`);
     html = await renderApplication(bootstrapAppFnOrModule, {
       document,
       url: route,
       platformProviders,
     });
   } else {
-    assert(renderModule, `renderModule was not exported.`);
-    assert(
-      bootstrapAppFnOrModule,
-      `Neither an AppServerModule nor a bootstrapping function was exported.`,
-    );
-
     html = await renderModule(bootstrapAppFnOrModule, {
       document,
       url: route,
@@ -99,7 +86,7 @@ async function render({ route, serverContext }: RenderOptions): Promise<RenderRe
 
   if (inlineCriticalCss) {
     const inlineCriticalCssProcessor = new InlineCriticalCssProcessor({
-      minify: false, // CSS has already been minified during the build.
+      minify: false,
       readAsset: async (filePath) => {
         filePath = basename(filePath);
         const content = outputFiles[filePath];
@@ -123,22 +110,3 @@ function isBootstrapFn(value: unknown): value is () => Promise<ApplicationRef> {
   // We can differentiate between a module and a bootstrap function by reading `cmp`:
   return typeof value === 'function' && !('ɵmod' in value);
 }
-
-/**
- * Initializes the worker when it is first created by loading the Zone.js package
- * into the worker instance.
- *
- * @returns A promise resolving to the render function of the worker.
- */
-async function initialize() {
-  // Setup Zone.js
-  await import(zonePackage);
-
-  return render;
-}
-
-/**
- * The default export will be the promise returned by the initialize function.
- * This is awaited by piscina prior to using the Worker.
- */
-export default initialize();

packages/angular_devkit/build_angular/src/utils/ssg/render-worker.ts renamed to packages/angular_devkit/build_angular/src/utils/server-rendering/render-page.ts

@@ -0,0 +1,30 @@
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+import { workerData } from 'node:worker_threads';
+import { RenderResult, ServerContext, renderPage } from './render-page';
+
+export interface WorkerData {
+  outputFiles: Record<string, string>;
+  document: string;
+  inlineCriticalCss?: boolean;
+}
+
+export interface RenderOptions {
+  route: string;
+  serverContext: ServerContext;
+}
+
+/**
+ * This is passed as workerData when setting up the worker via the `piscina` package.
+ */
+const { outputFiles, document, inlineCriticalCss } = workerData as WorkerData;
+
+export default function (options: RenderOptions): Promise<RenderResult> {
+  return renderPage({ ...options, outputFiles, document, inlineCriticalCss });
+}