fix(@angular/build): serialize server manifest asset paths

Serialize the values embedded in the generated server manifests with JSON.stringify, so a prerendered route such as ssg/customer's-choice no longer produces an invalid manifest.

Author: SkyZeroZx

packages/angular/build/BUILD.bazel

@@ -146,6 +146,7 @@ ts_project(
         ":node_modules/@babel/core",
         "//:node_modules/@angular/compiler-cli",
         "//:node_modules/@types/jasmine",
+        "//:node_modules/esbuild",
         "//:node_modules/prettier",
         "//:node_modules/typescript",
         "//packages/angular/build/private",

packages/angular/build/src/utils/server-rendering/manifest.ts

@@ -69,7 +69,7 @@ export function generateAngularServerAppEngineManifest(
     for (const locale of i18nOptions.inlineLocales) {
       const { subPath } = i18nOptions.locales[locale];
       const importPath = `${subPath ? `${subPath}/` : ''}${MAIN_SERVER_OUTPUT_FILENAME}`;
-      entryPoints[subPath] = `() => import('./${importPath}')`;
+      entryPoints[subPath] = `() => import(${JSON.stringify(`./${importPath}`)})`;
       supportedLocales[locale] = subPath;
     }
   } else {
@@ -85,12 +85,12 @@ export function generateAngularServerAppEngineManifest(
 
   const manifestContent = `
 export default {
-  basePath: '${basePath}',
+  basePath: ${JSON.stringify(basePath)},
   allowedHosts: ${JSON.stringify(allowedHosts, undefined, 2)},
   supportedLocales: ${JSON.stringify(supportedLocales, undefined, 2)},
   entryPoints: {
     ${Object.entries(entryPoints)
-      .map(([key, value]) => `'${key}': ${value}`)
+      .map(([key, value]) => `${JSON.stringify(key)}: ${value}`)
       .join(',\n    ')}
   },
 };
@@ -162,8 +162,11 @@ export function generateAngularServerAppManifest(
       // which can result in an incorrect byte length.
       const size = runInThisContext(`new TextEncoder().encode(\`${escapedContent}\`).byteLength`);
 
+      // Asset paths are derived from route paths and can contain arbitrary characters, so they are
+      // serialized rather than interpolated into the generated executable manifest.
       serverAssets[file.path] =
-        `{size: ${size}, hash: '${file.hash}', text: () => import('./${jsChunkFilePath}').then(m => m.default)}`;
+        `{size: ${size}, hash: ${JSON.stringify(file.hash)}, ` +
+        `text: () => import(${JSON.stringify(`./${jsChunkFilePath}`)}).then(m => m.default)}`;
     }
   }
 
@@ -178,13 +181,13 @@ export function generateAngularServerAppManifest(
 export default {
   bootstrap: () => import('./main.server.mjs').then(m => m.default),
   inlineCriticalCss: ${inlineCriticalCss},
-  baseHref: '${baseHref}',
+  baseHref: ${JSON.stringify(baseHref)},
   locale: ${JSON.stringify(locale)},
   routes: ${JSON.stringify(routes, undefined, 2)},
   entryPointToBrowserMapping: ${JSON.stringify(entryPointToBrowserMapping, undefined, 2)},
   assets: {
     ${Object.entries(serverAssets)
-      .map(([key, value]) => `'${key}': ${value}`)
+      .map(([key, value]) => `${JSON.stringify(key)}: ${value}`)
       .join(',\n    ')}
   },
 };

packages/angular/build/src/utils/server-rendering/manifest_spec.ts

@@ -0,0 +1,77 @@
+/**
+ * @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.dev/license
+ */
+
+import type { Metafile } from 'esbuild';
+import { BuildOutputFileType } from '../../tools/esbuild/bundler-context';
+import { createOutputFile } from '../../tools/esbuild/utils';
+import { generateAngularServerAppManifest } from './manifest';
+
+describe('generateAngularServerAppManifest', () => {
+  const dummyMetafile = { inputs: {}, outputs: {} } as unknown as Metafile;
+
+  /**
+   * Evaluates a generated manifest, which both asserts that it is syntactically valid JavaScript and
+   * gives access to the values it declares. The dynamic imports it contains are never invoked.
+   */
+  function evaluateManifest(manifestContent: string): unknown {
+    return new Function(manifestContent.replace('export default', 'return'))();
+  }
+
+  function generateManifest(
+    htmlOutputFiles: Record<string, string>,
+    baseHref = '/',
+  ): ReturnType<typeof generateAngularServerAppManifest> {
+    const additionalHtmlOutputFiles = new Map(
+      Object.entries(htmlOutputFiles).map(([path, content]) => [
+        path,
+        createOutputFile(path, content, BuildOutputFileType.Browser),
+      ]),
+    );
+
+    return generateAngularServerAppManifest(
+      additionalHtmlOutputFiles,
+      [],
+      false,
+      undefined,
+      undefined,
+      baseHref,
+      new Set(),
+      dummyMetafile,
+      undefined,
+    );
+  }
+
+  it('should serialize asset paths which contain JavaScript string delimiters', () => {
+    const assetPath = "catalog/customer's-choice/index.html";
+    const { manifestContent } = generateManifest({
+      [assetPath]: '<main>Featured</main>',
+    });
+
+    expect(evaluateManifest(manifestContent)).toEqual(
+      jasmine.objectContaining({
+        assets: {
+          [assetPath]: jasmine.objectContaining({
+            size: 21,
+            hash: jasmine.any(String),
+            text: jasmine.any(Function),
+          }),
+        },
+      }),
+    );
+  });
+
+  it('should serialize a base href which contains JavaScript string delimiters', () => {
+    const { manifestContent } = generateManifest({ 'index.html': '<main></main>' }, "/o'brien/");
+
+    expect(evaluateManifest(manifestContent)).toEqual(
+      jasmine.objectContaining({
+        baseHref: "/o'brien/",
+      }),
+    );
+  });
+});

tests/e2e/tests/build/server-rendering/server-routes-output-mode-server.ts

@@ -77,7 +77,7 @@ export default async function () {
       path: 'ssg/:id',
       renderMode: RenderMode.Prerender,
       headers: { 'x-custom': 'ssg-with-params' },
-      getPrerenderParams: async() => [{id: 'one'}, {id: 'two'}],
+      getPrerenderParams: async() => [{id: 'one'}, {id: 'two'}, {id: "customer's-choice"}],
     },
     {
       path: 'ssr',
@@ -115,6 +115,7 @@ export default async function () {
     'ssg/index.html': 'ssg works!',
     'ssg/one/index.html': 'ssg-with-params works!',
     'ssg/two/index.html': 'ssg-with-params works!',
+    "ssg/customer's-choice/index.html": 'ssg-with-params works!',
   };
 
   for (const [filePath, fileMatch] of Object.entries(expects)) {