@angular/build 19.0.0-next.10 → 19.0.0-next.11

package/src/tools/esbuild/application-code-bundle.js

@@ -18,6 +18,7 @@ exports.createSsrEntryCodeBundleOptions = createSsrEntryCodeBundleOptions;
 const node_assert_1 = __importDefault(require("node:assert"));
 const node_crypto_1 = require("node:crypto");
 const node_path_1 = require("node:path");
+const schema_1 = require("../../builders/application/schema");
 const environment_options_1 = require("../../utils/environment-options");
 const manifest_1 = require("../../utils/server-rendering/manifest");
 const compiler_plugin_1 = require("./angular/compiler-plugin");
@@ -26,6 +27,7 @@ const external_packages_plugin_1 = require("./external-packages-plugin");
 const i18n_locale_plugin_1 = require("./i18n-locale-plugin");
 const loader_import_attribute_plugin_1 = require("./loader-import-attribute-plugin");
 const rxjs_esm_resolution_plugin_1 = require("./rxjs-esm-resolution-plugin");
+const server_bundle_metadata_plugin_1 = require("./server-bundle-metadata-plugin");
 const sourcemap_ignorelist_plugin_1 = require("./sourcemap-ignorelist-plugin");
 const utils_1 = require("./utils");
 const virtual_module_plugin_1 = require("./virtual-module-plugin");
@@ -115,8 +117,9 @@ function createBrowserPolyfillBundleOptions(options, target, sourceFileCache) {
 function createServerPolyfillBundleOptions(options, target, sourceFileCache) {
     const serverPolyfills = [];
     const polyfillsFromConfig = new Set(options.polyfills);
+    const isNodePlatform = options.ssrOptions?.platform !== schema_1.ExperimentalPlatform.Neutral;
     if (!(0, utils_1.isZonelessApp)(options.polyfills)) {
-        serverPolyfills.push('zone.js/node');
+        serverPolyfills.push(isNodePlatform ? 'zone.js/node' : 'zone.js');
     }
     if (polyfillsFromConfig.has('@angular/localize') ||
         polyfillsFromConfig.has('@angular/localize/init')) {
@@ -133,7 +136,7 @@ function createServerPolyfillBundleOptions(options, target, sourceFileCache) {
     }
     const buildOptions = {
         ...polyfillBundleOptions,
-        platform: 'node',
+        platform: isNodePlatform ? 'node' : 'neutral',
         outExtension: { '.js': '.mjs' },
         // Note: `es2015` is needed for RxJS v6. If not specified, `module` would
         // match and the ES5 distribution would be bundled and ends up breaking at
@@ -141,19 +144,23 @@ function createServerPolyfillBundleOptions(options, target, sourceFileCache) {
         // More details: https://github.com/angular/angular-cli/issues/25405.
         mainFields: ['es2020', 'es2015', 'module', 'main'],
         entryNames: '[name]',
-        banner: {
-            js: [
-                // Note: Needed as esbuild does not provide require shims / proxy from ESModules.
-                // See: https://github.com/evanw/esbuild/issues/1921.
-                `import { createRequire } from 'node:module';`,
-                `globalThis['require'] ??= createRequire(import.meta.url);`,
-            ].join('\n'),
-        },
+        banner: isNodePlatform
+            ? {
+                js: [
+                    // Note: Needed as esbuild does not provide require shims / proxy from ESModules.
+                    // See: https://github.com/evanw/esbuild/issues/1921.
+                    `import { createRequire } from 'node:module';`,
+                    `globalThis['require'] ??= createRequire(import.meta.url);`,
+                ].join('\n'),
+            }
+            : undefined,
         target,
         entryPoints: {
             'polyfills.server': namespace,
         },
     };
+    buildOptions.plugins ??= [];
+    buildOptions.plugins.push((0, server_bundle_metadata_plugin_1.createServerBundleMetadata)());
     return () => buildOptions;
 }
 function createServerMainCodeBundleOptions(options, target, sourceFileCache) {
@@ -199,7 +206,14 @@ function createServerMainCodeBundleOptions(options, target, sourceFileCache) {
     }
     // Mark manifest and polyfills file as external as these are generated by a different bundle step.
     (buildOptions.external ??= []).push(...utils_1.SERVER_GENERATED_EXTERNALS);
-    buildOptions.plugins.push((0, virtual_module_plugin_1.createVirtualModulePlugin)({
+    const isNodePlatform = options.ssrOptions?.platform !== schema_1.ExperimentalPlatform.Neutral;
+    if (!isNodePlatform) {
+        // `@angular/platform-server` lazily depends on `xhr2` for XHR usage with the HTTP client.
+        // Since `xhr2` has Node.js dependencies, it cannot be used when targeting non-Node.js platforms.
+        // Note: The framework already issues a warning when using XHR with SSR.
+        buildOptions.external.push('xhr2');
+    }
+    buildOptions.plugins.push((0, server_bundle_metadata_plugin_1.createServerBundleMetadata)(), (0, virtual_module_plugin_1.createVirtualModulePlugin)({
         namespace: mainServerInjectPolyfillsNamespace,
         cache: sourceFileCache?.loadResultCache,
         loadContent: () => ({
@@ -259,6 +273,11 @@ function createSsrEntryCodeBundleOptions(options, target, sourceFileCache) {
     const ssrEntryNamespace = 'angular:ssr-entry';
     const ssrInjectManifestNamespace = 'angular:ssr-entry-inject-manifest';
     const ssrInjectRequireNamespace = 'angular:ssr-entry-inject-require';
+    const isNodePlatform = options.ssrOptions?.platform !== schema_1.ExperimentalPlatform.Neutral;
+    const inject = [ssrInjectManifestNamespace];
+    if (isNodePlatform) {
+        inject.unshift(ssrInjectRequireNamespace);
+    }
     const buildOptions = {
         ...getEsBuildServerCommonOptions(options),
         target,
@@ -275,7 +294,7 @@ function createSsrEntryCodeBundleOptions(options, target, sourceFileCache) {
             // Component stylesheet options
             styleOptions),
         ],
-        inject: [ssrInjectRequireNamespace, ssrInjectManifestNamespace],
+        inject,
     };
     buildOptions.plugins ??= [];
     if (externalPackages) {
@@ -286,17 +305,13 @@ function createSsrEntryCodeBundleOptions(options, target, sourceFileCache) {
     }
     // Mark manifest file as external. As this will be generated later on.
     (buildOptions.external ??= []).push('*/main.server.mjs', ...utils_1.SERVER_GENERATED_EXTERNALS);
-    buildOptions.plugins.push({
-        name: 'angular-ssr-metadata',
-        setup(build) {
-            build.onEnd((result) => {
-                if (result.metafile) {
-                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                    result.metafile['ng-ssr-entry-bundle'] = true;
-                }
-            });
-        },
-    }, (0, virtual_module_plugin_1.createVirtualModulePlugin)({
+    if (!isNodePlatform) {
+        // `@angular/platform-server` lazily depends on `xhr2` for XHR usage with the HTTP client.
+        // Since `xhr2` has Node.js dependencies, it cannot be used when targeting non-Node.js platforms.
+        // Note: The framework already issues a warning when using XHR with SSR.
+        buildOptions.external.push('xhr2');
+    }
+    buildOptions.plugins.push((0, server_bundle_metadata_plugin_1.createServerBundleMetadata)({ ssrEntryBundle: true }), (0, virtual_module_plugin_1.createVirtualModulePlugin)({
         namespace: ssrInjectRequireNamespace,
         cache: sourceFileCache?.loadResultCache,
         loadContent: () => {
@@ -357,9 +372,10 @@ function createSsrEntryCodeBundleOptions(options, target, sourceFileCache) {
     return buildOptions;
 }
 function getEsBuildServerCommonOptions(options) {
+    const isNodePlatform = options.ssrOptions?.platform !== schema_1.ExperimentalPlatform.Neutral;
     return {
         ...getEsBuildCommonOptions(options),
-        platform: 'node',
+        platform: isNodePlatform ? 'node' : 'neutral',
         outExtension: { '.js': '.mjs' },
         // Note: `es2015` is needed for RxJS v6. If not specified, `module` would
         // match and the ES5 distribution would be bundled and ends up breaking at
@@ -387,7 +403,12 @@ function getEsBuildCommonOptions(options) {
         bundle: true,
         packages: 'bundle',
         assetNames: outputNames.media,
-        conditions: ['es2020', 'es2015', 'module'],
+        conditions: [
+            'es2020',
+            'es2015',
+            'module',
+            optimizationOptions.scripts ? 'production' : 'development',
+        ],
         resolveExtensions: ['.ts', '.tsx', '.mjs', '.js', '.cjs'],
         metafile: true,
         legalComments: options.extractLicenses ? 'none' : 'eof',

package/src/tools/esbuild/bundler-context.js

@@ -211,6 +211,7 @@ class BundlerContext {
                 warnings: result.warnings,
             };
         }
+        const { 'ng-platform-server': isPlatformServer = false, 'ng-ssr-entry-bundle': isSsrEntryBundle = false, } = result.metafile;
         // Find all initial files
         const initialFiles = new Map();
         for (const outputFile of result.outputFiles) {
@@ -231,7 +232,7 @@ class BundlerContext {
                         name,
                         type,
                         entrypoint: true,
-                        serverFile: this.#platformIsServer,
+                        serverFile: isPlatformServer,
                         depth: 0,
                     };
                     if (!this.initialFilter || this.initialFilter(record)) {
@@ -259,7 +260,7 @@ class BundlerContext {
                         type: initialImport.kind === 'import-rule' ? 'style' : 'script',
                         entrypoint: false,
                         external: initialImport.external,
-                        serverFile: this.#platformIsServer,
+                        serverFile: isPlatformServer,
                         depth: entryRecord.depth + 1,
                     };
                     if (!this.initialFilter || this.initialFilter(record)) {
@@ -292,9 +293,8 @@ class BundlerContext {
             if (!/\.([cm]?js|css|wasm)(\.map)?$/i.test(file.path)) {
                 fileType = BuildOutputFileType.Media;
             }
-            else if (this.#platformIsServer) {
-                // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                fileType = result.metafile['ng-ssr-entry-bundle']
+            else if (isPlatformServer) {
+                fileType = isSsrEntryBundle
                     ? BuildOutputFileType.ServerRoot
                     : BuildOutputFileType.ServerApplication;
             }
@@ -304,7 +304,7 @@ class BundlerContext {
             return (0, utils_1.convertOutputFile)(file, fileType);
         });
         let externalConfiguration = this.#esbuildOptions.external;
-        if (this.#platformIsServer && externalConfiguration) {
+        if (isPlatformServer && externalConfiguration) {
             externalConfiguration = externalConfiguration.filter((dep) => !utils_1.SERVER_GENERATED_EXTERNALS.has(dep));
             if (!externalConfiguration.length) {
                 externalConfiguration = undefined;
@@ -316,7 +316,7 @@ class BundlerContext {
             outputFiles,
             initialFiles,
             externalImports: {
-                [this.#platformIsServer ? 'server' : 'browser']: externalImports,
+                [isPlatformServer ? 'server' : 'browser']: externalImports,
             },
             externalConfiguration,
             errors: undefined,
@@ -336,9 +336,6 @@ class BundlerContext {
             }
         }
     }
-    get #platformIsServer() {
-        return this.#esbuildOptions?.platform === 'node';
-    }
     /**
      * Invalidate a stored bundler result based on the previous watch files
      * and a list of changed files.

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

@@ -37,6 +37,9 @@ function createCompilerPluginOptions(options, target, sourceFileCache) {
             sourcemapOptions.styles && !sourcemapOptions.hidden ? 'linked' : false,
             outputNames,
             includePaths: stylePreprocessorOptions?.includePaths,
+            // string[] | undefined' is not assignable to type '(Version | DeprecationOrId)[] | undefined'.
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            sass: stylePreprocessorOptions?.sass,
             externalDependencies,
             target,
             inlineStyleLanguage,

package/src/tools/esbuild/global-scripts.js

@@ -72,7 +72,7 @@ function createGlobalScriptsBundleOptions(options, target, initial) {
             entryNames: initial ? outputNames.bundles : '[name]',
             assetNames: outputNames.media,
             mainFields: ['script', 'browser', 'main'],
-            conditions: ['script'],
+            conditions: ['script', optimizationOptions.scripts ? 'production' : 'development'],
             resolveExtensions: ['.mjs', '.js', '.cjs'],
             logLevel: options.verbose && !jsonLogs ? 'debug' : 'silent',
             metafile: true,

package/src/tools/esbuild/global-styles.js

@@ -45,6 +45,9 @@ function createGlobalStylesBundleOptions(options, target, initial) {
                     bundles: '[name]',
                 },
             includePaths: stylePreprocessorOptions?.includePaths,
+            // string[] | undefined' is not assignable to type '(Version | DeprecationOrId)[] | undefined'.
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            sass: stylePreprocessorOptions?.sass,
             tailwindConfiguration,
             postcssConfiguration,
             cacheOptions,

package/src/tools/esbuild/server-bundle-metadata-plugin.d.ts

@@ -0,0 +1,22 @@
+/**
+ * @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 'esbuild';
+/**
+ * Generates an esbuild plugin that appends metadata to the output bundle,
+ * marking it with server-side rendering (SSR) details for Angular SSR scenarios.
+ *
+ * @param options Optional configuration object.
+ * - `ssrEntryBundle`: If `true`, marks the bundle as an SSR entry point.
+ *
+ * @note We can't rely on `platform: node` or `platform: neutral`, as the latter
+ *       is used for non-SSR-related code too (e.g., global scripts).
+ * @returns An esbuild plugin that injects SSR metadata into the build result's metafile.
+ */
+export declare function createServerBundleMetadata(options?: {
+    ssrEntryBundle?: boolean;
+}): Plugin;

package/src/tools/esbuild/server-bundle-metadata-plugin.js

@@ -0,0 +1,36 @@
+"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.createServerBundleMetadata = createServerBundleMetadata;
+/**
+ * Generates an esbuild plugin that appends metadata to the output bundle,
+ * marking it with server-side rendering (SSR) details for Angular SSR scenarios.
+ *
+ * @param options Optional configuration object.
+ * - `ssrEntryBundle`: If `true`, marks the bundle as an SSR entry point.
+ *
+ * @note We can't rely on `platform: node` or `platform: neutral`, as the latter
+ *       is used for non-SSR-related code too (e.g., global scripts).
+ * @returns An esbuild plugin that injects SSR metadata into the build result's metafile.
+ */
+function createServerBundleMetadata(options) {
+    return {
+        name: 'angular-server-bundle-metadata',
+        setup(build) {
+            build.onEnd((result) => {
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                const metafile = result.metafile;
+                if (metafile) {
+                    metafile['ng-ssr-entry-bundle'] = !!options?.ssrEntryBundle;
+                    metafile['ng-platform-server'] = true;
+                }
+            });
+        },
+    };
+}

package/src/tools/esbuild/stylesheets/bundle-options.d.ts

@@ -9,6 +9,7 @@ import type { BuildOptions } from 'esbuild';
 import { NormalizedCachedOptions } from '../../../utils/normalize-cache';
 import { PostcssConfiguration } from '../../../utils/postcss-configuration';
 import { LoadResultCache } from '../load-result-cache';
+import { StylesheetPluginsass } from './stylesheet-plugin-factory';
 export interface BundleStylesheetOptions {
     workspaceRoot: string;
     optimization: boolean;
@@ -20,6 +21,7 @@ export interface BundleStylesheetOptions {
         media: string;
     };
     includePaths?: string[];
+    sass?: StylesheetPluginsass;
     externalDependencies?: string[];
     target: string[];
     tailwindConfiguration?: {

package/src/tools/esbuild/stylesheets/bundle-options.js

@@ -27,6 +27,7 @@ function createStylesheetBundleOptions(options, cache, inlineComponentData) {
         inlineComponentData,
         tailwindConfiguration: options.tailwindConfiguration,
         postcssConfiguration: options.postcssConfiguration,
+        sass: options.sass,
     }, cache);
     const plugins = [
         pluginFactory.create(sass_language_1.SassStylesheetLanguage),
@@ -53,7 +54,7 @@ function createStylesheetBundleOptions(options, cache, inlineComponentData) {
         preserveSymlinks: options.preserveSymlinks,
         external: options.externalDependencies,
         publicPath: options.publicPath,
-        conditions: ['style', 'sass', 'less'],
+        conditions: ['style', 'sass', 'less', options.optimization ? 'production' : 'development'],
         mainFields: ['style', 'sass'],
         // Unlike JS, CSS does not have implicit file extensions in the general case.
         // Preprocessor specific behavior is handled in each stylesheet language plugin.

package/src/tools/esbuild/stylesheets/sass-language.js

@@ -99,6 +99,7 @@ async function compileString(data, filePath, syntax, options, resolveUrl) {
     const resolutionCache = new cache_1.MemoryCache();
     const packageRootCache = new cache_1.MemoryCache();
     const warnings = [];
+    const { silenceDeprecations, futureDeprecations, fatalDeprecations } = options.sass ?? {};
     try {
         const { css, sourceMap, loadedUrls } = await sassWorkerPool.compileStringAsync(data, {
             url: (0, node_url_1.pathToFileURL)(filePath),
@@ -107,6 +108,9 @@ async function compileString(data, filePath, syntax, options, resolveUrl) {
             loadPaths: options.includePaths,
             sourceMap: options.sourcemap,
             sourceMapIncludeSources: options.sourcemap,
+            silenceDeprecations,
+            fatalDeprecations,
+            futureDeprecations,
             quietDeps: true,
             importers: [
                 {

package/src/tools/esbuild/stylesheets/stylesheet-plugin-factory.d.ts

@@ -6,8 +6,13 @@
  * found in the LICENSE file at https://angular.dev/license
  */
 import type { OnLoadResult, Plugin, PluginBuild } from 'esbuild';
+import type { Options } from 'sass';
 import type { PostcssConfiguration } from '../../../utils/postcss-configuration';
 import { LoadResultCache } from '../load-result-cache';
+/**
+ * Configuration options for handling Sass-specific deprecations in a stylesheet plugin.
+ */
+export type StylesheetPluginsass = Pick<Options<'async'>, 'futureDeprecations' | 'fatalDeprecations' | 'silenceDeprecations'>;
 /**
  * An object containing the plugin options to use when processing stylesheets.
  */
@@ -42,6 +47,10 @@ export interface StylesheetPluginOptions {
      * and any tailwind usage must be manually configured in the custom postcss usage.
      */
     postcssConfiguration?: PostcssConfiguration;
+    /**
+     * Optional Options for configuring Sass behavior.
+     */
+    sass?: StylesheetPluginsass;
 }
 export interface StylesheetLanguage {
     name: string;

package/src/tools/esbuild/utils.js

@@ -38,6 +38,7 @@ function logBuildStats(metafile, outputFiles, initial, budgetFailures, colors, c
     const browserStats = [];
     const serverStats = [];
     let unchangedCount = 0;
+    let componentStyleChange = false;
     for (const { path: file, size, type } of outputFiles) {
         // Only display JavaScript and CSS files
         if (!/\.(?:css|m?js)$/.test(file)) {
@@ -53,6 +54,11 @@ function logBuildStats(metafile, outputFiles, initial, budgetFailures, colors, c
             // Only log server build stats when SSR is enabled.
             continue;
         }
+        // Skip logging external component stylesheets used for HMR
+        if (metafile.outputs[file] && 'ng-component' in metafile.outputs[file]) {
+            componentStyleChange = true;
+            continue;
+        }
         const name = initial.get(file)?.name ?? getChunkNameFromMetafile(metafile, file);
         const stat = {
             initial: initial.has(file),
@@ -70,7 +76,12 @@ function logBuildStats(metafile, outputFiles, initial, budgetFailures, colors, c
         return tableText + '\n';
     }
     else if (changedFiles !== undefined) {
-        return '\nNo output file changes.\n';
+        if (componentStyleChange) {
+            return '\nComponent stylesheet(s) changed.\n';
+        }
+        else {
+            return '\nNo output file changes.\n';
+        }
     }
     if (unchangedCount > 0) {
         return `Unchanged output files: ${unchangedCount}`;

package/src/tools/sass/worker.js

@@ -40,6 +40,25 @@ async function renderSassStylesheet(request) {
                             containingUrl: containingUrl ? (0, node_url_1.fileURLToPath)(containingUrl) : null,
                         },
                     });
+                    // Wait for the main thread to set the signal to 1 and notify, which tells
+                    // us that a message can be received on the port.
+                    // If the main thread is fast, the signal will already be set to 1, and no
+                    // sleep/notify is necessary.
+                    // However, there can be a race condition here:
+                    // - the main thread sets the signal to 1, but does not get to the notify instruction yet
+                    // - the worker does not pause because the signal is set to 1
+                    // - the worker very soon enters this method again
+                    // - this method sets the signal to 0 and sends the message
+                    // - the signal is 0 and so the `Atomics.wait` call blocks
+                    // - only now the main thread runs the `notify` from the first invocation, so the
+                    //   worker continues.
+                    // - but there is no message yet in the port, because the thread should not have been
+                    //   waken up yet.
+                    // To combat this, wait for a non-0 value _twice_.
+                    // Almost every time, this immediately continues with "not-equal", because
+                    // the signal is still set to 1, except during the race condition, when the second
+                    // wait will wait for the correct notify.
+                    Atomics.wait(importerChannel.signal, 0, 0);
                     Atomics.wait(importerChannel.signal, 0, 0);
                     const result = (0, node_worker_threads_1.receiveMessageOnPort)(importerChannel.port)?.message;
                     return result ? (0, node_url_1.pathToFileURL)(result) : null;

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

@@ -7,4 +7,4 @@
  */
 import type { Connect, ViteDevServer } from 'vite';
 import { AngularMemoryOutputFiles } from '../utils';
-export declare function createAngularAssetsMiddleware(server: ViteDevServer, assets: Map<string, string>, outputFiles: AngularMemoryOutputFiles, usedComponentStyles: Map<string, string[]>): Connect.NextHandleFunction;
+export declare function createAngularAssetsMiddleware(server: ViteDevServer, assets: Map<string, string>, outputFiles: AngularMemoryOutputFiles, usedComponentStyles: Map<string, Set<string>>): Connect.NextHandleFunction;

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

@@ -67,10 +67,10 @@ function createAngularAssetsMiddleware(server, assets, outputFiles, usedComponen
                         // Record the component style usage for HMR updates
                         const usedIds = usedComponentStyles.get(pathname);
                         if (usedIds === undefined) {
-                            usedComponentStyles.set(pathname, [componentId]);
+                            usedComponentStyles.set(pathname, new Set([componentId]));
                         }
                         else {
-                            usedIds.push(componentId);
+                            usedIds.add(componentId);
                         }
                         // Shim the stylesheet if a component ID is provided
                         if (componentId.length > 0) {

package/src/tools/vite/middlewares/component-middleware.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 { Connect } from 'vite';
+export declare function createAngularComponentMiddleware(templateUpdates: ReadonlyMap<string, string>): Connect.NextHandleFunction;

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

@@ -0,0 +1,33 @@
+"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.createAngularComponentMiddleware = createAngularComponentMiddleware;
+const ANGULAR_COMPONENT_PREFIX = '/@ng/component';
+function createAngularComponentMiddleware(templateUpdates) {
+    return function angularComponentMiddleware(req, res, next) {
+        if (req.url === undefined || res.writableEnded) {
+            return;
+        }
+        if (!req.url.startsWith(ANGULAR_COMPONENT_PREFIX)) {
+            next();
+            return;
+        }
+        const requestUrl = new URL(req.url, 'http://localhost');
+        const componentId = requestUrl.searchParams.get('c');
+        if (!componentId) {
+            res.statusCode = 400;
+            res.end();
+            return;
+        }
+        const updateCode = templateUpdates.get(componentId) ?? '';
+        res.setHeader('Content-Type', 'text/javascript');
+        res.setHeader('Cache-Control', 'no-cache');
+        res.end(updateCode);
+    };
+}

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

@@ -10,3 +10,4 @@ export { angularHtmlFallbackMiddleware } from './html-fallback-middleware';
 export { createAngularIndexHtmlMiddleware } from './index-html-middleware';
 export { createAngularSsrExternalMiddleware, createAngularSsrInternalMiddleware, } from './ssr-middleware';
 export { createAngularHeadersMiddleware } from './headers-middleware';
+export { createAngularComponentMiddleware } from './component-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.createAngularSsrInternalMiddleware = exports.createAngularSsrExternalMiddleware = exports.createAngularIndexHtmlMiddleware = exports.angularHtmlFallbackMiddleware = exports.createAngularAssetsMiddleware = void 0;
+exports.createAngularComponentMiddleware = 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");
@@ -19,3 +19,5 @@ Object.defineProperty(exports, "createAngularSsrExternalMiddleware", { enumerabl
 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; } });
+var component_middleware_1 = require("./component-middleware");
+Object.defineProperty(exports, "createAngularComponentMiddleware", { enumerable: true, get: function () { return component_middleware_1.createAngularComponentMiddleware; } });

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

@@ -53,11 +53,11 @@ async function createAngularSsrExternalMiddleware(server, indexHtmlTransformer)
     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)) {
+            const { reqHandler, AngularAppEngine } = (await server.ssrLoadModule('./server.mjs'));
+            if (!(0, utils_1.isSsrNodeRequestHandler)(reqHandler) && !(0, utils_1.isSsrRequestHandler)(reqHandler)) {
                 if (!fallbackWarningShown) {
                     // eslint-disable-next-line no-console
-                    console.warn(`The default export in 'server.ts' does not provide a Node.js request handler. ` +
+                    console.warn(`The 'reqHandler' export in 'server.ts' is either undefined or does not provide a recognized request handler. ` +
                         'Using the internal SSR middleware instead.');
                     fallbackWarningShown = true;
                 }
@@ -73,11 +73,11 @@ async function createAngularSsrExternalMiddleware(server, indexHtmlTransformer)
                 cachedAngularAppEngine = AngularAppEngine;
             }
             // Forward the request to the middleware in server.ts
-            if ((0, utils_1.isSsrNodeRequestHandler)(handler)) {
-                await handler(req, res, next);
+            if ((0, utils_1.isSsrNodeRequestHandler)(reqHandler)) {
+                await reqHandler(req, res, next);
             }
             else {
-                const webRes = await handler(createWebRequestFromNodeRequest(req));
+                const webRes = await reqHandler(createWebRequestFromNodeRequest(req));
                 if (!webRes) {
                     next();
                     return;

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

@@ -34,7 +34,8 @@ interface AngularSetupMiddlewaresPluginOptions {
     assets: Map<string, string>;
     extensionMiddleware?: Connect.NextHandleFunction[];
     indexHtmlTransformer?: (content: string) => Promise<string>;
-    usedComponentStyles: Map<string, string[]>;
+    usedComponentStyles: Map<string, Set<string>>;
+    templateUpdates: Map<string, string>;
     ssrMode: ServerSsrMode;
 }
 export declare function createAngularSetupMiddlewaresPlugin(options: AngularSetupMiddlewaresPluginOptions): Plugin;

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

@@ -38,9 +38,10 @@ function createAngularSetupMiddlewaresPlugin(options) {
         name: 'vite:angular-setup-middlewares',
         enforce: 'pre',
         configureServer(server) {
-            const { indexHtmlTransformer, outputFiles, extensionMiddleware, assets, usedComponentStyles, ssrMode, } = options;
+            const { indexHtmlTransformer, outputFiles, extensionMiddleware, assets, usedComponentStyles, templateUpdates, ssrMode, } = options;
             // Headers, assets and resources get handled first
             server.middlewares.use((0, middlewares_1.createAngularHeadersMiddleware)(server));
+            server.middlewares.use((0, middlewares_1.createAngularComponentMiddleware)(templateUpdates));
             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

package/src/utils/environment-options.js

@@ -83,6 +83,6 @@ exports.useJSONBuildLogs = isPresent(buildLogsJsonVariable) && isEnabled(buildLo
 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);
+exports.useComponentStyleHmr = !isPresent(hmrComponentStylesVariable) || !isDisabled(hmrComponentStylesVariable);
 const partialSsrBuildVariable = process.env['NG_BUILD_PARTIAL_SSR'];
 exports.usePartialSsrBuild = isPresent(partialSsrBuildVariable) && isEnabled(partialSsrBuildVariable);

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.10';
+const VERSION = '19.0.0-next.11';
 function hasCacheMetadata(value) {
     return (!!value &&
         typeof value === 'object' &&