@angular/build 19.0.0-next.8 → 19.0.0-next.9

package/LICENSE

@@ -1,6 +1,6 @@
 The MIT License
 
-Copyright (c) 2017 Google, Inc.
+Copyright (c) 2010-2024 Google LLC. https://angular.dev/license
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal
@@ -9,13 +9,13 @@ to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 copies of the Software, and to permit persons to whom the Software is
 furnished to do so, subject to the following conditions:
 
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
 
 THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
 IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
 FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@angular/build",
-  "version": "19.0.0-next.8",
+  "version": "19.0.0-next.9",
   "description": "Official build system for Angular",
   "keywords": [
     "Angular CLI",
@@ -23,7 +23,7 @@
   "builders": "builders.json",
   "dependencies": {
     "@ampproject/remapping": "2.3.0",
-    "@angular-devkit/architect": "0.1900.0-next.8",
+    "@angular-devkit/architect": "0.1900.0-next.9",
     "@babel/core": "7.25.2",
     "@babel/helper-annotate-as-pure": "7.24.7",
     "@babel/helper-split-export-declaration": "7.24.7",
@@ -35,6 +35,7 @@
     "esbuild": "0.24.0",
     "fast-glob": "3.3.2",
     "https-proxy-agent": "7.0.5",
+    "istanbul-lib-instrument": "6.0.3",
     "listr2": "8.2.4",
     "lmdb": "3.1.3",
     "magic-string": "0.30.11",
@@ -42,8 +43,8 @@
     "parse5-html-rewriting-stream": "7.0.0",
     "picomatch": "4.0.2",
     "piscina": "4.7.0",
-    "rollup": "4.22.4",
-    "sass": "1.79.3",
+    "rollup": "4.22.5",
+    "sass": "1.79.4",
     "semver": "7.6.3",
     "vite": "5.4.8",
     "watchpack": "2.4.2"
@@ -54,7 +55,7 @@
     "@angular/localize": "^19.0.0-next.0",
     "@angular/platform-server": "^19.0.0-next.0",
     "@angular/service-worker": "^19.0.0-next.0",
-    "@angular/ssr": "^19.0.0-next.8",
+    "@angular/ssr": "^19.0.0-next.9",
     "less": "^4.2.0",
     "postcss": "^8.4.0",
     "tailwindcss": "^2.0.0 || ^3.0.0",

package/src/builders/application/options.d.ts

@@ -66,6 +66,12 @@ interface InternalOptions {
      * styles.
      */
     externalRuntimeStyles?: boolean;
+    /**
+     * Enables instrumentation to collect code coverage data for specific files.
+     *
+     * Used exclusively for tests and shouldn't be used for other kinds of builds.
+     */
+    instrumentForCoverage?: (filename: string) => boolean;
 }
 /** Full set of options for `application` builder. */
 export type ApplicationBuilderInternalOptions = Omit<ApplicationBuilderOptions & InternalOptions, 'browser'> & {
@@ -174,6 +180,7 @@ export declare function normalizeOptions(context: BuilderContext, projectName: s
     } | undefined;
     partialSSRBuild: boolean;
     externalRuntimeStyles: boolean | undefined;
+    instrumentForCoverage: ((filename: string) => boolean) | undefined;
 }>;
 export declare function getLocaleBaseHref(baseHref: string | undefined, i18n: NormalizedApplicationBuildOptions['i18nOptions'], locale: string): string | undefined;
 export {};

package/src/builders/application/options.js

@@ -231,7 +231,7 @@ async function normalizeOptions(context, projectName, options, extensions) {
         }
     }
     // Initial options to keep
-    const { allowedCommonJsDependencies, aot, baseHref, crossOrigin, externalDependencies, extractLicenses, inlineStyleLanguage = 'css', outExtension, serviceWorker, poll, polyfills, statsJson, outputMode, stylePreprocessorOptions, subresourceIntegrity, verbose, watch, progress = true, externalPackages, namedChunks, budgets, deployUrl, clearScreen, define, partialSSRBuild = false, externalRuntimeStyles, } = options;
+    const { allowedCommonJsDependencies, aot, baseHref, crossOrigin, externalDependencies, extractLicenses, inlineStyleLanguage = 'css', outExtension, serviceWorker, poll, polyfills, statsJson, outputMode, stylePreprocessorOptions, subresourceIntegrity, verbose, watch, progress = true, externalPackages, namedChunks, budgets, deployUrl, clearScreen, define, partialSSRBuild = false, externalRuntimeStyles, instrumentForCoverage, } = options;
     // Return all the normalized options
     return {
         advancedOptimizations: !!aot && optimizationOptions.scripts,
@@ -289,6 +289,7 @@ async function normalizeOptions(context, projectName, options, extensions) {
         define,
         partialSSRBuild: environment_options_1.usePartialSsrBuild || partialSSRBuild,
         externalRuntimeStyles,
+        instrumentForCoverage,
     };
 }
 async function getTailwindConfig(searchDirectories, workspaceRoot, context) {

package/src/builders/dev-server/vite-server.js

@@ -69,6 +69,7 @@ async function* serveWithVite(serverOptions, builderName, builderAction, context
         // Disable prerendering if enabled and force SSR.
         // This is so instead of prerendering all the routes for every change, the page is "prerendered" when it is requested.
         browserOptions.prerender = false;
+        browserOptions.ssr ||= true;
     }
     // Set all packages as external to support Vite's prebundle caching
     browserOptions.externalPackages = serverOptions.prebundle;
@@ -128,7 +129,7 @@ async function* serveWithVite(serverOptions, builderName, builderAction, context
             case results_1.ResultKind.Failure:
                 if (result.errors.length && server) {
                     hadError = true;
-                    server.hot.send({
+                    server.ws.send({
                         type: 'error',
                         err: {
                             message: result.errors[0].text,
@@ -175,7 +176,7 @@ async function* serveWithVite(serverOptions, builderName, builderAction, context
         if (hadError && server) {
             hadError = false;
             // Send an empty update to clear the error overlay
-            server.hot.send({
+            server.ws.send({
                 'type': 'update',
                 updates: [],
             });
@@ -268,7 +269,7 @@ async function* serveWithVite(serverOptions, builderName, builderAction, context
                         key: 'r',
                         description: 'force reload browser',
                         action(server) {
-                            server.hot.send({
+                            server.ws.send({
                                 type: 'full-reload',
                                 path: '*',
                             });
@@ -311,7 +312,7 @@ async function handleUpdate(normalizePath, generatedFiles, server, serverOptions
     if (serverOptions.liveReload || serverOptions.hmr) {
         if (updatedFiles.every((f) => f.endsWith('.css'))) {
             const timestamp = Date.now();
-            server.hot.send({
+            server.ws.send({
                 type: 'update',
                 updates: updatedFiles.flatMap((filePath) => {
                     // For component styles, an HMR update must be sent for each one with the corresponding
@@ -342,7 +343,7 @@ async function handleUpdate(normalizePath, generatedFiles, server, serverOptions
     }
     // Send reload command to clients
     if (serverOptions.liveReload) {
-        server.hot.send({
+        server.ws.send({
             type: 'full-reload',
             path: '*',
         });
@@ -408,7 +409,7 @@ async function setupServer(serverOptions, outputFiles, assets, preserveSymlinks,
     const { normalizePath } = await (0, load_esm_1.loadEsmModule)('vite');
     // Path will not exist on disk and only used to provide separate path for Vite requests
     const virtualProjectRoot = normalizePath((0, node_path_1.join)(serverOptions.workspaceRoot, `.angular/vite-root`, serverOptions.buildTarget.project));
-    const cacheDir = (0, node_path_1.join)(serverOptions.cacheOptions.path, 'vite');
+    const cacheDir = (0, node_path_1.join)(serverOptions.cacheOptions.path, serverOptions.buildTarget.project, 'vite');
     const configuration = {
         configFile: false,
         envFile: false,

package/src/tools/babel/plugins/add-code-coverage.d.ts

@@ -0,0 +1,14 @@
+/**
+ * @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 { PluginObj } from '@babel/core';
+/**
+ * A babel plugin factory function for adding istanbul instrumentation.
+ *
+ * @returns A babel plugin object instance.
+ */
+export default function (): PluginObj;

package/src/tools/babel/plugins/add-code-coverage.js

@@ -0,0 +1,44 @@
+"use strict";
+/**
+ * @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
+ */
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = default_1;
+const core_1 = require("@babel/core");
+const istanbul_lib_instrument_1 = require("istanbul-lib-instrument");
+const node_assert_1 = __importDefault(require("node:assert"));
+/**
+ * A babel plugin factory function for adding istanbul instrumentation.
+ *
+ * @returns A babel plugin object instance.
+ */
+function default_1() {
+    const visitors = new WeakMap();
+    return {
+        visitor: {
+            Program: {
+                enter(path, state) {
+                    const visitor = (0, istanbul_lib_instrument_1.programVisitor)(core_1.types, state.filename, {
+                        // Babel returns a Converter object from the `convert-source-map` package
+                        inputSourceMap: state.file.inputMap?.toObject(),
+                    });
+                    visitors.set(path, visitor);
+                    visitor.enter(path);
+                },
+                exit(path) {
+                    const visitor = visitors.get(path);
+                    (0, node_assert_1.default)(visitor, 'Instrumentation visitor should always be present for program path.');
+                    visitor.exit(path);
+                    visitors.delete(path);
+                },
+            },
+        },
+    };
+}

package/src/tools/babel/plugins/types.d.ts

@@ -0,0 +1,20 @@
+/**
+ * @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
+ */
+
+declare module 'istanbul-lib-instrument' {
+  export interface Visitor {
+    enter(path: import('@babel/core').NodePath<types.Program>): void;
+    exit(path: import('@babel/core').NodePath<types.Program>): void;
+  }
+
+  export function programVisitor(
+    types: typeof import('@babel/core').types,
+    filePath?: string,
+    options?: { inputSourceMap?: object | null },
+  ): Visitor;
+}

package/src/tools/esbuild/angular/compiler-plugin.d.ts

@@ -22,6 +22,7 @@ export interface CompilerPluginOptions {
     loadResultCache?: LoadResultCache;
     incremental: boolean;
     externalRuntimeStyles?: boolean;
+    instrumentForCoverage?: (request: string) => boolean;
 }
 export declare function createCompilerPlugin(pluginOptions: CompilerPluginOptions, styleOptions: BundleStylesheetOptions & {
     inlineStyleLanguage: string;

package/src/tools/esbuild/angular/compiler-plugin.js

@@ -339,7 +339,8 @@ function createCompilerPlugin(pluginOptions, styleOptions) {
                     // A string indicates untransformed output from the TS/NG compiler.
                     // This step is unneeded when using esbuild transpilation.
                     const sideEffects = await hasSideEffects(request);
-                    contents = await javascriptTransformer.transformData(request, contents, true /* skipLinker */, sideEffects);
+                    const instrumentForCoverage = pluginOptions.instrumentForCoverage?.(request);
+                    contents = await javascriptTransformer.transformData(request, contents, true /* skipLinker */, sideEffects, instrumentForCoverage);
                     // Store as the returned Uint8Array to allow caching the fully transformed code
                     typeScriptFileCache.set(request, contents);
                 }

package/src/tools/esbuild/compiler-plugin-options.js

@@ -9,7 +9,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.createCompilerPluginOptions = createCompilerPluginOptions;
 function createCompilerPluginOptions(options, target, sourceFileCache) {
-    const { workspaceRoot, optimizationOptions, sourcemapOptions, tsconfig, outputNames, fileReplacements, externalDependencies, preserveSymlinks, stylePreprocessorOptions, advancedOptimizations, inlineStyleLanguage, jit, cacheOptions, tailwindConfiguration, postcssConfiguration, publicPath, externalRuntimeStyles, } = options;
+    const { workspaceRoot, optimizationOptions, sourcemapOptions, tsconfig, outputNames, fileReplacements, externalDependencies, preserveSymlinks, stylePreprocessorOptions, advancedOptimizations, inlineStyleLanguage, jit, cacheOptions, tailwindConfiguration, postcssConfiguration, publicPath, externalRuntimeStyles, instrumentForCoverage, } = options;
     return {
         // JS/TS options
         pluginOptions: {
@@ -23,6 +23,7 @@ function createCompilerPluginOptions(options, target, sourceFileCache) {
             loadResultCache: sourceFileCache?.loadResultCache,
             incremental: !!options.watch,
             externalRuntimeStyles,
+            instrumentForCoverage,
         },
         // Component stylesheet options
         styleOptions: {

package/src/tools/esbuild/javascript-transformer-worker.d.ts

@@ -14,6 +14,7 @@ interface JavaScriptTransformRequest {
     skipLinker?: boolean;
     sideEffects?: boolean;
     jit: boolean;
+    instrumentForCoverage?: boolean;
 }
 export default function transformJavaScript(request: JavaScriptTransformRequest): Promise<unknown>;
 export {};

package/src/tools/esbuild/javascript-transformer-worker.js

@@ -63,8 +63,12 @@ async function transformWithBabel(filename, data, options) {
     // @ts-expect-error Import attribute syntax plugin does not currently have type definitions
     const { default: importAttributePlugin } = await Promise.resolve().then(() => __importStar(require('@babel/plugin-syntax-import-attributes')));
     const plugins = [importAttributePlugin];
-    // Lazy load the linker plugin only when linking is required
+    if (options.instrumentForCoverage) {
+        const { default: coveragePlugin } = await Promise.resolve().then(() => __importStar(require('../babel/plugins/add-code-coverage.js')));
+        plugins.push(coveragePlugin);
+    }
     if (shouldLink) {
+        // Lazy load the linker plugin only when linking is required
         const linkerPlugin = await createLinkerPlugin(options);
         plugins.push(linkerPlugin);
     }

package/src/tools/esbuild/javascript-transformer.d.ts

@@ -35,7 +35,7 @@ export declare class JavaScriptTransformer {
      * @param sideEffects If false, and `advancedOptimizations` is enabled tslib decorators are wrapped.
      * @returns A promise that resolves to a UTF-8 encoded Uint8Array containing the result.
      */
-    transformFile(filename: string, skipLinker?: boolean, sideEffects?: boolean): Promise<Uint8Array>;
+    transformFile(filename: string, skipLinker?: boolean, sideEffects?: boolean, instrumentForCoverage?: boolean): Promise<Uint8Array>;
     /**
      * Performs JavaScript transformations on the provided data of a file. The file does not need
      * to exist on the filesystem.
@@ -45,7 +45,7 @@ export declare class JavaScriptTransformer {
      * @param sideEffects If false, and `advancedOptimizations` is enabled tslib decorators are wrapped.
      * @returns A promise that resolves to a UTF-8 encoded Uint8Array containing the result.
      */
-    transformData(filename: string, data: string, skipLinker: boolean, sideEffects?: boolean): Promise<Uint8Array>;
+    transformData(filename: string, data: string, skipLinker: boolean, sideEffects?: boolean, instrumentForCoverage?: boolean): Promise<Uint8Array>;
     /**
      * Stops all active transformation tasks and shuts down all workers.
      * @returns A void promise that resolves when closing is complete.

package/src/tools/esbuild/javascript-transformer.js

@@ -52,7 +52,7 @@ class JavaScriptTransformer {
      * @param sideEffects If false, and `advancedOptimizations` is enabled tslib decorators are wrapped.
      * @returns A promise that resolves to a UTF-8 encoded Uint8Array containing the result.
      */
-    async transformFile(filename, skipLinker, sideEffects) {
+    async transformFile(filename, skipLinker, sideEffects, instrumentForCoverage) {
         const data = await (0, promises_1.readFile)(filename);
         let result;
         let cacheKey;
@@ -79,6 +79,7 @@ class JavaScriptTransformer {
                 data,
                 skipLinker,
                 sideEffects,
+                instrumentForCoverage,
                 ...this.#commonOptions,
             }, {
                 // The below is disable as with Yarn PNP this causes build failures with the below message
@@ -106,10 +107,10 @@ class JavaScriptTransformer {
      * @param sideEffects If false, and `advancedOptimizations` is enabled tslib decorators are wrapped.
      * @returns A promise that resolves to a UTF-8 encoded Uint8Array containing the result.
      */
-    async transformData(filename, data, skipLinker, sideEffects) {
+    async transformData(filename, data, skipLinker, sideEffects, instrumentForCoverage) {
         // Perform a quick test to determine if the data needs any transformations.
         // This allows directly returning the data without the worker communication overhead.
-        if (skipLinker && !this.#commonOptions.advancedOptimizations) {
+        if (skipLinker && !this.#commonOptions.advancedOptimizations && !instrumentForCoverage) {
             const keepSourcemap = this.#commonOptions.sourcemap &&
                 (!!this.#commonOptions.thirdPartySourcemaps || !/[\\/]node_modules[\\/]/.test(filename));
             return Buffer.from(keepSourcemap ? data : data.replace(/^\/\/# sourceMappingURL=[^\r\n]*/gm, ''), 'utf-8');
@@ -119,6 +120,7 @@ class JavaScriptTransformer {
             data,
             skipLinker,
             sideEffects,
+            instrumentForCoverage,
             ...this.#commonOptions,
         });
     }

package/src/tools/vite/middlewares/ssr-middleware.js

@@ -10,6 +10,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.createAngularSsrInternalMiddleware = createAngularSsrInternalMiddleware;
 exports.createAngularSsrExternalMiddleware = createAngularSsrExternalMiddleware;
 const load_esm_1 = require("../../../utils/load-esm");
+const utils_1 = require("../../../utils/server-rendering/utils");
 function createAngularSsrInternalMiddleware(server, indexHtmlTransformer) {
     let cachedAngularServerApp;
     return function angularSsrMiddleware(req, res, next) {
@@ -17,6 +18,9 @@ function createAngularSsrInternalMiddleware(server, indexHtmlTransformer) {
             return next();
         }
         (async () => {
+            // Load the compiler because `@angular/ssr/node` depends on `@angular/` packages,
+            // which must be processed by the runtime linker, even if they are not used.
+            await (0, load_esm_1.loadEsmModule)('@angular/compiler');
             const { writeResponseToNodeResponse, createWebRequestFromNodeRequest } = await (0, load_esm_1.loadEsmModule)('@angular/ssr/node');
             const { ɵgetOrCreateAngularServerApp } = (await server.ssrLoadModule('/main.server.mjs'));
             const angularServerApp = ɵgetOrCreateAngularServerApp();
@@ -43,11 +47,14 @@ async function createAngularSsrExternalMiddleware(server, indexHtmlTransformer)
     let fallbackWarningShown = false;
     let cachedAngularAppEngine;
     let angularSsrInternalMiddleware;
+    // Load the compiler because `@angular/ssr/node` depends on `@angular/` packages,
+    // which must be processed by the runtime linker, even if they are not used.
+    await (0, load_esm_1.loadEsmModule)('@angular/compiler');
     const { createWebRequestFromNodeRequest, writeResponseToNodeResponse } = await (0, load_esm_1.loadEsmModule)('@angular/ssr/node');
     return function angularSsrExternalMiddleware(req, res, next) {
         (async () => {
             const { default: handler, AngularAppEngine } = (await server.ssrLoadModule('./server.mjs'));
-            if (!isSsrNodeRequestHandler(handler) && !isSsrRequestHandler(handler)) {
+            if (!(0, utils_1.isSsrNodeRequestHandler)(handler) && !(0, utils_1.isSsrRequestHandler)(handler)) {
                 if (!fallbackWarningShown) {
                     // eslint-disable-next-line no-console
                     console.warn(`The default export in 'server.ts' does not provide a Node.js request handler. ` +
@@ -66,7 +73,7 @@ async function createAngularSsrExternalMiddleware(server, indexHtmlTransformer)
                 cachedAngularAppEngine = AngularAppEngine;
             }
             // Forward the request to the middleware in server.ts
-            if (isSsrNodeRequestHandler(handler)) {
+            if ((0, utils_1.isSsrNodeRequestHandler)(handler)) {
                 await handler(req, res, next);
             }
             else {
@@ -80,9 +87,3 @@ async function createAngularSsrExternalMiddleware(server, indexHtmlTransformer)
         })().catch(next);
     };
 }
-function isSsrNodeRequestHandler(value) {
-    return typeof value === 'function' && '__ng_node_request_handler__' in value;
-}
-function isSsrRequestHandler(value) {
-    return typeof value === 'function' && '__ng_request_handler__' in value;
-}

package/src/utils/index-file/index-html-generator.js

@@ -14,6 +14,7 @@ const add_event_dispatch_contract_1 = require("./add-event-dispatch-contract");
 const augment_index_html_1 = require("./augment-index-html");
 const inline_critical_css_1 = require("./inline-critical-css");
 const inline_fonts_1 = require("./inline-fonts");
+const ngcm_attribute_1 = require("./ngcm-attribute");
 const nonce_1 = require("./nonce");
 class IndexHtmlGenerator {
     options;
@@ -35,6 +36,7 @@ class IndexHtmlGenerator {
         this.csrPlugins.push(addNoncePlugin());
         // SSR plugins
         if (options.generateDedicatedSSRContent) {
+            this.csrPlugins.push(addNgcmAttributePlugin());
             this.ssrPlugins.push(addEventDispatchContractPlugin(), addNoncePlugin());
         }
     }
@@ -134,3 +136,6 @@ function postTransformPlugin({ options }) {
 function addEventDispatchContractPlugin() {
     return (html) => (0, add_event_dispatch_contract_1.addEventDispatchContract)(html);
 }
+function addNgcmAttributePlugin() {
+    return (html) => (0, ngcm_attribute_1.addNgcmAttribute)(html);
+}

package/src/utils/index-file/ngcm-attribute.d.ts

@@ -0,0 +1,15 @@
+/**
+ * @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
+ */
+/**
+ * Transforms the provided HTML by adding the `ngcm` attribute to the `<body>` tag.
+ * This is used in the client-side rendered (CSR) version of `index.html` to prevent hydration warnings.
+ *
+ * @param html The HTML markup to be transformed.
+ * @returns A promise that resolves to the transformed HTML string with the necessary modifications.
+ */
+export declare function addNgcmAttribute(html: string): Promise<string>;

package/src/utils/index-file/ngcm-attribute.js

@@ -0,0 +1,37 @@
+"use strict";
+/**
+ * @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
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.addNgcmAttribute = addNgcmAttribute;
+const html_rewriting_stream_1 = require("./html-rewriting-stream");
+/**
+ * Defines a name of an attribute that is added to the `<body>` tag
+ * in the `index.html` file in case a given route was configured
+ * with `RenderMode.Client`. 'cm' is an abbreviation for "Client Mode".
+ *
+ * @see https://github.com/angular/angular/pull/58004
+ */
+const CLIENT_RENDER_MODE_FLAG = 'ngcm';
+/**
+ * Transforms the provided HTML by adding the `ngcm` attribute to the `<body>` tag.
+ * This is used in the client-side rendered (CSR) version of `index.html` to prevent hydration warnings.
+ *
+ * @param html The HTML markup to be transformed.
+ * @returns A promise that resolves to the transformed HTML string with the necessary modifications.
+ */
+async function addNgcmAttribute(html) {
+    const { rewriter, transformedContent } = await (0, html_rewriting_stream_1.htmlRewritingStream)(html);
+    rewriter.on('startTag', (tag) => {
+        if (tag.tagName === 'body' &&
+            !tag.attrs.some((attr) => attr.name === CLIENT_RENDER_MODE_FLAG)) {
+            tag.attrs.push({ name: CLIENT_RENDER_MODE_FLAG, value: '' });
+        }
+        rewriter.emitStartTag(tag);
+    });
+    return transformedContent();
+}

package/src/utils/index-file/valid-self-closing-tags.js

@@ -26,8 +26,35 @@ exports.VALID_SELF_CLOSING_TAGS = new Set([
     'wbr',
     /** SVG tags */
     'animate',
+    'animateMotion',
+    'animateTransform',
     'circle',
     'ellipse',
+    'feBlend',
+    'feColorMatrix',
+    'feComponentTransfer',
+    'feComposite',
+    'feConvolveMatrix',
+    'feDiffuseLighting',
+    'feDisplacementMap',
+    'feDistantLight',
+    'feDropShadow',
+    'feFlood',
+    'feFuncA',
+    'feFuncB',
+    'feFuncG',
+    'feFuncR',
+    'feGaussianBlur',
+    'feImage',
+    'feMerge',
+    'feMergeNode',
+    'feMorphology',
+    'feOffset',
+    'fePointLight',
+    'feSpecularLighting',
+    'feSpotLight',
+    'feTile',
+    'feTurbulence',
     'line',
     'path',
     'polygon',

package/src/utils/normalize-cache.js

@@ -10,7 +10,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.normalizeCacheOptions = normalizeCacheOptions;
 const node_path_1 = require("node:path");
 /** Version placeholder is replaced during the build process with actual package version */
-const VERSION = '19.0.0-next.8';
+const VERSION = '19.0.0-next.9';
 function hasCacheMetadata(value) {
     return (!!value &&
         typeof value === 'object' &&

package/src/utils/server-rendering/fetch-patch.d.ts

@@ -5,4 +5,4 @@
  * 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
  */
-export declare function patchFetchToLoadInMemoryAssets(): void;
+export declare function patchFetchToLoadInMemoryAssets(baseURL: URL): void;

package/src/utils/server-rendering/fetch-patch.js

@@ -17,7 +17,7 @@ const node_worker_threads_1 = require("node:worker_threads");
  */
 const { assetFiles } = node_worker_threads_1.workerData;
 const assetsCache = new Map();
-function patchFetchToLoadInMemoryAssets() {
+function patchFetchToLoadInMemoryAssets(baseURL) {
     const originalFetch = globalThis.fetch;
     const patchedFetch = async (input, init) => {
         let url;
@@ -35,7 +35,7 @@ function patchFetchToLoadInMemoryAssets() {
         }
         const { hostname } = url;
         const pathname = decodeURIComponent(url.pathname);
-        if (hostname !== 'local-angular-prerender' || !assetFiles[pathname]) {
+        if (hostname !== baseURL.hostname || !assetFiles[pathname]) {
             // Only handle relative requests or files that are in assets.
             return originalFetch(input, init);
         }

package/src/utils/server-rendering/launch-server.d.ts

@@ -0,0 +1,14 @@
+/**
+ * @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
+ */
+export declare const DEFAULT_URL: import("url").URL;
+/**
+ * Launches a server that handles local requests.
+ *
+ * @returns A promise that resolves to the URL of the running server.
+ */
+export declare function launchServer(): Promise<URL>;

package/src/utils/server-rendering/launch-server.js

@@ -0,0 +1,63 @@
+"use strict";
+/**
+ * @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
+ */
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DEFAULT_URL = void 0;
+exports.launchServer = launchServer;
+const node_assert_1 = __importDefault(require("node:assert"));
+const node_http_1 = require("node:http");
+const load_esm_1 = require("../load-esm");
+const load_esm_from_memory_1 = require("./load-esm-from-memory");
+const utils_1 = require("./utils");
+exports.DEFAULT_URL = new URL('http://ng-localhost/');
+/**
+ * Launches a server that handles local requests.
+ *
+ * @returns A promise that resolves to the URL of the running server.
+ */
+async function launchServer() {
+    const { default: handler } = await (0, load_esm_from_memory_1.loadEsmModuleFromMemory)('./server.mjs');
+    const { createWebRequestFromNodeRequest, writeResponseToNodeResponse } = await (0, load_esm_1.loadEsmModule)('@angular/ssr/node');
+    if (!(0, utils_1.isSsrNodeRequestHandler)(handler) && !(0, utils_1.isSsrRequestHandler)(handler)) {
+        return exports.DEFAULT_URL;
+    }
+    const server = (0, node_http_1.createServer)((req, res) => {
+        (async () => {
+            // handle request
+            if ((0, utils_1.isSsrNodeRequestHandler)(handler)) {
+                await handler(req, res, (e) => {
+                    throw e;
+                });
+            }
+            else {
+                const webRes = await handler(createWebRequestFromNodeRequest(req));
+                if (webRes) {
+                    await writeResponseToNodeResponse(webRes, res);
+                }
+                else {
+                    res.statusCode = 501;
+                    res.end('Not Implemented.');
+                }
+            }
+        })().catch((e) => {
+            res.statusCode = 500;
+            res.end('Internal Server Error.');
+            // eslint-disable-next-line no-console
+            console.error(e);
+        });
+    });
+    server.unref();
+    await new Promise((resolve) => server.listen(0, 'localhost', resolve));
+    const serverAddress = server.address();
+    (0, node_assert_1.default)(serverAddress, 'Server address should be defined.');
+    (0, node_assert_1.default)(typeof serverAddress !== 'string', 'Server address should not be a string.');
+    return new URL(`http://localhost:${serverAddress.port}/`);
+}

package/src/utils/server-rendering/load-esm-from-memory.d.ts

@@ -15,5 +15,12 @@ interface MainServerBundleExports {
     ɵextractRoutesAndCreateRouteTree: typeof ɵextractRoutesAndCreateRouteTree;
     ɵgetOrCreateAngularServerApp: typeof ɵgetOrCreateAngularServerApp;
 }
+/**
+ * Represents the exports available from the server bundle.
+ */
+interface ServerBundleExports {
+    default: unknown;
+}
 export declare function loadEsmModuleFromMemory(path: './main.server.mjs'): Promise<MainServerBundleExports>;
+export declare function loadEsmModuleFromMemory(path: './server.mjs'): Promise<ServerBundleExports>;
 export {};

package/src/utils/server-rendering/manifest.js

@@ -18,18 +18,9 @@ const MAIN_SERVER_OUTPUT_FILENAME = 'main.server.mjs';
  * A mapping of unsafe characters to their escaped Unicode equivalents.
  */
 const UNSAFE_CHAR_MAP = {
-    '<': '\\u003C',
-    '>': '\\u003E',
-    '/': '\\u002F',
+    '`': '\\`',
+    '$': '\\$',
     '\\': '\\\\',
-    '\b': '\\b',
-    '\f': '\\f',
-    '\n': '\\n',
-    '\r': '\\r',
-    '\t': '\\t',
-    '\0': '\\0',
-    '\u2028': '\\u2028',
-    '\u2029': '\\u2029',
 };
 /**
  * Escapes unsafe characters in a given string by replacing them with
@@ -39,7 +30,7 @@ const UNSAFE_CHAR_MAP = {
  * @returns The escaped string where unsafe characters are replaced.
  */
 function escapeUnsafeChars(str) {
-    return str.replace(/[<>\b\f\n\r\t\0\u2028\u2029]/g, (c) => UNSAFE_CHAR_MAP[c]);
+    return str.replace(/[$`\\]/g, (c) => UNSAFE_CHAR_MAP[c]);
 }
 /**
  * Generates the server manifest for the App Engine environment.
@@ -119,7 +110,7 @@ function generateAngularServerAppManifest(additionalHtmlOutputFiles, outputFiles
         if (file.path === options_1.INDEX_HTML_SERVER ||
             file.path === options_1.INDEX_HTML_CSR ||
             (inlineCriticalCss && file.path.endsWith('.css'))) {
-            serverAssetsContent.push(`['${file.path}', async () => ${escapeUnsafeChars(JSON.stringify(file.text))}]`);
+            serverAssetsContent.push(`['${file.path}', async () => \`${escapeUnsafeChars(file.text)}\`]`);
         }
     }
     const manifestContent = `

package/src/utils/server-rendering/prerender.js

@@ -92,7 +92,7 @@ async function prerenderPages(workspaceRoot, baseHref, appShellOptions, prerende
         };
     }
     // Render routes
-    const { errors: renderingErrors, output } = await renderPages(baseHref, sourcemap, serializableRouteTreeNodeForPrerender, maxThreads, workspaceRoot, outputFilesForWorker, assetsReversed, appShellOptions);
+    const { errors: renderingErrors, output } = await renderPages(baseHref, sourcemap, serializableRouteTreeNodeForPrerender, maxThreads, workspaceRoot, outputFilesForWorker, assetsReversed, appShellOptions, outputMode);
     errors.push(...renderingErrors);
     return {
         errors,
@@ -101,7 +101,7 @@ async function prerenderPages(workspaceRoot, baseHref, appShellOptions, prerende
         serializableRouteTreeNode,
     };
 }
-async function renderPages(baseHref, sourcemap, serializableRouteTreeNode, maxThreads, workspaceRoot, outputFilesForWorker, assetFilesForWorker, appShellOptions) {
+async function renderPages(baseHref, sourcemap, serializableRouteTreeNode, maxThreads, workspaceRoot, outputFilesForWorker, assetFilesForWorker, appShellOptions, outputMode) {
     const output = {};
     const errors = [];
     const workerExecArgv = [
@@ -119,6 +119,8 @@ async function renderPages(baseHref, sourcemap, serializableRouteTreeNode, maxTh
             workspaceRoot,
             outputFiles: outputFilesForWorker,
             assetFiles: assetFilesForWorker,
+            outputMode,
+            hasSsrEntry: !!outputFilesForWorker['/server.mjs'],
         },
         execArgv: workerExecArgv,
     });
@@ -194,13 +196,13 @@ async function getAllRoutes(workspaceRoot, baseHref, outputFilesForWorker, asset
             workspaceRoot,
             outputFiles: outputFilesForWorker,
             assetFiles: assetFilesForWorker,
+            outputMode,
+            hasSsrEntry: !!outputFilesForWorker['/server.mjs'],
         },
         execArgv: workerExecArgv,
     });
     try {
-        const { serializedRouteTree, errors } = await renderWorker.run({
-            outputMode,
-        });
+        const { serializedRouteTree, errors } = await renderWorker.run({});
         return { errors, serializedRouteTree: [...routes, ...serializedRouteTree] };
     }
     catch (err) {

package/src/utils/server-rendering/render-worker.d.ts

@@ -5,9 +5,12 @@
  * 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 { OutputMode } from '../../builders/application/schema';
 import type { ESMInMemoryFileLoaderWorkerData } from './esm-in-memory-loader/loader-hooks';
 export interface RenderWorkerData extends ESMInMemoryFileLoaderWorkerData {
     assetFiles: Record</** Destination */ string, /** Source */ string>;
+    outputMode: OutputMode | undefined;
+    hasSsrEntry: boolean;
 }
 export interface RenderOptions {
     url: string;
@@ -16,5 +19,5 @@ export interface RenderOptions {
  * Renders each route in routes and writes them to <outputPath>/<route>/index.html.
  */
 declare function renderPage({ url }: RenderOptions): Promise<string | null>;
-declare const _default: typeof renderPage;
+declare const _default: Promise<typeof renderPage>;
 export default _default;

package/src/utils/server-rendering/render-worker.js

@@ -7,19 +7,29 @@
  * found in the LICENSE file at https://angular.dev/license
  */
 Object.defineProperty(exports, "__esModule", { value: true });
+const worker_threads_1 = require("worker_threads");
 const fetch_patch_1 = require("./fetch-patch");
+const launch_server_1 = require("./launch-server");
 const load_esm_from_memory_1 = require("./load-esm-from-memory");
+/**
+ * This is passed as workerData when setting up the worker via the `piscina` package.
+ */
+const { outputMode, hasSsrEntry } = worker_threads_1.workerData;
+let serverURL = launch_server_1.DEFAULT_URL;
 /**
  * Renders each route in routes and writes them to <outputPath>/<route>/index.html.
  */
 async function renderPage({ url }) {
     const { ɵgetOrCreateAngularServerApp: getOrCreateAngularServerApp } = await (0, load_esm_from_memory_1.loadEsmModuleFromMemory)('./main.server.mjs');
     const angularServerApp = getOrCreateAngularServerApp();
-    const response = await angularServerApp.renderStatic(new URL(url, 'http://local-angular-prerender'), AbortSignal.timeout(30_000));
+    const response = await angularServerApp.renderStatic(new URL(url, serverURL), AbortSignal.timeout(30_000));
     return response ? response.text() : null;
 }
-function initialize() {
-    (0, fetch_patch_1.patchFetchToLoadInMemoryAssets)();
+async function initialize() {
+    if (outputMode !== undefined && hasSsrEntry) {
+        serverURL = await (0, launch_server_1.launchServer)();
+    }
+    (0, fetch_patch_1.patchFetchToLoadInMemoryAssets)(serverURL);
     return renderPage;
 }
 exports.default = initialize();

package/src/utils/server-rendering/routes-extractor-worker.d.ts

@@ -6,11 +6,12 @@
  * found in the LICENSE file at https://angular.dev/license
  */
 import { OutputMode } from '../../builders/application/schema';
+import { ESMInMemoryFileLoaderWorkerData } from './esm-in-memory-loader/loader-hooks';
 import { RoutersExtractorWorkerResult } from './models';
-export interface ExtractRoutesOptions {
-    outputMode?: OutputMode;
+export interface ExtractRoutesWorkerData extends ESMInMemoryFileLoaderWorkerData {
+    outputMode: OutputMode | undefined;
 }
 /** Renders an application based on a provided options. */
-declare function extractRoutes({ outputMode, }: ExtractRoutesOptions): Promise<RoutersExtractorWorkerResult>;
-declare const _default: typeof extractRoutes;
+declare function extractRoutes(): Promise<RoutersExtractorWorkerResult>;
+declare const _default: Promise<typeof extractRoutes>;
 export default _default;

package/src/utils/server-rendering/routes-extractor-worker.js

@@ -7,20 +7,30 @@
  * found in the LICENSE file at https://angular.dev/license
  */
 Object.defineProperty(exports, "__esModule", { value: true });
+const worker_threads_1 = require("worker_threads");
 const schema_1 = require("../../builders/application/schema");
 const fetch_patch_1 = require("./fetch-patch");
+const launch_server_1 = require("./launch-server");
 const load_esm_from_memory_1 = require("./load-esm-from-memory");
+/**
+ * This is passed as workerData when setting up the worker via the `piscina` package.
+ */
+const { outputMode, hasSsrEntry } = worker_threads_1.workerData;
+let serverURL = launch_server_1.DEFAULT_URL;
 /** Renders an application based on a provided options. */
-async function extractRoutes({ outputMode, }) {
+async function extractRoutes() {
     const { ɵextractRoutesAndCreateRouteTree: extractRoutesAndCreateRouteTree } = await (0, load_esm_from_memory_1.loadEsmModuleFromMemory)('./main.server.mjs');
-    const { routeTree, errors } = await extractRoutesAndCreateRouteTree(new URL('http://local-angular-prerender/'), undefined /** manifest */, true /** invokeGetPrerenderParams */, outputMode === schema_1.OutputMode.Server /** includePrerenderFallbackRoutes */);
+    const { routeTree, errors } = await extractRoutesAndCreateRouteTree(serverURL, undefined /** manifest */, true /** invokeGetPrerenderParams */, outputMode === schema_1.OutputMode.Server /** includePrerenderFallbackRoutes */);
     return {
         errors,
         serializedRouteTree: routeTree.toObject(),
     };
 }
-function initialize() {
-    (0, fetch_patch_1.patchFetchToLoadInMemoryAssets)();
+async function initialize() {
+    if (outputMode !== undefined && hasSsrEntry) {
+        serverURL = await (0, launch_server_1.launchServer)();
+    }
+    (0, fetch_patch_1.patchFetchToLoadInMemoryAssets)(serverURL);
     return extractRoutes;
 }
 exports.default = initialize();

package/src/utils/server-rendering/utils.d.ts

@@ -0,0 +1,11 @@
+/**
+ * @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 { createRequestHandler } from '@angular/ssr';
+import type { createNodeRequestHandler } from '@angular/ssr/node';
+export declare function isSsrNodeRequestHandler(value: unknown): value is ReturnType<typeof createNodeRequestHandler>;
+export declare function isSsrRequestHandler(value: unknown): value is ReturnType<typeof createRequestHandler>;

package/src/utils/server-rendering/utils.js

@@ -0,0 +1,17 @@
+"use strict";
+/**
+ * @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
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.isSsrNodeRequestHandler = isSsrNodeRequestHandler;
+exports.isSsrRequestHandler = isSsrRequestHandler;
+function isSsrNodeRequestHandler(value) {
+    return typeof value === 'function' && '__ng_node_request_handler__' in value;
+}
+function isSsrRequestHandler(value) {
+    return typeof value === 'function' && '__ng_request_handler__' in value;
+}