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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@angular/build",
-  "version": "19.0.0-next.10",
+  "version": "19.0.0-next.12",
   "description": "Official build system for Angular",
   "keywords": [
     "Angular CLI",
@@ -23,41 +23,41 @@
   "builders": "builders.json",
   "dependencies": {
     "@ampproject/remapping": "2.3.0",
-    "@angular-devkit/architect": "0.1900.0-next.10",
-    "@babel/core": "7.25.7",
+    "@angular-devkit/architect": "0.1900.0-next.12",
+    "@babel/core": "7.25.8",
     "@babel/helper-annotate-as-pure": "7.25.7",
     "@babel/helper-split-export-declaration": "7.24.7",
     "@babel/plugin-syntax-import-attributes": "7.25.7",
     "@inquirer/confirm": "5.0.0",
     "@vitejs/plugin-basic-ssl": "1.1.0",
     "browserslist": "^4.23.0",
-    "critters": "0.0.24",
+    "critters": "0.0.25",
     "esbuild": "0.24.0",
     "fast-glob": "3.3.2",
     "https-proxy-agent": "7.0.5",
     "istanbul-lib-instrument": "6.0.3",
     "listr2": "8.2.5",
-    "magic-string": "0.30.11",
+    "magic-string": "0.30.12",
     "mrmime": "2.0.0",
     "parse5-html-rewriting-stream": "7.0.0",
     "picomatch": "4.0.2",
     "piscina": "4.7.0",
     "rollup": "4.24.0",
-    "sass": "1.79.4",
+    "sass": "1.80.3",
     "semver": "7.6.3",
-    "vite": "5.4.8",
+    "vite": "5.4.9",
     "watchpack": "2.4.2"
   },
   "optionalDependencies": {
     "lmdb": "3.1.3"
   },
   "peerDependencies": {
-    "@angular/compiler": "^19.0.0-next.0",
-    "@angular/compiler-cli": "^19.0.0-next.0",
-    "@angular/localize": "^19.0.0-next.0",
-    "@angular/platform-server": "^19.0.0-next.0",
-    "@angular/service-worker": "^19.0.0-next.0",
-    "@angular/ssr": "^19.0.0-next.10",
+    "@angular/compiler": "^19.0.0-next.9",
+    "@angular/compiler-cli": "^19.0.0-next.9",
+    "@angular/localize": "^19.0.0-next.9",
+    "@angular/platform-server": "^19.0.0-next.9",
+    "@angular/service-worker": "^19.0.0-next.9",
+    "@angular/ssr": "^19.0.0-next.12",
     "less": "^4.2.0",
     "postcss": "^8.4.0",
     "tailwindcss": "^2.0.0 || ^3.0.0",

package/src/builders/application/execute-build.js

@@ -41,17 +41,25 @@ async function executeBuild(options, context, rebuildState) {
         await (0, i18n_1.loadActiveTranslations)(context, i18nOptions);
     }
     // Reuse rebuild state or create new bundle contexts for code and global stylesheets
-    let bundlerContexts = rebuildState?.rebuildContexts;
-    const codeBundleCache = rebuildState?.codeBundleCache ??
-        new source_file_cache_1.SourceFileCache(cacheOptions.enabled ? cacheOptions.path : undefined);
-    if (bundlerContexts === undefined) {
-        bundlerContexts = (0, setup_bundling_1.setupBundlerContexts)(options, browsers, codeBundleCache);
+    let bundlerContexts;
+    let componentStyleBundler;
+    let codeBundleCache;
+    if (rebuildState) {
+        bundlerContexts = rebuildState.rebuildContexts;
+        componentStyleBundler = rebuildState.componentStyleBundler;
+        codeBundleCache = rebuildState.codeBundleCache;
+    }
+    else {
+        const target = (0, utils_1.transformSupportedBrowsersToTargets)(browsers);
+        codeBundleCache = new source_file_cache_1.SourceFileCache(cacheOptions.enabled ? cacheOptions.path : undefined);
+        componentStyleBundler = (0, setup_bundling_1.createComponentStyleBundler)(options, target);
+        bundlerContexts = (0, setup_bundling_1.setupBundlerContexts)(options, target, codeBundleCache, componentStyleBundler);
     }
     let bundlingResult = await bundler_context_1.BundlerContext.bundleAll(bundlerContexts, rebuildState?.fileChanges.all);
     if (options.optimizationOptions.scripts && environment_options_1.shouldOptimizeChunks) {
         bundlingResult = await (0, profiling_1.profileAsync)('OPTIMIZE_CHUNKS', () => (0, chunk_optimizer_1.optimizeChunks)(bundlingResult, options.sourcemapOptions.scripts ? !options.sourcemapOptions.hidden || 'hidden' : false));
     }
-    const executionResult = new bundler_execution_result_1.ExecutionResult(bundlerContexts, codeBundleCache);
+    const executionResult = new bundler_execution_result_1.ExecutionResult(bundlerContexts, componentStyleBundler, codeBundleCache);
     executionResult.addWarnings(bundlingResult.warnings);
     // Return if the bundling has errors
     if (bundlingResult.errors) {

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

@@ -9,7 +9,7 @@ import type { BuilderContext } from '@angular-devkit/architect';
 import type { Plugin } from 'esbuild';
 import { I18nOptions } from '../../utils/i18n-options';
 import { IndexHtmlTransform } from '../../utils/index-file/index-html-generator';
-import { Schema as ApplicationBuilderOptions, I18NTranslation, OutputMode, OutputPathClass } from './schema';
+import { Schema as ApplicationBuilderOptions, ExperimentalPlatform, I18NTranslation, OutputMode, OutputPathClass } from './schema';
 /**
  * The filename for the client-side rendered HTML template.
  * This template is used for client-side rendering (CSR) in a web application.
@@ -119,8 +119,10 @@ export declare function normalizeOptions(context: BuilderContext, projectName: s
     outputMode: OutputMode | undefined;
     ssrOptions: {
         entry?: undefined;
+        platform?: undefined;
     } | {
         entry: string | undefined;
+        platform: ExperimentalPlatform;
     } | undefined;
     verbose: boolean | undefined;
     watch: boolean | undefined;

package/src/builders/application/options.js

@@ -153,9 +153,10 @@ async function normalizeOptions(context, projectName, options, extensions) {
         ssrOptions = {};
     }
     else if (typeof options.ssr === 'object') {
-        const { entry } = options.ssr;
+        const { entry, experimentalPlatform = schema_1.ExperimentalPlatform.Node } = options.ssr;
         ssrOptions = {
             entry: entry && node_path_1.default.join(workspaceRoot, entry),
+            platform: experimentalPlatform,
         };
     }
     let appShellOptions;

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

@@ -61,7 +61,9 @@ export interface ResultMessage {
 }
 export interface ComponentUpdateResult extends BaseResult {
     kind: ResultKind.ComponentUpdate;
-    id: string;
-    type: 'style' | 'template';
-    content: string;
+    updates: {
+        id: string;
+        type: 'style' | 'template';
+        content: string;
+    }[];
 }

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

@@ -500,6 +500,37 @@ export interface SsrClass {
      * The server entry-point that when executed will spawn the web server.
      */
     entry?: string;
+    /**
+     * Specifies the platform for which the server bundle is generated. This affects the APIs
+     * and modules available in the server-side code.
+     *
+     * - `node`:  (Default) Generates a bundle optimized for Node.js environments.
+     * - `neutral`: Generates a platform-neutral bundle suitable for environments like edge
+     * workers, and other serverless platforms. This option avoids using Node.js-specific APIs,
+     * making the bundle more portable.
+     *
+     * Please note that this feature does not provide polyfills for Node.js modules.
+     * Additionally, it is experimental, and the schematics may undergo changes in future
+     * versions.
+     */
+    experimentalPlatform?: ExperimentalPlatform;
+}
+/**
+ * Specifies the platform for which the server bundle is generated. This affects the APIs
+ * and modules available in the server-side code.
+ *
+ * - `node`:  (Default) Generates a bundle optimized for Node.js environments.
+ * - `neutral`: Generates a platform-neutral bundle suitable for environments like edge
+ * workers, and other serverless platforms. This option avoids using Node.js-specific APIs,
+ * making the bundle more portable.
+ *
+ * Please note that this feature does not provide polyfills for Node.js modules.
+ * Additionally, it is experimental, and the schematics may undergo changes in future
+ * versions.
+ */
+export declare enum ExperimentalPlatform {
+    Neutral = "neutral",
+    Node = "node"
 }
 /**
  * Options to pass to style preprocessors.
@@ -509,6 +540,32 @@ export interface StylePreprocessorOptions {
      * Paths to include. Paths will be resolved to workspace root.
      */
     includePaths?: string[];
+    /**
+     * Options to pass to the sass preprocessor.
+     */
+    sass?: Sass;
+}
+/**
+ * Options to pass to the sass preprocessor.
+ */
+export interface Sass {
+    /**
+     * A set of deprecations to treat as fatal. If a deprecation warning of any provided type is
+     * encountered during compilation, the compiler will error instead. If a Version is
+     * provided, then all deprecations that were active in that compiler version will be treated
+     * as fatal.
+     */
+    fatalDeprecations?: string[];
+    /**
+     * A set of future deprecations to opt into early. Future deprecations passed here will be
+     * treated as active by the compiler, emitting warnings as necessary.
+     */
+    futureDeprecations?: string[];
+    /**
+     * A set of active deprecations to ignore. If a deprecation warning of any provided type is
+     * encountered during compilation, the compiler will ignore it instead.
+     */
+    silenceDeprecations?: string[];
 }
 export type StyleElement = StyleClass | string;
 export interface StyleClass {

package/src/builders/application/schema.js

@@ -2,7 +2,7 @@
 // THIS FILE IS AUTOMATICALLY GENERATED. TO UPDATE THIS FILE YOU NEED TO CHANGE THE
 // CORRESPONDING JSON SCHEMA FILE, THEN RUN devkit-admin build (or bazel build ...).
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.OutputMode = exports.OutputHashing = exports.InlineStyleLanguage = exports.I18NTranslation = exports.CrossOrigin = exports.Type = void 0;
+exports.ExperimentalPlatform = exports.OutputMode = exports.OutputHashing = exports.InlineStyleLanguage = exports.I18NTranslation = exports.CrossOrigin = exports.Type = void 0;
 /**
  * The type of budget.
  */
@@ -66,3 +66,21 @@ var OutputMode;
     OutputMode["Server"] = "server";
     OutputMode["Static"] = "static";
 })(OutputMode || (exports.OutputMode = OutputMode = {}));
+/**
+ * Specifies the platform for which the server bundle is generated. This affects the APIs
+ * and modules available in the server-side code.
+ *
+ * - `node`:  (Default) Generates a bundle optimized for Node.js environments.
+ * - `neutral`: Generates a platform-neutral bundle suitable for environments like edge
+ * workers, and other serverless platforms. This option avoids using Node.js-specific APIs,
+ * making the bundle more portable.
+ *
+ * Please note that this feature does not provide polyfills for Node.js modules.
+ * Additionally, it is experimental, and the schematics may undergo changes in future
+ * versions.
+ */
+var ExperimentalPlatform;
+(function (ExperimentalPlatform) {
+    ExperimentalPlatform["Neutral"] = "neutral";
+    ExperimentalPlatform["Node"] = "node";
+})(ExperimentalPlatform || (exports.ExperimentalPlatform = ExperimentalPlatform = {}));

package/src/builders/application/schema.json

@@ -125,6 +125,34 @@
             "type": "string"
           },
           "default": []
+        },
+        "sass": {
+          "description": "Options to pass to the sass preprocessor.",
+          "type": "object",
+          "properties": {
+            "fatalDeprecations": {
+              "description": "A set of deprecations to treat as fatal. If a deprecation warning of any provided type is encountered during compilation, the compiler will error instead. If a Version is provided, then all deprecations that were active in that compiler version will be treated as fatal.",
+              "type": "array",
+              "items": {
+                "type": "string"
+              }
+            },
+            "silenceDeprecations": {
+              "description": " A set of active deprecations to ignore. If a deprecation warning of any provided type is encountered during compilation, the compiler will ignore it instead.",
+              "type": "array",
+              "items": {
+                "type": "string"
+              }
+            },
+            "futureDeprecations": {
+              "description": "A set of future deprecations to opt into early. Future deprecations passed here will be treated as active by the compiler, emitting warnings as necessary.",
+              "type": "array",
+              "items": {
+                "type": "string"
+              }
+            }
+          },
+          "additionalProperties": false
         }
       },
       "additionalProperties": false
@@ -518,6 +546,11 @@
             "entry": {
               "type": "string",
               "description": "The server entry-point that when executed will spawn the web server."
+            },
+            "experimentalPlatform": {
+              "description": "Specifies the platform for which the server bundle is generated. This affects the APIs and modules available in the server-side code. \n\n- `node`:  (Default) Generates a bundle optimized for Node.js environments. \n- `neutral`: Generates a platform-neutral bundle suitable for environments like edge workers, and other serverless platforms. This option avoids using Node.js-specific APIs, making the bundle more portable. \n\nPlease note that this feature does not provide polyfills for Node.js modules. Additionally, it is experimental, and the schematics may undergo changes in future versions.",
+              "default": "node",
+              "enum": ["node", "neutral"]
             }
           },
           "additionalProperties": false

package/src/builders/application/setup-bundling.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 { ComponentStylesheetBundler } from '../../tools/esbuild/angular/component-stylesheets';
 import { SourceFileCache } from '../../tools/esbuild/angular/source-file-cache';
 import { BundlerContext } from '../../tools/esbuild/bundler-context';
 import { NormalizedApplicationBuildOptions } from './options';
@@ -16,4 +17,5 @@ import { NormalizedApplicationBuildOptions } from './options';
  * @param codeBundleCache An instance of the TypeScript source file cache.
  * @returns An array of BundlerContext objects.
  */
-export declare function setupBundlerContexts(options: NormalizedApplicationBuildOptions, browsers: string[], codeBundleCache: SourceFileCache): BundlerContext[];
+export declare function setupBundlerContexts(options: NormalizedApplicationBuildOptions, target: string[], codeBundleCache: SourceFileCache, stylesheetBundler: ComponentStylesheetBundler): BundlerContext[];
+export declare function createComponentStyleBundler(options: NormalizedApplicationBuildOptions, target: string[]): ComponentStylesheetBundler;

package/src/builders/application/setup-bundling.js

@@ -8,6 +8,8 @@
  */
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.setupBundlerContexts = setupBundlerContexts;
+exports.createComponentStyleBundler = createComponentStyleBundler;
+const component_stylesheets_1 = require("../../tools/esbuild/angular/component-stylesheets");
 const application_code_bundle_1 = require("../../tools/esbuild/application-code-bundle");
 const bundler_context_1 = require("../../tools/esbuild/bundler-context");
 const global_scripts_1 = require("../../tools/esbuild/global-scripts");
@@ -21,14 +23,13 @@ const utils_1 = require("../../tools/esbuild/utils");
  * @param codeBundleCache An instance of the TypeScript source file cache.
  * @returns An array of BundlerContext objects.
  */
-function setupBundlerContexts(options, browsers, codeBundleCache) {
+function setupBundlerContexts(options, target, codeBundleCache, stylesheetBundler) {
     const { outputMode, serverEntryPoint, appShellOptions, prerenderOptions, ssrOptions, workspaceRoot, watch = false, } = options;
-    const target = (0, utils_1.transformSupportedBrowsersToTargets)(browsers);
     const bundlerContexts = [];
     // Browser application code
-    bundlerContexts.push(new bundler_context_1.BundlerContext(workspaceRoot, watch, (0, application_code_bundle_1.createBrowserCodeBundleOptions)(options, target, codeBundleCache)));
+    bundlerContexts.push(new bundler_context_1.BundlerContext(workspaceRoot, watch, (0, application_code_bundle_1.createBrowserCodeBundleOptions)(options, target, codeBundleCache, stylesheetBundler)));
     // Browser polyfills code
-    const browserPolyfillBundleOptions = (0, application_code_bundle_1.createBrowserPolyfillBundleOptions)(options, target, codeBundleCache);
+    const browserPolyfillBundleOptions = (0, application_code_bundle_1.createBrowserPolyfillBundleOptions)(options, target, codeBundleCache, stylesheetBundler);
     if (browserPolyfillBundleOptions) {
         bundlerContexts.push(new bundler_context_1.BundlerContext(workspaceRoot, watch, browserPolyfillBundleOptions));
     }
@@ -53,10 +54,10 @@ function setupBundlerContexts(options, browsers, codeBundleCache) {
     // Skip server build when none of the features are enabled.
     if (serverEntryPoint && (outputMode || prerenderOptions || appShellOptions || ssrOptions)) {
         const nodeTargets = [...target, ...(0, utils_1.getSupportedNodeTargets)()];
-        bundlerContexts.push(new bundler_context_1.BundlerContext(workspaceRoot, watch, (0, application_code_bundle_1.createServerMainCodeBundleOptions)(options, nodeTargets, codeBundleCache)));
+        bundlerContexts.push(new bundler_context_1.BundlerContext(workspaceRoot, watch, (0, application_code_bundle_1.createServerMainCodeBundleOptions)(options, nodeTargets, codeBundleCache, stylesheetBundler)));
         if (outputMode && ssrOptions?.entry) {
             // New behavior introduced: 'server.ts' is now bundled separately from 'main.server.ts'.
-            bundlerContexts.push(new bundler_context_1.BundlerContext(workspaceRoot, watch, (0, application_code_bundle_1.createSsrEntryCodeBundleOptions)(options, nodeTargets, codeBundleCache)));
+            bundlerContexts.push(new bundler_context_1.BundlerContext(workspaceRoot, watch, (0, application_code_bundle_1.createSsrEntryCodeBundleOptions)(options, nodeTargets, codeBundleCache, stylesheetBundler)));
         }
         // Server polyfills code
         const serverPolyfillBundleOptions = (0, application_code_bundle_1.createServerPolyfillBundleOptions)(options, nodeTargets, codeBundleCache);
@@ -66,3 +67,29 @@ function setupBundlerContexts(options, browsers, codeBundleCache) {
     }
     return bundlerContexts;
 }
+function createComponentStyleBundler(options, target) {
+    const { workspaceRoot, optimizationOptions, sourcemapOptions, outputNames, externalDependencies, preserveSymlinks, stylePreprocessorOptions, inlineStyleLanguage, cacheOptions, tailwindConfiguration, postcssConfiguration, publicPath, } = options;
+    const incremental = !!options.watch;
+    return new component_stylesheets_1.ComponentStylesheetBundler({
+        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,
+        // string[] | undefined' is not assignable to type '(Version | DeprecationOrId)[] | undefined'.
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        sass: stylePreprocessorOptions?.sass,
+        externalDependencies,
+        target,
+        preserveSymlinks,
+        tailwindConfiguration,
+        postcssConfiguration,
+        cacheOptions,
+        publicPath,
+    }, inlineStyleLanguage, incremental);
+}

package/src/builders/dev-server/vite-server.d.ts

@@ -32,6 +32,6 @@ export declare function serveWithVite(serverOptions: NormalizedDevServerOptions,
     middleware?: Connect.NextHandleFunction[];
     buildPlugins?: Plugin[];
 }): AsyncIterableIterator<DevServerBuilderOutput>;
-export declare function setupServer(serverOptions: NormalizedDevServerOptions, outputFiles: Map<string, OutputFileRecord>, assets: Map<string, string>, preserveSymlinks: boolean | undefined, externalMetadata: DevServerExternalResultMetadata, ssrMode: ServerSsrMode, prebundleTransformer: JavaScriptTransformer, target: string[], zoneless: boolean, usedComponentStyles: Map<string, string[]>, prebundleLoaderExtensions: EsbuildLoaderOption | undefined, extensionMiddleware?: Connect.NextHandleFunction[], indexHtmlTransformer?: (content: string) => Promise<string>, thirdPartySourcemaps?: boolean): Promise<InlineConfig>;
+export declare function setupServer(serverOptions: NormalizedDevServerOptions, outputFiles: Map<string, OutputFileRecord>, assets: Map<string, string>, preserveSymlinks: boolean | undefined, externalMetadata: DevServerExternalResultMetadata, ssrMode: ServerSsrMode, prebundleTransformer: JavaScriptTransformer, target: string[], zoneless: boolean, usedComponentStyles: Map<string, Set<string>>, templateUpdates: Map<string, string>, prebundleLoaderExtensions: EsbuildLoaderOption | undefined, extensionMiddleware?: Connect.NextHandleFunction[], indexHtmlTransformer?: (content: string) => Promise<string>, thirdPartySourcemaps?: boolean): Promise<InlineConfig>;
 type EsbuildLoaderOption = Exclude<DepOptimizationConfig['esbuildOptions'], undefined>['loader'];
 export {};

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

@@ -92,8 +92,13 @@ async function* serveWithVite(serverOptions, builderName, builderAction, context
         // https://nodejs.org/api/process.html#processsetsourcemapsenabledval
         process.setSourceMapsEnabled(true);
     }
-    // TODO: Enable by default once full support across CLI and FW is integrated
-    browserOptions.externalRuntimeStyles = environment_options_1.useComponentStyleHmr;
+    // Enable to support component style hot reloading (`NG_HMR_CSTYLES=0` can be used to disable)
+    browserOptions.externalRuntimeStyles = !!serverOptions.liveReload && environment_options_1.useComponentStyleHmr;
+    if (browserOptions.externalRuntimeStyles) {
+        // Preload the @angular/compiler package to avoid first stylesheet request delays.
+        // Once @angular/build is native ESM, this should be re-evaluated.
+        void (0, load_esm_1.loadEsmModule)('@angular/compiler');
+    }
     // Setup the prebundling transformer that will be shared across Vite prebundling requests
     const prebundleTransformer = new internal_1.JavaScriptTransformer(
     // Always enable JIT linking to support applications built with and without AOT.
@@ -116,6 +121,7 @@ async function* serveWithVite(serverOptions, builderName, builderAction, context
         explicitServer: [],
     };
     const usedComponentStyles = new Map();
+    const templateUpdates = new Map();
     // Add cleanup logic via a builder teardown.
     let deferred;
     context.addTeardown(async () => {
@@ -157,6 +163,8 @@ async function* serveWithVite(serverOptions, builderName, builderAction, context
                         assetFiles.set('/' + normalizePath(outputPath), normalizePath(file.inputPath));
                     }
                 }
+                // Clear stale template updates on a code rebuilds
+                templateUpdates.clear();
                 // Analyze result files for changes
                 analyzeResultFiles(normalizePath, htmlIndexPath, result.files, generatedFiles);
                 break;
@@ -166,8 +174,18 @@ async function* serveWithVite(serverOptions, builderName, builderAction, context
                 break;
             case results_1.ResultKind.ComponentUpdate:
                 (0, node_assert_1.default)(serverOptions.hmr, 'Component updates are only supported with HMR enabled.');
-                // TODO: Implement support -- application builder currently does not use
-                break;
+                (0, node_assert_1.default)(server, 'Builder must provide an initial full build before component update results.');
+                for (const componentUpdate of result.updates) {
+                    if (componentUpdate.type === 'template') {
+                        templateUpdates.set(componentUpdate.id, componentUpdate.content);
+                        server.ws.send('angular:component-update', {
+                            id: componentUpdate.id,
+                            timestamp: Date.now(),
+                        });
+                    }
+                }
+                context.logger.info('Component update sent to client(s).');
+                continue;
             default:
                 context.logger.warn(`Unknown result kind [${result.kind}] provided by build.`);
                 continue;
@@ -259,7 +277,7 @@ async function* serveWithVite(serverOptions, builderName, builderAction, context
                 });
             }
             // Setup server and start listening
-            const serverConfiguration = await setupServer(serverOptions, generatedFiles, assetFiles, browserOptions.preserveSymlinks, externalMetadata, ssrMode, prebundleTransformer, target, (0, internal_1.isZonelessApp)(polyfills), usedComponentStyles, browserOptions.loader, extensions?.middleware, transformers?.indexHtml, thirdPartySourcemaps);
+            const serverConfiguration = await setupServer(serverOptions, generatedFiles, assetFiles, browserOptions.preserveSymlinks, externalMetadata, ssrMode, prebundleTransformer, target, (0, internal_1.isZonelessApp)(polyfills), usedComponentStyles, templateUpdates, browserOptions.loader, extensions?.middleware, transformers?.indexHtml, thirdPartySourcemaps);
             server = await createServer(serverConfiguration);
             await server.listen();
             const urls = server.resolvedUrls;
@@ -328,7 +346,7 @@ async function handleUpdate(normalizePath, generatedFiles, server, serverOptions
                     // are not typically reused across components.
                     const componentIds = usedComponentStyles.get(filePath);
                     if (componentIds) {
-                        return componentIds.map((id) => ({
+                        return Array.from(componentIds).map((id) => ({
                             type: 'css-update',
                             timestamp,
                             path: `${filePath}?ngcomp` + (id ? `=${id}` : ''),
@@ -409,7 +427,7 @@ function analyzeResultFiles(normalizePath, htmlIndexPath, resultFiles, generated
         }
     }
 }
-async function setupServer(serverOptions, outputFiles, assets, preserveSymlinks, externalMetadata, ssrMode, prebundleTransformer, target, zoneless, usedComponentStyles, prebundleLoaderExtensions, extensionMiddleware, indexHtmlTransformer, thirdPartySourcemaps = false) {
+async function setupServer(serverOptions, outputFiles, assets, preserveSymlinks, externalMetadata, ssrMode, prebundleTransformer, target, zoneless, usedComponentStyles, templateUpdates, prebundleLoaderExtensions, extensionMiddleware, indexHtmlTransformer, thirdPartySourcemaps = false) {
     const proxy = await (0, utils_1.loadProxyConfiguration)(serverOptions.workspaceRoot, serverOptions.proxyConfig);
     // dynamically import Vite for ESM compatibility
     const { normalizePath } = await (0, load_esm_1.loadEsmModule)('vite');
@@ -502,6 +520,7 @@ async function setupServer(serverOptions, outputFiles, assets, preserveSymlinks,
                 indexHtmlTransformer,
                 extensionMiddleware,
                 usedComponentStyles,
+                templateUpdates,
                 ssrMode,
             }),
             (0, plugins_1.createRemoveIdPrefixPlugin)(externalMetadata.explicitBrowser),

package/src/tools/angular/angular-host.d.ts

@@ -14,7 +14,7 @@ export interface AngularHostOptions {
     sourceFileCache?: Map<string, ts.SourceFile>;
     modifiedFiles?: Set<string>;
     externalStylesheets?: Map<string, string>;
-    transformStylesheet(data: string, containingFile: string, stylesheetFile?: string, order?: number): Promise<string | null>;
+    transformStylesheet(data: string, containingFile: string, stylesheetFile?: string, order?: number, className?: string): Promise<string | null>;
     processWebWorker(workerFile: string, containingFile: string): string;
 }
 /**

package/src/tools/angular/angular-host.js

@@ -113,10 +113,7 @@ function createAngularCompilerHost(typescript, compilerOptions, hostOptions) {
         if (data.trim().length === 0) {
             return { content: '' };
         }
-        const result = await hostOptions.transformStylesheet(data, context.containingFile, context.resourceFile ?? undefined, 
-        // TODO: Remove once available in compiler-cli types
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        context.order);
+        const result = await hostOptions.transformStylesheet(data, context.containingFile, context.resourceFile ?? undefined, context.order, context.className);
         return typeof result === 'string' ? { content: result } : null;
     };
     host.resourceNameToFileName = function (resourceName, containingFile) {

package/src/tools/angular/compilation/parallel-compilation.js

@@ -37,9 +37,9 @@ class ParallelCompilation extends angular_compilation_1.AngularCompilation {
     initialize(tsconfig, hostOptions, compilerOptionsTransformer) {
         const stylesheetChannel = new node_worker_threads_1.MessageChannel();
         // The request identifier is required because Angular can issue multiple concurrent requests
-        stylesheetChannel.port1.on('message', ({ requestId, data, containingFile, stylesheetFile }) => {
+        stylesheetChannel.port1.on('message', ({ requestId, data, containingFile, stylesheetFile, order, className }) => {
             hostOptions
-                .transformStylesheet(data, containingFile, stylesheetFile)
+                .transformStylesheet(data, containingFile, stylesheetFile, order, className)
                 .then((value) => stylesheetChannel.port1.postMessage({ requestId, value }))
                 .catch((error) => stylesheetChannel.port1.postMessage({ requestId, error }));
         });

package/src/tools/angular/compilation/parallel-worker.js

@@ -37,7 +37,7 @@ async function initialize(request) {
         fileReplacements: request.fileReplacements,
         sourceFileCache,
         modifiedFiles: sourceFileCache.modifiedFiles,
-        transformStylesheet(data, containingFile, stylesheetFile) {
+        transformStylesheet(data, containingFile, stylesheetFile, order, className) {
             const requestId = (0, node_crypto_1.randomUUID)();
             const resultPromise = new Promise((resolve, reject) => stylesheetRequests.set(requestId, [resolve, reject]));
             request.stylesheetPort.postMessage({
@@ -45,6 +45,8 @@ async function initialize(request) {
                 data,
                 containingFile,
                 stylesheetFile,
+                order,
+                className,
             });
             return resultPromise;
         },

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

@@ -7,7 +7,7 @@
  */
 import type { Plugin } from 'esbuild';
 import { LoadResultCache } from '../load-result-cache';
-import { BundleStylesheetOptions } from '../stylesheets/bundle-options';
+import { ComponentStylesheetBundler } from './component-stylesheets';
 import { SourceFileCache } from './source-file-cache';
 export interface CompilerPluginOptions {
     sourcemap: boolean | 'external';
@@ -24,6 +24,4 @@ export interface CompilerPluginOptions {
     externalRuntimeStyles?: boolean;
     instrumentForCoverage?: (request: string) => boolean;
 }
-export declare function createCompilerPlugin(pluginOptions: CompilerPluginOptions, styleOptions: BundleStylesheetOptions & {
-    inlineStyleLanguage: string;
-}): Plugin;
+export declare function createCompilerPlugin(pluginOptions: CompilerPluginOptions, stylesheetBundler: ComponentStylesheetBundler): Plugin;