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

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

@@ -65,10 +65,10 @@ async function* serveWithVite(serverOptions, builderName, builderAction, context
     }
     // TODO: Adjust architect to not force a JsonObject derived return type
     const browserOptions = (await context.validateOptions(rawBrowserOptions, builderName));
-    if (browserOptions.prerender) {
+    if (browserOptions.prerender || (browserOptions.outputMode && browserOptions.server)) {
         // Disable prerendering if enabled and force SSR.
         // This is so instead of prerendering all the routes for every change, the page is "prerendered" when it is requested.
-        browserOptions.prerender = false;
+        browserOptions.prerender = undefined;
         browserOptions.ssr ||= true;
     }
     // Set all packages as external to support Vite's prebundle caching
@@ -92,8 +92,14 @@ 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 selectively)
+    browserOptions.externalRuntimeStyles =
+        serverOptions.liveReload && serverOptions.hmr && environment_options_1.useComponentStyleHmr;
+    // Enable to support component template hot replacement (`NG_HMR_TEMPLATE=1` can be used to enable)
+    browserOptions.templateUpdates = !!serverOptions.liveReload && environment_options_1.useComponentTemplateHmr;
+    if (browserOptions.templateUpdates) {
+        context.logger.warn('Experimental support for component template hot replacement has been enabled via the "NG_HMR_TEMPLATE" environment variable.');
+    }
     // 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.
@@ -115,7 +121,8 @@ async function* serveWithVite(serverOptions, builderName, builderAction, context
         explicitBrowser: [],
         explicitServer: [],
     };
-    const usedComponentStyles = new Map();
+    const componentStyles = new Map();
+    const templateUpdates = new Map();
     // Add cleanup logic via a builder teardown.
     let deferred;
     context.addTeardown(async () => {
@@ -125,20 +132,30 @@ async function* serveWithVite(serverOptions, builderName, builderAction, context
     });
     // TODO: Switch this to an architect schedule call when infrastructure settings are supported
     for await (const result of builderAction(browserOptions, context, extensions?.buildPlugins)) {
+        if (result.kind === results_1.ResultKind.Failure) {
+            if (result.errors.length && server) {
+                hadError = true;
+                server.ws.send({
+                    type: 'error',
+                    err: {
+                        message: result.errors[0].text,
+                        stack: '',
+                        loc: result.errors[0].location ?? undefined,
+                    },
+                });
+            }
+            continue;
+        }
+        // Clear existing error overlay on successful result
+        if (hadError && server) {
+            hadError = false;
+            // Send an empty update to clear the error overlay
+            server.ws.send({
+                'type': 'update',
+                updates: [],
+            });
+        }
         switch (result.kind) {
-            case results_1.ResultKind.Failure:
-                if (result.errors.length && server) {
-                    hadError = true;
-                    server.ws.send({
-                        type: 'error',
-                        err: {
-                            message: result.errors[0].text,
-                            stack: '',
-                            loc: result.errors[0].location ?? undefined,
-                        },
-                    });
-                }
-                continue;
             case results_1.ResultKind.Full:
                 if (result.detail?.['htmlIndexPath']) {
                     htmlIndexPath = result.detail['htmlIndexPath'];
@@ -157,8 +174,10 @@ async function* serveWithVite(serverOptions, builderName, builderAction, context
                         assetFiles.set('/' + normalizePath(outputPath), normalizePath(file.inputPath));
                     }
                 }
+                // Clear stale template updates on code rebuilds
+                templateUpdates.clear();
                 // Analyze result files for changes
-                analyzeResultFiles(normalizePath, htmlIndexPath, result.files, generatedFiles);
+                analyzeResultFiles(normalizePath, htmlIndexPath, result.files, generatedFiles, componentStyles);
                 break;
             case results_1.ResultKind.Incremental:
                 (0, node_assert_1.default)(server, 'Builder must provide an initial full build before incremental results.');
@@ -166,21 +185,22 @@ 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;
         }
-        // Clear existing error overlay on successful result
-        if (hadError && server) {
-            hadError = false;
-            // Send an empty update to clear the error overlay
-            server.ws.send({
-                'type': 'update',
-                updates: [],
-            });
-        }
         // To avoid disconnecting the array objects from the option, these arrays need to be mutated instead of replaced.
         let requiresServerRestart = false;
         if (result.detail?.['externalMetadata']) {
@@ -220,7 +240,7 @@ async function* serveWithVite(serverOptions, builderName, builderAction, context
                 await server.restart();
             }
             else {
-                await handleUpdate(normalizePath, generatedFiles, server, serverOptions, context.logger, usedComponentStyles);
+                await handleUpdate(normalizePath, generatedFiles, server, serverOptions, context.logger, componentStyles);
             }
         }
         else {
@@ -249,11 +269,17 @@ async function* serveWithVite(serverOptions, builderName, builderAction, context
                 browserOptions.ssr.entry) {
                 ssrMode = plugins_1.ServerSsrMode.ExternalSsrMiddleware;
             }
-            else if (browserOptions.server) {
+            else if (browserOptions.ssr) {
                 ssrMode = plugins_1.ServerSsrMode.InternalSsrMiddleware;
             }
+            if (browserOptions.progress !== false && ssrMode !== plugins_1.ServerSsrMode.NoSsr) {
+                // This is a workaround for https://github.com/angular/angular-cli/issues/28336, which is caused by the interaction between `zone.js` and `listr2`.
+                process.once('SIGINT', () => {
+                    process.kill(process.pid);
+                });
+            }
             // 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), componentStyles, templateUpdates, browserOptions.loader, extensions?.middleware, transformers?.indexHtml, thirdPartySourcemaps);
             server = await createServer(serverConfiguration);
             await server.listen();
             const urls = server.resolvedUrls;
@@ -269,6 +295,7 @@ async function* serveWithVite(serverOptions, builderName, builderAction, context
                         key: 'r',
                         description: 'force reload browser',
                         action(server) {
+                            componentStyles.forEach((record) => record.used?.clear());
                             server.ws.send({
                                 type: 'full-reload',
                                 path: '*',
@@ -287,7 +314,7 @@ async function* serveWithVite(serverOptions, builderName, builderAction, context
     }
     await new Promise((resolve) => (deferred = resolve));
 }
-async function handleUpdate(normalizePath, generatedFiles, server, serverOptions, logger, usedComponentStyles) {
+async function handleUpdate(normalizePath, generatedFiles, server, serverOptions, logger, componentStyles) {
     const updatedFiles = [];
     let destroyAngularServerAppCalled = false;
     // Invalidate any updated files
@@ -309,40 +336,54 @@ async function handleUpdate(normalizePath, generatedFiles, server, serverOptions
     if (!updatedFiles.length) {
         return;
     }
-    if (serverOptions.liveReload || serverOptions.hmr) {
+    if (serverOptions.hmr) {
         if (updatedFiles.every((f) => f.endsWith('.css'))) {
+            let requiresReload = false;
             const timestamp = Date.now();
-            server.ws.send({
-                type: 'update',
-                updates: updatedFiles.flatMap((filePath) => {
-                    // For component styles, an HMR update must be sent for each one with the corresponding
-                    // component identifier search parameter (`ngcomp`). The Vite client code will not keep
-                    // the existing search parameters when it performs an update and each one must be
-                    // specified explicitly. Typically, there is only one each though as specific style files
-                    // are not typically reused across components.
-                    const componentIds = usedComponentStyles.get(filePath);
-                    if (componentIds) {
-                        return componentIds.map((id) => ({
+            const updates = updatedFiles.flatMap((filePath) => {
+                // For component styles, an HMR update must be sent for each one with the corresponding
+                // component identifier search parameter (`ngcomp`). The Vite client code will not keep
+                // the existing search parameters when it performs an update and each one must be
+                // specified explicitly. Typically, there is only one each though as specific style files
+                // are not typically reused across components.
+                const record = componentStyles.get(filePath);
+                if (record) {
+                    if (record.reload) {
+                        // Shadow DOM components currently require a full reload.
+                        // Vite's CSS hot replacement does not support shadow root searching.
+                        requiresReload = true;
+                        return [];
+                    }
+                    return Array.from(record.used ?? []).map((id) => {
+                        return {
                             type: 'css-update',
                             timestamp,
-                            path: `${filePath}?ngcomp` + (id ? `=${id}` : ''),
+                            path: `${filePath}?ngcomp` + (typeof id === 'string' ? `=${id}` : ''),
                             acceptedPath: filePath,
-                        }));
-                    }
-                    return {
-                        type: 'css-update',
-                        timestamp,
-                        path: filePath,
-                        acceptedPath: filePath,
-                    };
-                }),
+                        };
+                    });
+                }
+                return {
+                    type: 'css-update',
+                    timestamp,
+                    path: filePath,
+                    acceptedPath: filePath,
+                };
             });
-            logger.info('HMR update sent to client(s).');
-            return;
+            if (!requiresReload) {
+                server.ws.send({
+                    type: 'update',
+                    updates,
+                });
+                logger.info('HMR update sent to client(s).');
+                return;
+            }
         }
     }
     // Send reload command to clients
     if (serverOptions.liveReload) {
+        // Clear used component tracking on full reload
+        componentStyles.forEach((record) => record.used?.clear());
         server.ws.send({
             type: 'full-reload',
             path: '*',
@@ -350,7 +391,7 @@ async function handleUpdate(normalizePath, generatedFiles, server, serverOptions
         logger.info('Page reload sent to client(s).');
     }
 }
-function analyzeResultFiles(normalizePath, htmlIndexPath, resultFiles, generatedFiles) {
+function analyzeResultFiles(normalizePath, htmlIndexPath, resultFiles, generatedFiles, componentStyles) {
     const seen = new Set(['/index.html']);
     for (const [outputPath, file] of Object.entries(resultFiles)) {
         if (file.origin === 'disk') {
@@ -373,6 +414,7 @@ function analyzeResultFiles(normalizePath, htmlIndexPath, resultFiles, generated
                 contents: file.contents,
                 servable,
                 size: file.contents.byteLength,
+                hash: file.hash,
                 type: file.type,
                 updated: false,
             });
@@ -395,15 +437,28 @@ function analyzeResultFiles(normalizePath, htmlIndexPath, resultFiles, generated
             type: file.type,
             servable,
         });
+        // Record any external component styles
+        if (filePath.endsWith('.css') && /^\/[a-f0-9]{64}\.css$/.test(filePath)) {
+            const componentStyle = componentStyles.get(filePath);
+            if (componentStyle) {
+                componentStyle.rawContent = file.contents;
+            }
+            else {
+                componentStyles.set(filePath, {
+                    rawContent: file.contents,
+                });
+            }
+        }
     }
     // Clear stale output files
     for (const file of generatedFiles.keys()) {
         if (!seen.has(file)) {
             generatedFiles.delete(file);
+            componentStyles.delete(file);
         }
     }
 }
-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, componentStyles, 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');
@@ -446,6 +501,8 @@ async function setupServer(serverOptions, outputFiles, assets, preserveSymlinks,
             host: serverOptions.host,
             open: serverOptions.open,
             headers: serverOptions.headers,
+            // Disable the websocket if live reload is disabled (false/undefined are the only valid values)
+            ws: serverOptions.liveReload === false && serverOptions.hmr === false ? false : undefined,
             proxy,
             cors: {
                 // Allow preflight requests to be proxied.
@@ -495,7 +552,8 @@ async function setupServer(serverOptions, outputFiles, assets, preserveSymlinks,
                 assets,
                 indexHtmlTransformer,
                 extensionMiddleware,
-                usedComponentStyles,
+                componentStyles,
+                templateUpdates,
                 ssrMode,
             }),
             (0, plugins_1.createRemoveIdPrefixPlugin)(externalMetadata.explicitBrowser),
@@ -504,6 +562,7 @@ async function setupServer(serverOptions, outputFiles, assets, preserveSymlinks,
                 virtualProjectRoot,
                 outputFiles,
                 external: externalMetadata.explicitBrowser,
+                skipViteClient: serverOptions.liveReload === false && serverOptions.hmr === false,
             }),
         ],
         // Browser only optimizeDeps. (This does not run for SSR dependencies).
@@ -568,6 +627,9 @@ function getDepOptimizationConfig({ disabled, exclude, include, target, zoneless
             supported: (0, internal_1.getFeatureSupport)(target, zoneless),
             plugins,
             loader,
+            define: {
+                'ngServerMode': `${ssr}`,
+            },
             resolveExtensions: ['.mjs', '.js', '.cjs'],
         },
     };

package/src/index.d.ts

@@ -6,6 +6,7 @@
  * found in the LICENSE file at https://angular.dev/license
  */
 export { buildApplication, type ApplicationBuilderOptions, type ApplicationBuilderOutput, } from './builders/application';
+export type { ApplicationBuilderExtensions } from './builders/application/options';
 export { type BuildOutputFile, BuildOutputFileType } from './tools/esbuild/bundler-context';
 export type { BuildOutputAsset } from './tools/esbuild/bundler-execution-result';
 export { executeDevServerBuilder, type DevServerBuilderOptions, type DevServerBuilderOutput, } from './builders/dev-server';

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,16 +113,14 @@ 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) {
         const resolvedPath = node_path_1.default.join(node_path_1.default.dirname(containingFile), resourceName);
-        // All resource names that have HTML file extensions are assumed to be templates
-        if (resourceName.endsWith('.html') || !hostOptions.externalStylesheets) {
+        // All resource names that have template file extensions are assumed to be templates
+        // TODO: Update compiler to provide the resource type to avoid extension matching here.
+        if (!hostOptions.externalStylesheets || hasTemplateExtension(resolvedPath)) {
             return resolvedPath;
         }
         // For external stylesheets, create a unique identifier and store the mapping
@@ -150,3 +148,13 @@ function createAngularCompilerHost(typescript, compilerOptions, hostOptions) {
     }
     return host;
 }
+function hasTemplateExtension(file) {
+    const extension = node_path_1.default.extname(file).toLowerCase();
+    switch (extension) {
+        case '.htm':
+        case '.html':
+        case '.svg':
+            return true;
+    }
+    return false;
+}

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

@@ -31,6 +31,7 @@ export declare abstract class AngularCompilation {
         compilerOptions: ng.CompilerOptions;
         referencedFiles: readonly string[];
         externalStylesheets?: ReadonlyMap<string, string>;
+        templateUpdates?: ReadonlyMap<string, string>;
     }>;
     abstract emitAffectedFiles(): Iterable<EmitFileResult> | Promise<Iterable<EmitFileResult>>;
     protected abstract collectDiagnostics(modes: DiagnosticModes): Iterable<ts.Diagnostic> | Promise<Iterable<ts.Diagnostic>>;

package/src/tools/angular/compilation/aot-compilation.d.ts

@@ -16,6 +16,7 @@ export declare class AotCompilation extends AngularCompilation {
         compilerOptions: ng.CompilerOptions;
         referencedFiles: readonly string[];
         externalStylesheets?: ReadonlyMap<string, string>;
+        templateUpdates?: ReadonlyMap<string, string>;
     }>;
     collectDiagnostics(modes: DiagnosticModes): Iterable<ts.Diagnostic>;
     emitAffectedFiles(): Iterable<EmitFileResult>;

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

@@ -12,6 +12,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.AotCompilation = void 0;
 const node_assert_1 = __importDefault(require("node:assert"));
+const node_path_1 = require("node:path");
 const typescript_1 = __importDefault(require("typescript"));
 const profiling_1 = require("../../esbuild/profiling");
 const angular_host_1 = require("../angular-host");
@@ -65,6 +66,33 @@ class AotCompilation extends angular_compilation_1.AngularCompilation {
         }
         const typeScriptProgram = typescript_1.default.createEmitAndSemanticDiagnosticsBuilderProgram(angularTypeScriptProgram, host, oldProgram, configurationDiagnostics);
         await (0, profiling_1.profileAsync)('NG_ANALYZE_PROGRAM', () => angularCompiler.analyzeAsync());
+        let templateUpdates;
+        if (compilerOptions['_enableHmr'] &&
+            hostOptions.modifiedFiles &&
+            hasOnlyTemplates(hostOptions.modifiedFiles)) {
+            const componentNodes = [...hostOptions.modifiedFiles].flatMap((file) => [
+                ...angularCompiler.getComponentsWithTemplateFile(file),
+            ]);
+            for (const node of componentNodes) {
+                if (!typescript_1.default.isClassDeclaration(node)) {
+                    continue;
+                }
+                const componentFilename = node.getSourceFile().fileName;
+                let relativePath = (0, node_path_1.relative)(host.getCurrentDirectory(), componentFilename);
+                if (relativePath.startsWith('..')) {
+                    relativePath = componentFilename;
+                }
+                const updateId = encodeURIComponent(`${host.getCanonicalFileName(relativePath)}@${node.name?.text}`);
+                const updateText = angularCompiler.emitHmrUpdateModule(node);
+                if (updateText === null) {
+                    // Build is needed if a template cannot be updated
+                    templateUpdates = undefined;
+                    break;
+                }
+                templateUpdates ??= new Map();
+                templateUpdates.set(updateId, updateText);
+            }
+        }
         const affectedFiles = (0, profiling_1.profileSync)('NG_FIND_AFFECTED', () => findAffectedFiles(typeScriptProgram, angularCompiler, usingBuildInfo));
         // Get all files referenced in the TypeScript/Angular program including component resources
         const referencedFiles = typeScriptProgram
@@ -90,6 +118,7 @@ class AotCompilation extends angular_compilation_1.AngularCompilation {
             compilerOptions,
             referencedFiles,
             externalStylesheets: hostOptions.externalStylesheets,
+            templateUpdates,
         };
     }
     *collectDiagnostics(modes) {
@@ -267,3 +296,13 @@ function findAffectedFiles(builder, { ignoreForDiagnostics }, includeTTC) {
     }
     return affectedFiles;
 }
+function hasOnlyTemplates(modifiedFiles) {
+    for (const file of modifiedFiles) {
+        const lowerFile = file.toLowerCase();
+        if (lowerFile.endsWith('.html') || lowerFile.endsWith('.svg')) {
+            continue;
+        }
+        return false;
+    }
+    return true;
+}

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

@@ -20,6 +20,7 @@ export interface InitRequest {
 }
 export declare function initialize(request: InitRequest): Promise<{
     externalStylesheets: ReadonlyMap<string, string> | undefined;
+    templateUpdates: ReadonlyMap<string, string> | undefined;
     referencedFiles: readonly string[];
     compilerOptions: {
         allowJs: boolean | undefined;

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

@@ -33,11 +33,11 @@ async function initialize(request) {
             stylesheetRequests.get(requestId)?.[0](value);
         }
     });
-    const { compilerOptions, referencedFiles, externalStylesheets } = await compilation.initialize(request.tsconfig, {
+    const { compilerOptions, referencedFiles, externalStylesheets, templateUpdates } = await compilation.initialize(request.tsconfig, {
         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;
         },
@@ -70,6 +72,7 @@ async function initialize(request) {
     });
     return {
         externalStylesheets,
+        templateUpdates,
         referencedFiles,
         // TODO: Expand? `allowJs`, `isolatedModules`, `sourceMap`, `inlineSourceMap` are the only fields needed currently.
         compilerOptions: {

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';
@@ -23,7 +23,6 @@ export interface CompilerPluginOptions {
     incremental: boolean;
     externalRuntimeStyles?: boolean;
     instrumentForCoverage?: (request: string) => boolean;
+    templateUpdates?: Map<string, string>;
 }
-export declare function createCompilerPlugin(pluginOptions: CompilerPluginOptions, styleOptions: BundleStylesheetOptions & {
-    inlineStyleLanguage: string;
-}): Plugin;
+export declare function createCompilerPlugin(pluginOptions: CompilerPluginOptions, stylesheetBundler: ComponentStylesheetBundler): Plugin;