fix(@angular-devkit/build-angular): handle HTTP requests to assets during prerendering

This commit fixes an issue were during prerendering (SSG) http requests to assets causes prerendering to fail.

Closes #25720

Author: alan-agius4

packages/angular_devkit/build_angular/src/builders/application/execute-post-bundle.ts

@@ -117,6 +117,7 @@ export async function executePostBundleSteps(
       appShellOptions,
       prerenderOptions,
       outputFiles,
+      assetFiles,
       indexContentOutputNoCssInlining,
       sourcemapOptions.scripts,
       optimizationOptions.styles.inlineCritical,

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

@@ -51,7 +51,7 @@ async function extract(): Promise<string[]> {
   );
 
   const routes: string[] = [];
-  for await (const { route, success } of extractRoutes(bootstrapAppFnOrModule, document)) {
+  for await (const { route, success } of extractRoutes(bootstrapAppFnOrModule, document, '')) {
     if (success) {
       routes.push(route);
     }

packages/angular_devkit/build_angular/src/utils/routes-extractor/extractor.ts

@@ -78,11 +78,12 @@ async function* getRoutesFromRouterConfig(
 export async function* extractRoutes(
   bootstrapAppFnOrModule: (() => Promise<ApplicationRef>) | Type<unknown>,
   document: string,
+  url: string,
 ): AsyncIterableIterator<RouterResult> {
   const platformRef = createPlatformFactory(platformCore, 'server', [
     {
       provide: INITIAL_CONFIG,
-      useValue: { document, url: '' },
+      useValue: { document, url },
     },
     {
       provide: ɵConsole,

packages/angular_devkit/build_angular/src/utils/server-rendering/prerender-server.ts

@@ -0,0 +1,123 @@
+/**
+ * @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 { lookup as lookupMimeType } from 'mrmime';
+import { readFile } from 'node:fs/promises';
+import { IncomingMessage, RequestListener, ServerResponse, createServer } from 'node:http';
+import { extname, posix } from 'node:path';
+import { BuildOutputAsset } from '../../tools/esbuild/bundler-execution-result';
+
+/**
+ * Start a server that can handle HTTP requests to assets.
+ *
+ * @example
+ * ```ts
+ * httpClient.get('/assets/content.json');
+ * ```
+ * @returns the server address.
+ */
+export async function startServer(assets: Readonly<BuildOutputAsset[]>): Promise<{
+  address: string;
+  close?: () => void;
+}> {
+  if (Object.keys(assets).length === 0) {
+    return {
+      address: '',
+    };
+  }
+
+  const assetsReversed: Record<string, string> = {};
+  for (const { source, destination } of assets) {
+    assetsReversed[addLeadingSlash(destination.replace(/\\/g, posix.sep))] = source;
+  }
+
+  const assetsCache: Map<string, { mimeType: string | void; content: Buffer }> = new Map();
+  const server = createServer();
+  server.on('request', requestHandler(assetsReversed, assetsCache));
+
+  await new Promise<void>((resolve) => {
+    server.listen(0, '127.0.0.1', resolve);
+  });
+
+  const serverAddress = server.address();
+  let address: string;
+  if (!serverAddress) {
+    address = '';
+  } else if (typeof serverAddress === 'string') {
+    address = serverAddress;
+  } else {
+    const { port, address: host } = serverAddress;
+    address = `http://${host}:${port}`;
+  }
+
+  return {
+    address,
+    close: () => {
+      assetsCache.clear();
+      server.unref();
+      server.close();
+    },
+  };
+}
+function requestHandler(
+  assetsReversed: Record<string, string>,
+  assetsCache: Map<string, { mimeType: string | void; content: Buffer }>,
+): RequestListener<typeof IncomingMessage, typeof ServerResponse> {
+  return (req, res) => {
+    if (!req.url) {
+      res.destroy(new Error('Request url was empty.'));
+
+      return;
+    }
+
+    const { pathname } = new URL(req.url, 'resolve://');
+
+    const asset = assetsReversed[pathname];
+    if (!asset) {
+      res.statusCode = 404;
+      res.statusMessage = 'Asset not found.';
+      res.end();
+
+      return;
+    }
+
+    const cachedAsset = assetsCache.get(pathname);
+    if (cachedAsset) {
+      const { content, mimeType } = cachedAsset;
+      if (mimeType) {
+        res.setHeader('Content-Type', mimeType);
+      }
+
+      res.end(content);
+
+      return;
+    }
+
+    readFile(asset)
+      .then((content) => {
+        const extension = extname(pathname);
+        const mimeType = lookupMimeType(extension);
+
+        assetsCache.set(pathname, {
+          mimeType,
+          content,
+        });
+
+        if (mimeType) {
+          res.setHeader('Content-Type', mimeType);
+        }
+
+        res.end(content);
+      })
+      .catch((e) => res.destroy(e));
+  };
+}
+
+function addLeadingSlash(value: string): string {
+  return value.charAt(0) === '/' ? value : '/' + value;
+}

packages/angular_devkit/build_angular/src/utils/server-rendering/prerender.ts

@@ -7,10 +7,12 @@
  */
 
 import { readFile } from 'node:fs/promises';
-import { extname, join, posix } from 'node:path';
+import { extname, posix } from 'node:path';
 import Piscina from 'piscina';
 import { BuildOutputFile, BuildOutputFileType } from '../../tools/esbuild/bundler-context';
+import { BuildOutputAsset } from '../../tools/esbuild/bundler-execution-result';
 import { getESMLoaderArgs } from './esm-in-memory-loader/node-18-utils';
+import { startServer } from './prerender-server';
 import type { RenderResult, ServerContext } from './render-page';
 import type { RenderWorkerData } from './render-worker';
 import type {
@@ -32,6 +34,7 @@ export async function prerenderPages(
   appShellOptions: AppShellOptions = {},
   prerenderOptions: PrerenderOptions = {},
   outputFiles: Readonly<BuildOutputFile[]>,
+  assets: Readonly<BuildOutputAsset[]>,
   document: string,
   sourcemap = false,
   inlineCriticalCss = false,
@@ -43,11 +46,10 @@ export async function prerenderPages(
   errors: string[];
   prerenderedRoutes: Set<string>;
 }> {
-  const output: Record<string, string> = {};
-  const warnings: string[] = [];
-  const errors: string[] = [];
   const outputFilesForWorker: Record<string, string> = {};
   const serverBundlesSourceMaps = new Map<string, string>();
+  const warnings: string[] = [];
+  const errors: string[] = [];
 
   for (const { text, path, type } of outputFiles) {
     const fileExt = extname(path);
@@ -74,28 +76,91 @@ export async function prerenderPages(
   }
   serverBundlesSourceMaps.clear();
 
-  const { routes: allRoutes, warnings: routesWarnings } = await getAllRoutes(
-    workspaceRoot,
-    outputFilesForWorker,
-    document,
-    appShellOptions,
-    prerenderOptions,
-    sourcemap,
-    verbose,
-  );
-
-  if (routesWarnings?.length) {
-    warnings.push(...routesWarnings);
-  }
+  // Start server to handle HTTP requests to assets.
+  // TODO: consider starting this is a seperate process to avoid any blocks to the main thread.
+  const { address: assetsServerAddress, close: closeAssetsServer } = await startServer(assets);
+
+  try {
+    // Get routes to prerender
+    const { routes: allRoutes, warnings: routesWarnings } = await getAllRoutes(
+      workspaceRoot,
+      outputFilesForWorker,
+      document,
+      appShellOptions,
+      prerenderOptions,
+      sourcemap,
+      verbose,
+      assetsServerAddress,
+    );
+
+    if (routesWarnings?.length) {
+      warnings.push(...routesWarnings);
+    }
+
+    if (allRoutes.size < 1) {
+      return {
+        errors,
+        warnings,
+        output: {},
+        prerenderedRoutes: allRoutes,
+      };
+    }
+
+    // Render routes
+    const {
+      warnings: renderingWarnings,
+      errors: renderingErrors,
+      output,
+    } = await renderPages(
+      sourcemap,
+      allRoutes,
+      maxThreads,
+      workspaceRoot,
+      outputFilesForWorker,
+      inlineCriticalCss,
+      document,
+      assetsServerAddress,
+      appShellOptions,
+    );
+
+    errors.push(...renderingErrors);
+    warnings.push(...renderingWarnings);
 
-  if (allRoutes.size < 1) {
     return {
       errors,
       warnings,
       output,
       prerenderedRoutes: allRoutes,
     };
+  } finally {
+    void closeAssetsServer?.();
   }
+}
+
+class RoutesSet extends Set<string> {
+  override add(value: string): this {
+    return super.add(addLeadingSlash(value));
+  }
+}
+
+async function renderPages(
+  sourcemap: boolean,
+  allRoutes: Set<string>,
+  maxThreads: number,
+  workspaceRoot: string,
+  outputFilesForWorker: Record<string, string>,
+  inlineCriticalCss: boolean,
+  document: string,
+  baseUrl: string,
+  appShellOptions: AppShellOptions,
+): Promise<{
+  output: Record<string, string>;
+  warnings: string[];
+  errors: string[];
+}> {
+  const output: Record<string, string> = {};
+  const warnings: string[] = [];
+  const errors: string[] = [];
 
   const workerExecArgv = getESMLoaderArgs();
   if (sourcemap) {
@@ -110,6 +175,7 @@ export async function prerenderPages(
       outputFiles: outputFilesForWorker,
       inlineCriticalCss,
       document,
+      baseUrl,
     } as RenderWorkerData,
     execArgv: workerExecArgv,
   });
@@ -153,16 +219,9 @@ export async function prerenderPages(
     errors,
     warnings,
     output,
-    prerenderedRoutes: allRoutes,
   };
 }
 
-class RoutesSet extends Set<string> {
-  override add(value: string): this {
-    return super.add(addLeadingSlash(value));
-  }
-}
-
 async function getAllRoutes(
   workspaceRoot: string,
   outputFilesForWorker: Record<string, string>,
@@ -171,11 +230,12 @@ async function getAllRoutes(
   prerenderOptions: PrerenderOptions,
   sourcemap: boolean,
   verbose: boolean,
+  assetsServerAddress: string,
 ): Promise<{ routes: Set<string>; warnings?: string[] }> {
   const { routesFile, discoverRoutes } = prerenderOptions;
   const routes = new RoutesSet();
-
   const { route: appShellRoute } = appShellOptions;
+
   if (appShellRoute !== undefined) {
     routes.add(appShellRoute);
   }
@@ -204,6 +264,7 @@ async function getAllRoutes(
       outputFiles: outputFilesForWorker,
       document,
       verbose,
+      url: assetsServerAddress,
     } as RoutesExtractorWorkerData,
     execArgv: workerExecArgv,
   });

packages/angular_devkit/build_angular/src/utils/server-rendering/render-worker.ts

@@ -13,6 +13,7 @@ import { RenderResult, ServerContext, renderPage } from './render-page';
 export interface RenderWorkerData extends ESMInMemoryFileLoaderWorkerData {
   document: string;
   inlineCriticalCss?: boolean;
+  baseUrl: string;
 }
 
 export interface RenderOptions {
@@ -23,8 +24,15 @@ export interface RenderOptions {
 /**
  * This is passed as workerData when setting up the worker via the `piscina` package.
  */
-const { outputFiles, document, inlineCriticalCss } = workerData as RenderWorkerData;
+const { outputFiles, document, inlineCriticalCss, baseUrl } = workerData as RenderWorkerData;
 
+/** Renders an application based on a provided options. */
 export default function (options: RenderOptions): Promise<RenderResult> {
-  return renderPage({ ...options, outputFiles, document, inlineCriticalCss });
+  return renderPage({
+    ...options,
+    route: baseUrl + options.route,
+    outputFiles,
+    document,
+    inlineCriticalCss,
+  });
 }

packages/angular_devkit/build_angular/src/utils/server-rendering/routes-extractor-worker.ts

@@ -14,6 +14,8 @@ import { MainServerBundleExports, RenderUtilsServerBundleExports } from './main-
 export interface RoutesExtractorWorkerData extends ESMInMemoryFileLoaderWorkerData {
   document: string;
   verbose: boolean;
+  url: string;
+  assetsServerAddress: string;
 }
 
 export interface RoutersExtractorWorkerResult {
@@ -24,7 +26,7 @@ export interface RoutersExtractorWorkerResult {
 /**
  * This is passed as workerData when setting up the worker via the `piscina` package.
  */
-const { document, verbose } = workerData as RoutesExtractorWorkerData;
+const { document, verbose, url } = workerData as RoutesExtractorWorkerData;
 
 export default async function (): Promise<RoutersExtractorWorkerResult> {
   const { extractRoutes } = await loadEsmModule<RenderUtilsServerBundleExports>(
@@ -40,6 +42,7 @@ export default async function (): Promise<RoutersExtractorWorkerResult> {
   for await (const { route, success, redirect } of extractRoutes(
     bootstrapAppFnOrModule,
     document,
+    url,
   )) {
     if (success) {
       routes.push(route);