@angular/build 19.0.0-next.9 → 19.0.0-rc.1

package/src/tools/esbuild/bundler-context.d.ts

@@ -58,10 +58,11 @@ export declare class BundlerContext {
      * All builds use the `write` option with a value of `false` to allow for the output files
      * build result array to be populated.
      *
+     * @param force If true, always rebundle.
      * @returns If output files are generated, the full esbuild BuildResult; if not, the
      * warnings and errors for the attempted build.
      */
-    bundle(): Promise<BundleContextResult>;
+    bundle(force?: boolean): Promise<BundleContextResult>;
     /**
      * Invalidate a stored bundler result based on the previous watch files
      * and a list of changed files.

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

@@ -125,12 +125,13 @@ class BundlerContext {
      * All builds use the `write` option with a value of `false` to allow for the output files
      * build result array to be populated.
      *
+     * @param force If true, always rebundle.
      * @returns If output files are generated, the full esbuild BuildResult; if not, the
      * warnings and errors for the attempted build.
      */
-    async bundle() {
+    async bundle(force) {
         // Return existing result if present
-        if (this.#esbuildResult) {
+        if (!force && this.#esbuildResult) {
             return this.#esbuildResult;
         }
         const result = await this.#performBundle();
@@ -211,6 +212,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 +233,7 @@ class BundlerContext {
                         name,
                         type,
                         entrypoint: true,
-                        serverFile: this.#platformIsServer,
+                        serverFile: isPlatformServer,
                         depth: 0,
                     };
                     if (!this.initialFilter || this.initialFilter(record)) {
@@ -259,7 +261,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 +294,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 +305,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 +317,7 @@ class BundlerContext {
             outputFiles,
             initialFiles,
             externalImports: {
-                [this.#platformIsServer ? 'server' : 'browser']: externalImports,
+                [isPlatformServer ? 'server' : 'browser']: externalImports,
             },
             externalConfiguration,
             errors: undefined,
@@ -336,9 +337,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/bundler-execution-result.d.ts

@@ -7,6 +7,7 @@
  */
 import type { Message, PartialMessage } from 'esbuild';
 import type { ChangedFiles } from '../../tools/esbuild/watcher';
+import type { ComponentStylesheetBundler } from './angular/component-stylesheets';
 import type { SourceFileCache } from './angular/source-file-cache';
 import type { BuildOutputFile, BuildOutputFileType, BundlerContext } from './bundler-context';
 export interface BuildOutputAsset {
@@ -14,10 +15,15 @@ export interface BuildOutputAsset {
     destination: string;
 }
 export interface RebuildState {
-    rebuildContexts: BundlerContext[];
+    rebuildContexts: {
+        typescriptContexts: BundlerContext[];
+        otherContexts: BundlerContext[];
+    };
+    componentStyleBundler: ComponentStylesheetBundler;
     codeBundleCache?: SourceFileCache;
     fileChanges: ChangedFiles;
     previousOutputHashes: Map<string, string>;
+    templateUpdates?: Map<string, string>;
 }
 export interface ExternalResultMetadata {
     implicitBrowser: string[];
@@ -32,7 +38,9 @@ export type PrerenderedRoutesRecord = Record<string, {
  */
 export declare class ExecutionResult {
     private rebuildContexts;
+    private componentStyleBundler;
     private codeBundleCache?;
+    readonly templateUpdates?: Map<string, string> | undefined;
     outputFiles: BuildOutputFile[];
     assetFiles: BuildOutputAsset[];
     errors: (Message | PartialMessage)[];
@@ -43,7 +51,10 @@ export declare class ExecutionResult {
     extraWatchFiles: string[];
     htmlIndexPath?: string;
     htmlBaseHref?: string;
-    constructor(rebuildContexts: BundlerContext[], codeBundleCache?: SourceFileCache | undefined);
+    constructor(rebuildContexts: {
+        typescriptContexts: BundlerContext[];
+        otherContexts: BundlerContext[];
+    }, componentStyleBundler: ComponentStylesheetBundler, codeBundleCache?: SourceFileCache | undefined, templateUpdates?: Map<string, string> | undefined);
     addOutputFile(path: string, content: string | Uint8Array, type: BuildOutputFileType): void;
     addAssets(assets: BuildOutputAsset[]): void;
     addLog(value: string): void;
@@ -67,7 +78,7 @@ export declare class ExecutionResult {
         success: boolean;
         outputFiles: BuildOutputFile[];
         assetFiles: BuildOutputAsset[];
-        errors: (Message | PartialMessage)[];
+        errors: (PartialMessage | Message)[];
         externalMetadata: ExternalResultMetadata | undefined;
     };
     get watchFiles(): string[];

package/src/tools/esbuild/bundler-execution-result.js

@@ -15,7 +15,9 @@ const utils_1 = require("./utils");
  */
 class ExecutionResult {
     rebuildContexts;
+    componentStyleBundler;
     codeBundleCache;
+    templateUpdates;
     outputFiles = [];
     assetFiles = [];
     errors = [];
@@ -26,9 +28,11 @@ class ExecutionResult {
     extraWatchFiles = [];
     htmlIndexPath;
     htmlBaseHref;
-    constructor(rebuildContexts, codeBundleCache) {
+    constructor(rebuildContexts, componentStyleBundler, codeBundleCache, templateUpdates) {
         this.rebuildContexts = rebuildContexts;
+        this.componentStyleBundler = componentStyleBundler;
         this.codeBundleCache = codeBundleCache;
+        this.templateUpdates = templateUpdates;
     }
     addOutputFile(path, content, type) {
         this.outputFiles.push((0, utils_1.createOutputFile)(path, content, type));
@@ -100,25 +104,24 @@ class ExecutionResult {
     }
     get watchFiles() {
         // Bundler contexts internally normalize file dependencies
-        const files = this.rebuildContexts.flatMap((context) => [...context.watchFiles]);
+        const files = this.rebuildContexts.typescriptContexts
+            .flatMap((context) => [...context.watchFiles])
+            .concat(this.rebuildContexts.otherContexts.flatMap((context) => [...context.watchFiles]));
         if (this.codeBundleCache?.referencedFiles) {
             // These files originate from TS/NG and can have POSIX path separators even on Windows.
             // To ensure path comparisons are valid, all these paths must be normalized.
             files.push(...this.codeBundleCache.referencedFiles.map(node_path_1.normalize));
         }
-        if (this.codeBundleCache?.loadResultCache) {
-            // Load result caches internally normalize file dependencies
-            files.push(...this.codeBundleCache.loadResultCache.watchFiles);
-        }
         return files.concat(this.extraWatchFiles);
     }
     createRebuildState(fileChanges) {
-        this.codeBundleCache?.invalidate([...fileChanges.modified, ...fileChanges.removed]);
         return {
             rebuildContexts: this.rebuildContexts,
             codeBundleCache: this.codeBundleCache,
+            componentStyleBundler: this.componentStyleBundler,
             fileChanges,
             previousOutputHashes: new Map(this.outputFiles.map((file) => [file.path, file.hash])),
+            templateUpdates: this.templateUpdates,
         };
     }
     findChangedFiles(previousOutputHashes) {
@@ -132,7 +135,11 @@ class ExecutionResult {
         return changed;
     }
     async dispose() {
-        await Promise.allSettled(this.rebuildContexts.map((context) => context.dispose()));
+        await Promise.allSettled([
+            ...this.rebuildContexts.typescriptContexts.map((context) => context.dispose()),
+            ...this.rebuildContexts.otherContexts.map((context) => context.dispose()),
+            this.componentStyleBundler.dispose(),
+        ]);
     }
 }
 exports.ExecutionResult = ExecutionResult;

package/src/tools/esbuild/commonjs-checker.js

@@ -42,9 +42,9 @@ function checkCommonJSModules(metafile, allowedCommonJsDependencies) {
     // using `provideHttpClient(withFetch())`.
     allowedRequests.add('xhr2');
     // Packages used by @angular/ssr.
-    // While critters is ESM it has a number of direct and transtive CJS deps.
+    // While beasties is ESM it has a number of direct and transtive CJS deps.
     allowedRequests.add('express');
-    allowedRequests.add('critters');
+    allowedRequests.add('beasties');
     // Find all entry points that contain code (JS/TS)
     const files = [];
     for (const { entryPoint } of Object.values(metafile.outputs)) {

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

@@ -8,9 +8,7 @@
 import { NormalizedApplicationBuildOptions } from '../../builders/application/options';
 import type { createCompilerPlugin } from './angular/compiler-plugin';
 import type { SourceFileCache } from './angular/source-file-cache';
+import type { LoadResultCache } from './load-result-cache';
 type CreateCompilerPluginParameters = Parameters<typeof createCompilerPlugin>;
-export declare function createCompilerPluginOptions(options: NormalizedApplicationBuildOptions, target: string[], sourceFileCache?: SourceFileCache): {
-    pluginOptions: CreateCompilerPluginParameters[0];
-    styleOptions: CreateCompilerPluginParameters[1];
-};
+export declare function createCompilerPluginOptions(options: NormalizedApplicationBuildOptions, sourceFileCache: SourceFileCache, loadResultCache?: LoadResultCache, templateUpdates?: Map<string, string>): CreateCompilerPluginParameters[0];
 export {};

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

@@ -8,43 +8,21 @@
  */
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.createCompilerPluginOptions = createCompilerPluginOptions;
-function createCompilerPluginOptions(options, target, sourceFileCache) {
-    const { workspaceRoot, optimizationOptions, sourcemapOptions, tsconfig, outputNames, fileReplacements, externalDependencies, preserveSymlinks, stylePreprocessorOptions, advancedOptimizations, inlineStyleLanguage, jit, cacheOptions, tailwindConfiguration, postcssConfiguration, publicPath, externalRuntimeStyles, instrumentForCoverage, } = options;
+function createCompilerPluginOptions(options, sourceFileCache, loadResultCache, templateUpdates) {
+    const { sourcemapOptions, tsconfig, fileReplacements, advancedOptimizations, jit, externalRuntimeStyles, instrumentForCoverage, } = options;
+    const incremental = !!options.watch;
     return {
-        // JS/TS options
-        pluginOptions: {
-            sourcemap: !!sourcemapOptions.scripts && (sourcemapOptions.hidden ? 'external' : true),
-            thirdPartySourcemaps: sourcemapOptions.vendor,
-            tsconfig,
-            jit,
-            advancedOptimizations,
-            fileReplacements,
-            sourceFileCache,
-            loadResultCache: sourceFileCache?.loadResultCache,
-            incremental: !!options.watch,
-            externalRuntimeStyles,
-            instrumentForCoverage,
-        },
-        // Component stylesheet options
-        styleOptions: {
-            workspaceRoot,
-            inlineFonts: !!optimizationOptions.fonts.inline,
-            optimization: !!optimizationOptions.styles.minify,
-            sourcemap: 
-            // Hidden component stylesheet sourcemaps are inaccessible which is effectively
-            // the same as being disabled. Disabling has the advantage of avoiding the overhead
-            // of sourcemap processing.
-            sourcemapOptions.styles && !sourcemapOptions.hidden ? 'linked' : false,
-            outputNames,
-            includePaths: stylePreprocessorOptions?.includePaths,
-            externalDependencies,
-            target,
-            inlineStyleLanguage,
-            preserveSymlinks,
-            tailwindConfiguration,
-            postcssConfiguration,
-            cacheOptions,
-            publicPath,
-        },
+        sourcemap: !!sourcemapOptions.scripts && (sourcemapOptions.hidden ? 'external' : true),
+        thirdPartySourcemaps: sourcemapOptions.vendor,
+        tsconfig,
+        jit,
+        advancedOptimizations,
+        fileReplacements,
+        sourceFileCache,
+        loadResultCache,
+        incremental,
+        externalRuntimeStyles,
+        instrumentForCoverage,
+        templateUpdates,
     };
 }

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,12 +45,15 @@ 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,
         }, loadCache);
         // Keep special CSS comments `/*! comment */` in place when `removeSpecialComments` is disabled.
-        // These comments are special for a number of CSS tools such as Critters and PurgeCSS.
+        // These comments are special for a number of CSS tools such as Beasties and PurgeCSS.
         buildOptions.legalComments = optimizationOptions.styles?.removeSpecialComments
             ? 'none'
             : 'inline';

package/src/tools/esbuild/index-html-generator.js

@@ -59,6 +59,13 @@ async function generateIndexHtml(initialFiles, outputFiles, buildOptions, lang)
         }
         throw new Error(`Output file does not exist: ${relativefilePath}`);
     };
+    // Read the Auto CSP options.
+    const autoCsp = buildOptions.security?.autoCsp;
+    const autoCspOptions = autoCsp === true
+        ? { unsafeEval: false }
+        : autoCsp
+            ? { unsafeEval: !!autoCsp.unsafeEval }
+            : undefined;
     // Create an index HTML generator that reads from the in-memory output files
     const indexHtmlGenerator = new index_html_generator_1.IndexHtmlGenerator({
         indexPath: indexHtmlOptions.input,
@@ -71,6 +78,7 @@ async function generateIndexHtml(initialFiles, outputFiles, buildOptions, lang)
         generateDedicatedSSRContent: !!(buildOptions.ssrOptions ||
             buildOptions.prerenderOptions ||
             buildOptions.appShellOptions),
+        autoCsp: autoCspOptions,
     });
     indexHtmlGenerator.readAsset = readAsset;
     return indexHtmlGenerator.process({

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

@@ -10,6 +10,7 @@ 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 utils_1 = require("../../utils/server-rendering/esm-in-memory-loader/utils");
 const worker_pool_1 = require("../../utils/worker-pool");
 /**
  * A class that performs transformation of JavaScript files and raw data.
@@ -41,6 +42,8 @@ class JavaScriptTransformer {
         this.#workerPool ??= new worker_pool_1.WorkerPool({
             filename: require.resolve('./javascript-transformer-worker'),
             maxThreads: this.maxThreads,
+            // Prevent passing `--import` (loader-hooks) from parent to child worker.
+            execArgv: process.execArgv.filter((v) => v !== utils_1.IMPORT_EXEC_ARGV),
         });
         return this.#workerPool;
     }

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.
+ *
+ * @remarks 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.
+ *
+ * @remarks 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}`;
@@ -144,7 +155,7 @@ async function withNoProgress(text, action) {
  * @returns An object that can be used with the esbuild build `supported` option.
  */
 function getFeatureSupport(target, nativeAsyncAwait) {
-    const supported = {
+    return {
         // Native async/await is not supported with Zone.js. Disabling support here will cause
         // esbuild to downlevel async/await, async generators, and for await...of to a Zone.js supported form.
         'async-await': nativeAsyncAwait,
@@ -154,35 +165,6 @@ function getFeatureSupport(target, nativeAsyncAwait) {
         // For more details: https://bugs.chromium.org/p/v8/issues/detail?id=11536
         'object-rest-spread': false,
     };
-    // Detect Safari browser versions that have a class field behavior bug
-    // See: https://github.com/angular/angular-cli/issues/24355#issuecomment-1333477033
-    // See: https://github.com/WebKit/WebKit/commit/e8788a34b3d5f5b4edd7ff6450b80936bff396f2
-    let safariClassFieldScopeBug = false;
-    for (const browser of target) {
-        let majorVersion;
-        if (browser.startsWith('ios')) {
-            majorVersion = Number(browser.slice(3, 5));
-        }
-        else if (browser.startsWith('safari')) {
-            majorVersion = Number(browser.slice(6, 8));
-        }
-        else {
-            continue;
-        }
-        // Technically, 14.0 is not broken but rather does not have support. However, the behavior
-        // is identical since it would be set to false by esbuild if present as a target.
-        if (majorVersion === 14 || majorVersion === 15) {
-            safariClassFieldScopeBug = true;
-            break;
-        }
-    }
-    // If class field support cannot be used set to false; otherwise leave undefined to allow
-    // esbuild to use `target` to determine support.
-    if (safariClassFieldScopeBug) {
-        supported['class-field'] = false;
-        supported['class-static-field'] = false;
-    }
-    return supported;
 }
 const MAX_CONCURRENT_WRITES = 64;
 async function emitFilesToDisk(files, writeFileCallback) {

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,9 @@
  */
 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 interface ComponentStyleRecord {
+    rawContent: Uint8Array;
+    used?: Set<string>;
+    reload?: boolean;
+}
+export declare function createAngularAssetsMiddleware(server: ViteDevServer, assets: Map<string, string>, outputFiles: AngularMemoryOutputFiles, componentStyles: Map<string, ComponentStyleRecord>, encapsulateStyle: (style: Uint8Array, componentId: string) => string): Connect.NextHandleFunction;