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

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/i18n-inliner.js

@@ -12,7 +12,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.I18nInliner = void 0;
 const node_assert_1 = __importDefault(require("node:assert"));
-const piscina_1 = __importDefault(require("piscina"));
+const worker_pool_1 = require("../../utils/worker-pool");
 const bundler_context_1 = require("./bundler-context");
 const utils_1 = require("./utils");
 /**
@@ -36,7 +36,8 @@ class I18nInliner {
         const files = new Map();
         const pendingMaps = [];
         for (const file of options.outputFiles) {
-            if (file.type === bundler_context_1.BuildOutputFileType.Root) {
+            if (file.type === bundler_context_1.BuildOutputFileType.Root || file.type === bundler_context_1.BuildOutputFileType.ServerRoot) {
+                // Skip also the server entry-point.
                 // Skip stats and similar files.
                 continue;
             }
@@ -74,7 +75,7 @@ class I18nInliner {
             }
         }
         this.#localizeFiles = files;
-        this.#workerPool = new piscina_1.default({
+        this.#workerPool = new worker_pool_1.WorkerPool({
             filename: require.resolve('./i18n-inliner-worker'),
             maxThreads,
             // Extract options to ensure only the named options are serialized and sent to the worker
@@ -83,7 +84,6 @@ class I18nInliner {
                 shouldOptimize: options.shouldOptimize,
                 files,
             },
-            recordTiming: false,
         });
     }
     /**

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

@@ -6,14 +6,11 @@
  * 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.JavaScriptTransformer = void 0;
 const node_crypto_1 = require("node:crypto");
 const promises_1 = require("node:fs/promises");
-const piscina_1 = __importDefault(require("piscina"));
+const worker_pool_1 = require("../../utils/worker-pool");
 /**
  * A class that performs transformation of JavaScript files and raw data.
  * A worker pool is used to distribute the transformation actions and allow
@@ -41,13 +38,9 @@ class JavaScriptTransformer {
         this.#fileCacheKeyBase = Buffer.from(JSON.stringify(this.#commonOptions), 'utf-8');
     }
     #ensureWorkerPool() {
-        this.#workerPool ??= new piscina_1.default({
+        this.#workerPool ??= new worker_pool_1.WorkerPool({
             filename: require.resolve('./javascript-transformer-worker'),
-            minThreads: 1,
             maxThreads: this.maxThreads,
-            // Shutdown idle threads after 1 second of inactivity
-            idleTimeout: 1000,
-            recordTiming: false,
         });
         return this.#workerPool;
     }
@@ -59,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;
@@ -86,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
@@ -113,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');
@@ -126,6 +120,7 @@ class JavaScriptTransformer {
             data,
             skipLinker,
             sideEffects,
+            instrumentForCoverage,
             ...this.#commonOptions,
         });
     }

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.d.ts

@@ -47,3 +47,12 @@ export declare function logMessages(logger: BuilderContext['logger'], executionR
  */
 export declare function isZonelessApp(polyfills: string[] | undefined): boolean;
 export declare function getEntryPointName(entryPoint: string): string;
+/**
+ * A set of server-generated dependencies that are treated as external.
+ *
+ * These dependencies are marked as external because they are produced by a
+ * separate bundling process and are not included in the primary bundle. This
+ * ensures that these generated files are resolved from an external source rather
+ * than being part of the main bundle.
+ */
+export declare const SERVER_GENERATED_EXTERNALS: Set<string>;

package/src/tools/esbuild/utils.js

@@ -7,6 +7,7 @@
  * found in the LICENSE file at https://angular.dev/license
  */
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.SERVER_GENERATED_EXTERNALS = void 0;
 exports.logBuildStats = logBuildStats;
 exports.getChunkNameFromMetafile = getChunkNameFromMetafile;
 exports.calculateEstimatedTransferSizes = calculateEstimatedTransferSizes;
@@ -29,12 +30,15 @@ const node_path_1 = require("node:path");
 const node_url_1 = require("node:url");
 const node_zlib_1 = require("node:zlib");
 const semver_1 = require("semver");
+const schema_1 = require("../../builders/application/schema");
+const manifest_1 = require("../../utils/server-rendering/manifest");
 const stats_table_1 = require("../../utils/stats-table");
 const bundler_context_1 = require("./bundler-context");
 function logBuildStats(metafile, outputFiles, initial, budgetFailures, colors, changedFiles, estimatedTransferSizes, ssrOutputEnabled, verbose) {
     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)) {
@@ -45,11 +49,16 @@ function logBuildStats(metafile, outputFiles, initial, budgetFailures, colors, c
             ++unchangedCount;
             continue;
         }
-        const isPlatformServer = type === bundler_context_1.BuildOutputFileType.Server;
+        const isPlatformServer = type === bundler_context_1.BuildOutputFileType.ServerApplication || type === bundler_context_1.BuildOutputFileType.ServerRoot;
         if (isPlatformServer && !ssrOutputEnabled) {
             // 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),
@@ -67,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}`;
@@ -340,7 +354,7 @@ function getSupportedNodeTargets() {
     return SUPPORTED_NODE_VERSIONS.split('||').map((v) => 'node' + (0, semver_1.coerce)(v)?.version);
 }
 async function createJsonBuildManifest(result, normalizedOptions) {
-    const { colors: color, outputOptions: { base, server, browser }, ssrOptions, } = normalizedOptions;
+    const { colors: color, outputOptions: { base, server, browser }, ssrOptions, outputMode, } = normalizedOptions;
     const { warnings, errors, prerenderedRoutes } = result;
     const manifest = {
         errors: errors.length ? await (0, esbuild_1.formatMessages)(errors, { kind: 'error', color }) : [],
@@ -348,7 +362,9 @@ async function createJsonBuildManifest(result, normalizedOptions) {
         outputPaths: {
             root: (0, node_url_1.pathToFileURL)(base),
             browser: (0, node_url_1.pathToFileURL)((0, node_path_1.join)(base, browser)),
-            server: ssrOptions ? (0, node_url_1.pathToFileURL)((0, node_path_1.join)(base, server)) : undefined,
+            server: outputMode !== schema_1.OutputMode.Static && ssrOptions
+                ? (0, node_url_1.pathToFileURL)((0, node_path_1.join)(base, server))
+                : undefined,
         },
         prerenderedRoutes,
     };
@@ -385,3 +401,16 @@ function getEntryPointName(entryPoint) {
         .replace(/\.[cm]?[jt]s$/, '')
         .replace(/[\\/.]/g, '-');
 }
+/**
+ * A set of server-generated dependencies that are treated as external.
+ *
+ * These dependencies are marked as external because they are produced by a
+ * separate bundling process and are not included in the primary bundle. This
+ * ensures that these generated files are resolved from an external source rather
+ * than being part of the main bundle.
+ */
+exports.SERVER_GENERATED_EXTERNALS = new Set([
+    './polyfills.server.mjs',
+    './' + manifest_1.SERVER_APP_MANIFEST_FILENAME,
+    './' + manifest_1.SERVER_APP_ENGINE_MANIFEST_FILENAME,
+]);

package/src/tools/sass/sass-service.js

@@ -34,17 +34,22 @@ var __disposeResources = (this && this.__disposeResources) || (function (Suppres
             env.error = env.hasError ? new SuppressedError(e, env.error, "An error was suppressed during disposal.") : e;
             env.hasError = true;
         }
+        var r, s = 0;
         function next() {
-            while (env.stack.length) {
-                var rec = env.stack.pop();
+            while (r = env.stack.pop()) {
                 try {
-                    var result = rec.dispose && rec.dispose.call(rec.value);
-                    if (rec.async) return Promise.resolve(result).then(next, function(e) { fail(e); return next(); });
+                    if (!r.async && s === 1) return s = 0, env.stack.push(r), Promise.resolve().then(next);
+                    if (r.dispose) {
+                        var result = r.dispose.call(r.value);
+                        if (r.async) return s |= 2, Promise.resolve(result).then(next, function(e) { fail(e); return next(); });
+                    }
+                    else s |= 1;
                 }
                 catch (e) {
                     fail(e);
                 }
             }
+            if (s === 1) return env.hasError ? Promise.reject(env.error) : Promise.resolve();
             if (env.hasError) throw env.error;
         }
         return next();
@@ -61,8 +66,8 @@ exports.SassWorkerImplementation = void 0;
 const node_assert_1 = __importDefault(require("node:assert"));
 const node_url_1 = require("node:url");
 const node_worker_threads_1 = require("node:worker_threads");
-const piscina_1 = require("piscina");
 const environment_options_1 = require("../../utils/environment-options");
+const worker_pool_1 = require("../../utils/worker-pool");
 // Polyfill Symbol.dispose if not present
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 Symbol.dispose ??= Symbol('Symbol Dispose');
@@ -85,16 +90,9 @@ class SassWorkerImplementation {
         this.maxThreads = maxThreads;
     }
     #ensureWorkerPool() {
-        this.#workerPool ??= new piscina_1.Piscina({
+        this.#workerPool ??= new worker_pool_1.WorkerPool({
             filename: require.resolve('./worker'),
-            minThreads: 1,
             maxThreads: this.maxThreads,
-            // Web containers do not support transferable objects with receiveOnMessagePort which
-            // is used when the Atomics based wait loop is enable.
-            useAtomics: !process.versions.webcontainer,
-            // Shutdown idle threads after 1 second of inactivity
-            idleTimeout: 1000,
-            recordTiming: false,
         });
         return this.#workerPool;
     }

package/src/tools/sass/worker.d.ts

@@ -5,6 +5,7 @@
  * 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 { RawSourceMap } from '@ampproject/remapping';
 import { MessagePort } from 'node:worker_threads';
 import { SourceSpan, StringOptions } from 'sass';
 import type { SerializableWarningMessage } from './sass-service';
@@ -38,45 +39,25 @@ interface RenderRequestMessage {
      */
     rebase: boolean;
 }
-export default function renderSassStylesheet(request: RenderRequestMessage): Promise<{
+interface RenderResult {
     warnings: SerializableWarningMessage[] | undefined;
     result: {
-        loadedUrls: string[];
         css: string;
-        sourceMap?: import("source-map-js").RawSourceMap;
+        loadedUrls: string[];
+        sourceMap?: RawSourceMap;
     };
-    error?: undefined;
-} | {
+}
+interface RenderError {
     warnings: SerializableWarningMessage[] | undefined;
     error: {
-        span: Omit<SourceSpan, "url"> & {
+        message: string;
+        stack?: string;
+        span?: Omit<SourceSpan, 'url'> & {
             url?: string;
         };
-        message: string;
-        stack: string | undefined;
-        sassMessage: string;
-        sassStack: string;
-    };
-    result?: undefined;
-} | {
-    warnings: SerializableWarningMessage[] | undefined;
-    error: {
-        message: string;
-        stack: string | undefined;
-        span?: undefined;
-        sassMessage?: undefined;
-        sassStack?: undefined;
+        sassMessage?: string;
+        sassStack?: string;
     };
-    result?: undefined;
-} | {
-    warnings: SerializableWarningMessage[] | undefined;
-    error: {
-        message: string;
-        span?: undefined;
-        stack?: undefined;
-        sassMessage?: undefined;
-        sassStack?: undefined;
-    };
-    result?: undefined;
-}>;
+}
+export default function renderSassStylesheet(request: RenderRequestMessage): Promise<RenderResult | RenderError>;
 export {};

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;
@@ -95,6 +114,7 @@ async function renderSassStylesheet(request) {
             warnings,
             result: {
                 ...result,
+                sourceMap: result.sourceMap,
                 // URL is not serializable so to convert to string here and back to URL in the parent.
                 loadedUrls: result.loadedUrls.map((p) => (0, node_url_1.fileURLToPath)(p)),
             },

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): 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

@@ -10,9 +10,10 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.createAngularAssetsMiddleware = createAngularAssetsMiddleware;
 const mrmime_1 = require("mrmime");
 const node_path_1 = require("node:path");
+const load_esm_1 = require("../../../utils/load-esm");
 const utils_1 = require("../utils");
-function createAngularAssetsMiddleware(server, assets, outputFiles) {
-    return function (req, res, next) {
+function createAngularAssetsMiddleware(server, assets, outputFiles, usedComponentStyles) {
+    return function angularAssetsMiddleware(req, res, next) {
         if (req.url === undefined || res.writableEnded) {
             return;
         }
@@ -47,19 +48,57 @@ function createAngularAssetsMiddleware(server, assets, outputFiles) {
             next();
             return;
         }
+        // Support HTTP HEAD requests for the virtual output files from the Angular build
+        if (req.method === 'HEAD' && outputFiles.get(pathname)?.servable) {
+            // While a GET will also generate content, the rest of the response is equivalent
+            req.method = 'GET';
+        }
         // Resource files are handled directly.
         // Global stylesheets (CSS files) are currently considered resources to workaround
         // dev server sourcemap issues with stylesheets.
         if (extension !== '.js' && extension !== '.html') {
             const outputFile = outputFiles.get(pathname);
             if (outputFile?.servable) {
+                const data = outputFile.contents;
+                if (extension === '.css') {
+                    // Inject component ID for view encapsulation if requested
+                    const componentId = new URL(req.url, 'http://localhost').searchParams.get('ngcomp');
+                    if (componentId !== null) {
+                        // Record the component style usage for HMR updates
+                        const usedIds = usedComponentStyles.get(pathname);
+                        if (usedIds === undefined) {
+                            usedComponentStyles.set(pathname, new Set([componentId]));
+                        }
+                        else {
+                            usedIds.add(componentId);
+                        }
+                        // Shim the stylesheet if a component ID is provided
+                        if (componentId.length > 0) {
+                            // Validate component ID
+                            if (/^[_.\-\p{Letter}\d]+-c\d{9}$/u.test(componentId)) {
+                                (0, load_esm_1.loadEsmModule)('@angular/compiler')
+                                    .then((compilerModule) => {
+                                    const encapsulatedData = compilerModule.encapsulateStyle(new TextDecoder().decode(data), componentId);
+                                    res.setHeader('Content-Type', 'text/css');
+                                    res.setHeader('Cache-Control', 'no-cache');
+                                    res.end(encapsulatedData);
+                                })
+                                    .catch((e) => next(e));
+                                return;
+                            }
+                            else {
+                                // eslint-disable-next-line no-console
+                                console.error('Invalid component stylesheet ID request: ' + componentId);
+                            }
+                        }
+                    }
+                }
                 const mimeType = (0, mrmime_1.lookup)(extension);
                 if (mimeType) {
                     res.setHeader('Content-Type', mimeType);
                 }
                 res.setHeader('Cache-Control', 'no-cache');
-                (0, utils_1.appendServerConfiguredHeaders)(server, res);
-                res.end(outputFile.contents);
+                res.end(data);
                 return;
             }
         }

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;