Skip to content

Commit

Permalink
fix(@angular-devkit/build-angular): handle HTTP requests to assets du…
Browse files Browse the repository at this point in the history
…ring prerendering

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

Closes #25720

(cherry picked from commit 5b35410)
  • Loading branch information
alan-agius4 committed Oct 25, 2023
1 parent a037d6a commit 192a2ae
Showing 8 changed files with 309 additions and 31 deletions.
Original file line number Diff line number Diff line change
@@ -117,6 +117,7 @@ export async function executePostBundleSteps(
appShellOptions,
prerenderOptions,
outputFiles,
assetFiles,
indexContentOutputNoCssInlining,
sourcemapOptions.scripts,
optimizationOptions.styles.inlineCritical,
Original file line number Diff line number Diff line change
@@ -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);
}
Original file line number Diff line number Diff line change
@@ -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,
Original file line number Diff line number Diff line change
@@ -0,0 +1,121 @@
/**
* @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(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;
}
Original file line number Diff line number Diff line change
@@ -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,
});
Original file line number Diff line number Diff line change
@@ -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,
});
}
Original file line number Diff line number Diff line change
@@ -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);
Loading

0 comments on commit 192a2ae

Please sign in to comment.