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

package/src/tools/vite/middlewares/index.d.ts

@@ -8,5 +8,5 @@
 export { createAngularAssetsMiddleware } from './assets-middleware';
 export { angularHtmlFallbackMiddleware } from './html-fallback-middleware';
 export { createAngularIndexHtmlMiddleware } from './index-html-middleware';
-export { createAngularSSRMiddleware } from './ssr-middleware';
+export { createAngularSsrExternalMiddleware, createAngularSsrInternalMiddleware, } from './ssr-middleware';
 export { createAngularHeadersMiddleware } from './headers-middleware';

package/src/tools/vite/middlewares/index.js

@@ -7,7 +7,7 @@
  * found in the LICENSE file at https://angular.dev/license
  */
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.createAngularHeadersMiddleware = exports.createAngularSSRMiddleware = exports.createAngularIndexHtmlMiddleware = exports.angularHtmlFallbackMiddleware = exports.createAngularAssetsMiddleware = void 0;
+exports.createAngularHeadersMiddleware = exports.createAngularSsrInternalMiddleware = exports.createAngularSsrExternalMiddleware = exports.createAngularIndexHtmlMiddleware = exports.angularHtmlFallbackMiddleware = exports.createAngularAssetsMiddleware = void 0;
 var assets_middleware_1 = require("./assets-middleware");
 Object.defineProperty(exports, "createAngularAssetsMiddleware", { enumerable: true, get: function () { return assets_middleware_1.createAngularAssetsMiddleware; } });
 var html_fallback_middleware_1 = require("./html-fallback-middleware");
@@ -15,6 +15,7 @@ Object.defineProperty(exports, "angularHtmlFallbackMiddleware", { enumerable: tr
 var index_html_middleware_1 = require("./index-html-middleware");
 Object.defineProperty(exports, "createAngularIndexHtmlMiddleware", { enumerable: true, get: function () { return index_html_middleware_1.createAngularIndexHtmlMiddleware; } });
 var ssr_middleware_1 = require("./ssr-middleware");
-Object.defineProperty(exports, "createAngularSSRMiddleware", { enumerable: true, get: function () { return ssr_middleware_1.createAngularSSRMiddleware; } });
+Object.defineProperty(exports, "createAngularSsrExternalMiddleware", { enumerable: true, get: function () { return ssr_middleware_1.createAngularSsrExternalMiddleware; } });
+Object.defineProperty(exports, "createAngularSsrInternalMiddleware", { enumerable: true, get: function () { return ssr_middleware_1.createAngularSsrInternalMiddleware; } });
 var headers_middleware_1 = require("./headers-middleware");
 Object.defineProperty(exports, "createAngularHeadersMiddleware", { enumerable: true, get: function () { return headers_middleware_1.createAngularHeadersMiddleware; } });

package/src/tools/vite/middlewares/ssr-middleware.d.ts

@@ -6,4 +6,5 @@
  * found in the LICENSE file at https://angular.dev/license
  */
 import type { Connect, ViteDevServer } from 'vite';
-export declare function createAngularSSRMiddleware(server: ViteDevServer, indexHtmlTransformer?: (content: string) => Promise<string>): Connect.NextHandleFunction;
+export declare function createAngularSsrInternalMiddleware(server: ViteDevServer, indexHtmlTransformer?: (content: string) => Promise<string>): Connect.NextHandleFunction;
+export declare function createAngularSsrExternalMiddleware(server: ViteDevServer, indexHtmlTransformer?: (content: string) => Promise<string>): Promise<Connect.NextHandleFunction>;

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

@@ -7,36 +7,83 @@
  * found in the LICENSE file at https://angular.dev/license
  */
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.createAngularSSRMiddleware = createAngularSSRMiddleware;
-function createAngularSSRMiddleware(server, indexHtmlTransformer) {
+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) {
+    return function angularSsrMiddleware(req, res, next) {
         if (req.url === undefined) {
             return next();
         }
-        const resolvedUrls = server.resolvedUrls;
-        const baseUrl = resolvedUrls?.local[0] ?? resolvedUrls?.network[0];
-        const url = new URL(req.url, baseUrl);
         (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();
             // Only Add the transform hook only if it's a different instance.
             if (cachedAngularServerApp !== angularServerApp) {
-                angularServerApp.hooks.on('html:transform:pre', async ({ html }) => {
+                angularServerApp.hooks.on('html:transform:pre', async ({ html, url }) => {
                     const processedHtml = await server.transformIndexHtml(url.pathname, html);
                     return indexHtmlTransformer?.(processedHtml) ?? processedHtml;
                 });
                 cachedAngularServerApp = angularServerApp;
             }
-            const response = await angularServerApp.render(new Request(url, { signal: AbortSignal.timeout(30_000) }), undefined);
-            return response?.text();
-        })()
-            .then((content) => {
-            if (typeof content !== 'string') {
+            const webReq = new Request(createWebRequestFromNodeRequest(req), {
+                signal: AbortSignal.timeout(30_000),
+            });
+            const webRes = await angularServerApp.render(webReq);
+            if (!webRes) {
                 return next();
             }
-            res.end(content);
-        })
-            .catch((error) => next(error));
+            return writeResponseToNodeResponse(webRes, res);
+        })().catch(next);
+    };
+}
+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 (!(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. ` +
+                        'Using the internal SSR middleware instead.');
+                    fallbackWarningShown = true;
+                }
+                angularSsrInternalMiddleware ??= createAngularSsrInternalMiddleware(server, indexHtmlTransformer);
+                angularSsrInternalMiddleware(req, res, next);
+                return;
+            }
+            if (cachedAngularAppEngine !== AngularAppEngine) {
+                AngularAppEngine.ɵhooks.on('html:transform:pre', async ({ html, url }) => {
+                    const processedHtml = await server.transformIndexHtml(url.pathname, html);
+                    return indexHtmlTransformer?.(processedHtml) ?? processedHtml;
+                });
+                cachedAngularAppEngine = AngularAppEngine;
+            }
+            // Forward the request to the middleware in server.ts
+            if ((0, utils_1.isSsrNodeRequestHandler)(handler)) {
+                await handler(req, res, next);
+            }
+            else {
+                const webRes = await handler(createWebRequestFromNodeRequest(req));
+                if (!webRes) {
+                    next();
+                    return;
+                }
+                await writeResponseToNodeResponse(webRes, res);
+            }
+        })().catch(next);
     };
 }

package/src/tools/vite/plugins/angular-memory-plugin.d.ts

@@ -0,0 +1,16 @@
+/**
+ * @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 { Plugin } from 'vite';
+import { AngularMemoryOutputFiles } from '../utils';
+interface AngularMemoryPluginOptions {
+    virtualProjectRoot: string;
+    outputFiles: AngularMemoryOutputFiles;
+    external?: string[];
+}
+export declare function createAngularMemoryPlugin(options: AngularMemoryPluginOptions): Promise<Plugin>;
+export {};

package/src/tools/vite/{angular-memory-plugin.js → plugins/angular-memory-plugin.js}

@@ -11,13 +11,15 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.createAngularMemoryPlugin = createAngularMemoryPlugin;
-const remapping_1 = __importDefault(require("@ampproject/remapping"));
 const node_assert_1 = __importDefault(require("node:assert"));
 const promises_1 = require("node:fs/promises");
 const node_path_1 = require("node:path");
-const middlewares_1 = require("./middlewares");
-function createAngularMemoryPlugin(options) {
-    const { workspaceRoot, virtualProjectRoot, outputFiles, assets, external, ssr, extensionMiddleware, indexHtmlTransformer, normalizePath, usedComponentStyles, } = options;
+const load_esm_1 = require("../../../utils/load-esm");
+async function createAngularMemoryPlugin(options) {
+    const { virtualProjectRoot, outputFiles, external } = options;
+    const { normalizePath } = await (0, load_esm_1.loadEsmModule)('vite');
+    // See: https://github.com/vitejs/vite/blob/a34a73a3ad8feeacc98632c0f4c643b6820bbfda/packages/vite/src/node/server/pluginContainer.ts#L331-L334
+    const defaultImporter = (0, node_path_1.join)(virtualProjectRoot, 'index.html');
     return {
         name: 'vite:angular-memory',
         // Ensures plugin hooks run before built-in Vite hooks
@@ -29,11 +31,19 @@ function createAngularMemoryPlugin(options) {
                 // `/@id/${source}` but is currently closer to a raw external than a resolved file path.
                 return source;
             }
-            if (importer && source[0] === '.' && normalizePath(importer).startsWith(virtualProjectRoot)) {
-                // Remove query if present
-                const [importerFile] = importer.split('?', 1);
-                source =
-                    '/' + normalizePath((0, node_path_1.join)((0, node_path_1.dirname)((0, node_path_1.relative)(virtualProjectRoot, importerFile)), source));
+            if (importer) {
+                let normalizedSource;
+                if (source[0] === '.' && normalizePath(importer).startsWith(virtualProjectRoot)) {
+                    // Remove query if present
+                    const [importerFile] = importer.split('?', 1);
+                    normalizedSource = (0, node_path_1.join)((0, node_path_1.dirname)((0, node_path_1.relative)(virtualProjectRoot, importerFile)), source);
+                }
+                else if (source[0] === '/' && importer === defaultImporter) {
+                    normalizedSource = (0, node_path_1.basename)(source);
+                }
+                if (normalizedSource) {
+                    source = '/' + normalizePath(normalizedSource);
+                }
             }
             const [file] = source.split('?', 1);
             if (outputFiles.has(file)) {
@@ -58,38 +68,6 @@ function createAngularMemoryPlugin(options) {
                 map: mapContents && Buffer.from(mapContents).toString('utf-8'),
             };
         },
-        // eslint-disable-next-line max-lines-per-function
-        configureServer(server) {
-            const originalssrTransform = server.ssrTransform;
-            server.ssrTransform = async (code, map, url, originalCode) => {
-                const result = await originalssrTransform(code, null, url, originalCode);
-                if (!result || !result.map || !map) {
-                    return result;
-                }
-                const remappedMap = (0, remapping_1.default)([result.map, map], () => null);
-                // Set the sourcemap root to the workspace root. This is needed since we set a virtual path as root.
-                remappedMap.sourceRoot = normalizePath(workspaceRoot) + '/';
-                return {
-                    ...result,
-                    map: remappedMap,
-                };
-            };
-            server.middlewares.use((0, middlewares_1.createAngularHeadersMiddleware)(server));
-            // Assets and resources get handled first
-            server.middlewares.use((0, middlewares_1.createAngularAssetsMiddleware)(server, assets, outputFiles, usedComponentStyles));
-            if (extensionMiddleware?.length) {
-                extensionMiddleware.forEach((middleware) => server.middlewares.use(middleware));
-            }
-            // Returning a function, installs middleware after the main transform middleware but
-            // before the built-in HTML middleware
-            return () => {
-                if (ssr) {
-                    server.middlewares.use((0, middlewares_1.createAngularSSRMiddleware)(server, indexHtmlTransformer));
-                }
-                server.middlewares.use(middlewares_1.angularHtmlFallbackMiddleware);
-                server.middlewares.use((0, middlewares_1.createAngularIndexHtmlMiddleware)(server, outputFiles, indexHtmlTransformer));
-            };
-        },
     };
 }
 /**

package/src/tools/vite/{i18n-locale-plugin.d.ts → plugins/i18n-locale-plugin.d.ts}

@@ -6,10 +6,6 @@
  * found in the LICENSE file at https://angular.dev/license
  */
 import type { Plugin } from 'vite';
-/**
- * The base module location used to search for locale specific data.
- */
-export declare const LOCALE_DATA_BASE_MODULE = "@angular/common/locales/global";
 /**
  * Creates a Vite plugin that resolves Angular locale data files from `@angular/common`.
  *

package/src/tools/vite/{i18n-locale-plugin.js → plugins/i18n-locale-plugin.js}

@@ -7,12 +7,11 @@
  * found in the LICENSE file at https://angular.dev/license
  */
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.LOCALE_DATA_BASE_MODULE = void 0;
 exports.createAngularLocaleDataPlugin = createAngularLocaleDataPlugin;
 /**
  * The base module location used to search for locale specific data.
  */
-exports.LOCALE_DATA_BASE_MODULE = '@angular/common/locales/global';
+const LOCALE_DATA_BASE_MODULE = '@angular/common/locales/global';
 /**
  * Creates a Vite plugin that resolves Angular locale data files from `@angular/common`.
  *
@@ -32,7 +31,7 @@ function createAngularLocaleDataPlugin() {
             let partialLocale = originalLocale.replace(/-x(-[a-zA-Z0-9]{1,8})+$/, '');
             let exact = true;
             while (partialLocale) {
-                const potentialPath = `${exports.LOCALE_DATA_BASE_MODULE}/${partialLocale}`;
+                const potentialPath = `${LOCALE_DATA_BASE_MODULE}/${partialLocale}`;
                 const result = await this.resolve(potentialPath);
                 if (result) {
                     if (!exact) {

package/src/tools/vite/plugins/index.d.ts

@@ -0,0 +1,12 @@
+/**
+ * @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 { createAngularMemoryPlugin } from './angular-memory-plugin';
+export { createAngularLocaleDataPlugin } from './i18n-locale-plugin';
+export { createRemoveIdPrefixPlugin } from './id-prefix-plugin';
+export { createAngularSetupMiddlewaresPlugin, ServerSsrMode } from './setup-middlewares-plugin';
+export { createAngularSsrTransformPlugin } from './ssr-transform-plugin';

package/src/tools/vite/plugins/index.js

@@ -0,0 +1,21 @@
+"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.createAngularSsrTransformPlugin = exports.ServerSsrMode = exports.createAngularSetupMiddlewaresPlugin = exports.createRemoveIdPrefixPlugin = exports.createAngularLocaleDataPlugin = exports.createAngularMemoryPlugin = void 0;
+var angular_memory_plugin_1 = require("./angular-memory-plugin");
+Object.defineProperty(exports, "createAngularMemoryPlugin", { enumerable: true, get: function () { return angular_memory_plugin_1.createAngularMemoryPlugin; } });
+var i18n_locale_plugin_1 = require("./i18n-locale-plugin");
+Object.defineProperty(exports, "createAngularLocaleDataPlugin", { enumerable: true, get: function () { return i18n_locale_plugin_1.createAngularLocaleDataPlugin; } });
+var id_prefix_plugin_1 = require("./id-prefix-plugin");
+Object.defineProperty(exports, "createRemoveIdPrefixPlugin", { enumerable: true, get: function () { return id_prefix_plugin_1.createRemoveIdPrefixPlugin; } });
+var setup_middlewares_plugin_1 = require("./setup-middlewares-plugin");
+Object.defineProperty(exports, "createAngularSetupMiddlewaresPlugin", { enumerable: true, get: function () { return setup_middlewares_plugin_1.createAngularSetupMiddlewaresPlugin; } });
+Object.defineProperty(exports, "ServerSsrMode", { enumerable: true, get: function () { return setup_middlewares_plugin_1.ServerSsrMode; } });
+var ssr_transform_plugin_1 = require("./ssr-transform-plugin");
+Object.defineProperty(exports, "createAngularSsrTransformPlugin", { enumerable: true, get: function () { return ssr_transform_plugin_1.createAngularSsrTransformPlugin; } });

package/src/tools/vite/plugins/setup-middlewares-plugin.d.ts

@@ -0,0 +1,41 @@
+/**
+ * @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 { Connect, Plugin } from 'vite';
+import { AngularMemoryOutputFiles } from '../utils';
+export declare enum ServerSsrMode {
+    /**
+     * No SSR
+     */
+    NoSsr = 0,
+    /**
+     * Internal server-side rendering (SSR) is handled through the built-in middleware.
+     *
+     * In this mode, the SSR process is managed internally by the dev-server's middleware.
+     * The server automatically renders pages on the server without requiring external
+     * middleware or additional configuration from the developer.
+     */
+    InternalSsrMiddleware = 1,
+    /**
+     * External server-side rendering (SSR) is handled by a custom middleware defined in server.ts.
+     *
+     * This mode allows developers to define custom SSR behavior by providing a middleware in the
+     * `server.ts` file. It gives more flexibility for handling SSR, such as integrating with other
+     * frameworks or customizing the rendering pipeline.
+     */
+    ExternalSsrMiddleware = 2
+}
+interface AngularSetupMiddlewaresPluginOptions {
+    outputFiles: AngularMemoryOutputFiles;
+    assets: Map<string, string>;
+    extensionMiddleware?: Connect.NextHandleFunction[];
+    indexHtmlTransformer?: (content: string) => Promise<string>;
+    usedComponentStyles: Map<string, string[]>;
+    ssrMode: ServerSsrMode;
+}
+export declare function createAngularSetupMiddlewaresPlugin(options: AngularSetupMiddlewaresPluginOptions): Plugin;
+export {};

package/src/tools/vite/plugins/setup-middlewares-plugin.js

@@ -0,0 +1,62 @@
+"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.ServerSsrMode = void 0;
+exports.createAngularSetupMiddlewaresPlugin = createAngularSetupMiddlewaresPlugin;
+const middlewares_1 = require("../middlewares");
+var ServerSsrMode;
+(function (ServerSsrMode) {
+    /**
+     * No SSR
+     */
+    ServerSsrMode[ServerSsrMode["NoSsr"] = 0] = "NoSsr";
+    /**
+     * Internal server-side rendering (SSR) is handled through the built-in middleware.
+     *
+     * In this mode, the SSR process is managed internally by the dev-server's middleware.
+     * The server automatically renders pages on the server without requiring external
+     * middleware or additional configuration from the developer.
+     */
+    ServerSsrMode[ServerSsrMode["InternalSsrMiddleware"] = 1] = "InternalSsrMiddleware";
+    /**
+     * External server-side rendering (SSR) is handled by a custom middleware defined in server.ts.
+     *
+     * This mode allows developers to define custom SSR behavior by providing a middleware in the
+     * `server.ts` file. It gives more flexibility for handling SSR, such as integrating with other
+     * frameworks or customizing the rendering pipeline.
+     */
+    ServerSsrMode[ServerSsrMode["ExternalSsrMiddleware"] = 2] = "ExternalSsrMiddleware";
+})(ServerSsrMode || (exports.ServerSsrMode = ServerSsrMode = {}));
+function createAngularSetupMiddlewaresPlugin(options) {
+    return {
+        name: 'vite:angular-setup-middlewares',
+        enforce: 'pre',
+        configureServer(server) {
+            const { indexHtmlTransformer, outputFiles, extensionMiddleware, assets, usedComponentStyles, ssrMode, } = options;
+            // Headers, assets and resources get handled first
+            server.middlewares.use((0, middlewares_1.createAngularHeadersMiddleware)(server));
+            server.middlewares.use((0, middlewares_1.createAngularAssetsMiddleware)(server, assets, outputFiles, usedComponentStyles));
+            extensionMiddleware?.forEach((middleware) => server.middlewares.use(middleware));
+            // Returning a function, installs middleware after the main transform middleware but
+            // before the built-in HTML middleware
+            // eslint-disable-next-line @typescript-eslint/no-misused-promises
+            return async () => {
+                if (ssrMode === ServerSsrMode.ExternalSsrMiddleware) {
+                    server.middlewares.use(await (0, middlewares_1.createAngularSsrExternalMiddleware)(server, indexHtmlTransformer));
+                    return;
+                }
+                if (ssrMode === ServerSsrMode.InternalSsrMiddleware) {
+                    server.middlewares.use((0, middlewares_1.createAngularSsrInternalMiddleware)(server, indexHtmlTransformer));
+                }
+                server.middlewares.use(middlewares_1.angularHtmlFallbackMiddleware);
+                server.middlewares.use((0, middlewares_1.createAngularIndexHtmlMiddleware)(server, outputFiles, indexHtmlTransformer));
+            };
+        },
+    };
+}

package/src/tools/vite/plugins/ssr-transform-plugin.d.ts

@@ -0,0 +1,9 @@
+/**
+ * @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 { Plugin } from 'vite';
+export declare function createAngularSsrTransformPlugin(workspaceRoot: string): Promise<Plugin>;

package/src/tools/vite/plugins/ssr-transform-plugin.js

@@ -0,0 +1,38 @@
+"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.createAngularSsrTransformPlugin = createAngularSsrTransformPlugin;
+const remapping_1 = __importDefault(require("@ampproject/remapping"));
+const load_esm_1 = require("../../../utils/load-esm");
+async function createAngularSsrTransformPlugin(workspaceRoot) {
+    const { normalizePath } = await (0, load_esm_1.loadEsmModule)('vite');
+    return {
+        name: 'vite:angular-ssr-transform',
+        enforce: 'pre',
+        async configureServer(server) {
+            const originalssrTransform = server.ssrTransform;
+            server.ssrTransform = async (code, map, url, originalCode) => {
+                const result = await originalssrTransform(code, null, url, originalCode);
+                if (!result || !result.map || !map) {
+                    return result;
+                }
+                const remappedMap = (0, remapping_1.default)([result.map, map], () => null);
+                // Set the sourcemap root to the workspace root. This is needed since we set a virtual path as root.
+                remappedMap.sourceRoot = normalizePath(workspaceRoot) + '/';
+                return {
+                    ...result,
+                    map: remappedMap,
+                };
+            };
+        },
+    };
+}

package/src/utils/environment-options.d.ts

@@ -15,3 +15,5 @@ export declare const shouldWatchRoot: boolean;
 export declare const useTypeChecking: boolean;
 export declare const useJSONBuildLogs: boolean;
 export declare const shouldOptimizeChunks: boolean;
+export declare const useComponentStyleHmr: boolean;
+export declare const usePartialSsrBuild: boolean;

package/src/utils/environment-options.js

@@ -7,7 +7,7 @@
  * found in the LICENSE file at https://angular.dev/license
  */
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.shouldOptimizeChunks = exports.useJSONBuildLogs = exports.useTypeChecking = exports.shouldWatchRoot = exports.debugPerformance = exports.useParallelTs = exports.maxWorkers = exports.allowMinify = exports.shouldBeautify = exports.allowMangle = void 0;
+exports.usePartialSsrBuild = exports.useComponentStyleHmr = exports.shouldOptimizeChunks = exports.useJSONBuildLogs = exports.useTypeChecking = exports.shouldWatchRoot = exports.debugPerformance = exports.useParallelTs = exports.maxWorkers = exports.allowMinify = exports.shouldBeautify = exports.allowMangle = void 0;
 const node_os_1 = require("node:os");
 function isDisabled(variable) {
     return variable === '0' || variable.toLowerCase() === 'false';
@@ -82,3 +82,7 @@ const buildLogsJsonVariable = process.env['NG_BUILD_LOGS_JSON'];
 exports.useJSONBuildLogs = isPresent(buildLogsJsonVariable) && isEnabled(buildLogsJsonVariable);
 const optimizeChunksVariable = process.env['NG_BUILD_OPTIMIZE_CHUNKS'];
 exports.shouldOptimizeChunks = isPresent(optimizeChunksVariable) && isEnabled(optimizeChunksVariable);
+const hmrComponentStylesVariable = process.env['NG_HMR_CSTYLES'];
+exports.useComponentStyleHmr = isPresent(hmrComponentStylesVariable) && isEnabled(hmrComponentStylesVariable);
+const partialSsrBuildVariable = process.env['NG_BUILD_PARTIAL_SSR'];
+exports.usePartialSsrBuild = isPresent(partialSsrBuildVariable) && isEnabled(partialSsrBuildVariable);

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

@@ -25,8 +25,36 @@ exports.VALID_SELF_CLOSING_TAGS = new Set([
     'track',
     '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.7';
+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);
         }