@angular/build 19.0.0-next.7 → 19.0.0-next.9

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

@@ -39,10 +39,9 @@ const node_assert_1 = __importDefault(require("node:assert"));
 const promises_1 = require("node:fs/promises");
 const node_module_1 = require("node:module");
 const node_path_1 = require("node:path");
-const angular_memory_plugin_1 = require("../../tools/vite/angular-memory-plugin");
-const i18n_locale_plugin_1 = require("../../tools/vite/i18n-locale-plugin");
-const id_prefix_plugin_1 = require("../../tools/vite/id-prefix-plugin");
+const plugins_1 = require("../../tools/vite/plugins");
 const utils_1 = require("../../utils");
+const environment_options_1 = require("../../utils/environment-options");
 const load_esm_1 = require("../../utils/load-esm");
 const results_1 = require("../application/results");
 const internal_1 = require("./internal");
@@ -66,17 +65,17 @@ 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 || browserOptions.ssr) {
+    if (browserOptions.prerender) {
         // 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;
-        // Avoid bundling and processing the ssr entry-point as this is not used by the dev-server.
-        browserOptions.ssr = true;
-        // https://nodejs.org/api/process.html#processsetsourcemapsenabledval
-        process.setSourceMapsEnabled(true);
+        browserOptions.ssr ||= true;
     }
     // Set all packages as external to support Vite's prebundle caching
     browserOptions.externalPackages = serverOptions.prebundle;
+    // Disable generating a full manifest with routes.
+    // This is done during runtime when using the dev-server.
+    browserOptions.partialSSRBuild = true;
     // The development server currently only supports a single locale when localizing.
     // This matches the behavior of the Webpack-based development server but could be expanded in the future.
     if (browserOptions.localize === true ||
@@ -88,7 +87,13 @@ async function* serveWithVite(serverOptions, builderName, builderAction, context
         // When localization is enabled with a single locale, force a flat path to maintain behavior with the existing Webpack-based dev server.
         browserOptions.forceI18nFlatOutput = true;
     }
-    const { vendor: thirdPartySourcemaps } = (0, utils_1.normalizeSourceMaps)(browserOptions.sourceMap ?? false);
+    const { vendor: thirdPartySourcemaps, scripts: scriptsSourcemaps } = (0, utils_1.normalizeSourceMaps)(browserOptions.sourceMap ?? false);
+    if (scriptsSourcemaps && browserOptions.server) {
+        // 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;
     // 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.
@@ -124,7 +129,7 @@ async function* serveWithVite(serverOptions, builderName, builderAction, context
             case results_1.ResultKind.Failure:
                 if (result.errors.length && server) {
                     hadError = true;
-                    server.hot.send({
+                    server.ws.send({
                         type: 'error',
                         err: {
                             message: result.errors[0].text,
@@ -171,7 +176,7 @@ async function* serveWithVite(serverOptions, builderName, builderAction, context
         if (hadError && server) {
             hadError = false;
             // Send an empty update to clear the error overlay
-            server.hot.send({
+            server.ws.send({
                 'type': 'update',
                 updates: [],
             });
@@ -180,8 +185,8 @@ async function* serveWithVite(serverOptions, builderName, builderAction, context
         let requiresServerRestart = false;
         if (result.detail?.['externalMetadata']) {
             const { implicitBrowser, implicitServer, explicit } = result.detail['externalMetadata'];
-            const implicitServerFiltered = implicitServer.filter((m) => removeNodeJsBuiltinModules(m) && removeAbsoluteUrls(m));
-            const implicitBrowserFiltered = implicitBrowser.filter(removeAbsoluteUrls);
+            const implicitServerFiltered = implicitServer.filter((m) => !(0, node_module_1.isBuiltin)(m) && !isAbsoluteUrl(m));
+            const implicitBrowserFiltered = implicitBrowser.filter((m) => !isAbsoluteUrl(m));
             if (browserOptions.ssr && serverOptions.prebundle !== false) {
                 const previousImplicitServer = new Set(externalMetadata.implicitServer);
                 // Restart the server to force SSR dep re-optimization when a dependency has been added.
@@ -194,7 +199,7 @@ async function* serveWithVite(serverOptions, builderName, builderAction, context
             externalMetadata.implicitServer.length = 0;
             externalMetadata.implicitBrowser.length = 0;
             externalMetadata.explicitBrowser.push(...explicit);
-            externalMetadata.explicitServer.push(...explicit, ...nodeJsBuiltinModules);
+            externalMetadata.explicitServer.push(...explicit, ...node_module_1.builtinModules);
             externalMetadata.implicitServer.push(...implicitServerFiltered);
             externalMetadata.implicitBrowser.push(...implicitBrowserFiltered);
             // The below needs to be sorted as Vite uses these options are part of the hashing invalidation algorithm.
@@ -238,15 +243,19 @@ async function* serveWithVite(serverOptions, builderName, builderAction, context
             const polyfills = Array.isArray((browserOptions.polyfills ??= []))
                 ? browserOptions.polyfills
                 : [browserOptions.polyfills];
+            let ssrMode = plugins_1.ServerSsrMode.NoSsr;
+            if (browserOptions.outputMode &&
+                typeof browserOptions.ssr === 'object' &&
+                browserOptions.ssr.entry) {
+                ssrMode = plugins_1.ServerSsrMode.ExternalSsrMiddleware;
+            }
+            else if (browserOptions.server) {
+                ssrMode = plugins_1.ServerSsrMode.InternalSsrMiddleware;
+            }
             // Setup server and start listening
-            const serverConfiguration = await setupServer(serverOptions, generatedFiles, assetFiles, browserOptions.preserveSymlinks, externalMetadata, !!browserOptions.ssr, 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, browserOptions.loader, extensions?.middleware, transformers?.indexHtml, thirdPartySourcemaps);
             server = await createServer(serverConfiguration);
             await server.listen();
-            if (browserOptions.ssr && serverOptions.prebundle !== false) {
-                // Warm up the SSR request and begin optimizing dependencies.
-                // Without this, Vite will only start optimizing SSR modules when the first request is made.
-                void server.warmupRequest('./main.server.mjs', { ssr: true });
-            }
             const urls = server.resolvedUrls;
             if (urls && (urls.local.length || urls.network.length)) {
                 serverUrl = new URL(urls.local[0] ?? urls.network[0]);
@@ -260,7 +269,7 @@ async function* serveWithVite(serverOptions, builderName, builderAction, context
                         key: 'r',
                         description: 'force reload browser',
                         action(server) {
-                            server.hot.send({
+                            server.ws.send({
                                 type: 'full-reload',
                                 path: '*',
                             });
@@ -280,28 +289,30 @@ async function* serveWithVite(serverOptions, builderName, builderAction, context
 }
 async function handleUpdate(normalizePath, generatedFiles, server, serverOptions, logger, usedComponentStyles) {
     const updatedFiles = [];
-    let isServerFileUpdated = false;
+    let destroyAngularServerAppCalled = false;
     // Invalidate any updated files
-    for (const [file, record] of generatedFiles) {
-        if (record.updated) {
-            updatedFiles.push(file);
-            isServerFileUpdated ||= record.type === internal_1.BuildOutputFileType.Server;
-            const updatedModules = server.moduleGraph.getModulesByFile(normalizePath((0, node_path_1.join)(server.config.root, file)));
-            updatedModules?.forEach((m) => server?.moduleGraph.invalidateModule(m));
+    for (const [file, { updated, type }] of generatedFiles) {
+        if (!updated) {
+            continue;
+        }
+        if (type === internal_1.BuildOutputFileType.ServerApplication && !destroyAngularServerAppCalled) {
+            // Clear the server app cache
+            // This must be done before module invalidation.
+            const { ɵdestroyAngularServerApp } = (await server.ssrLoadModule('/main.server.mjs'));
+            ɵdestroyAngularServerApp();
+            destroyAngularServerAppCalled = true;
         }
+        updatedFiles.push(file);
+        const updatedModules = server.moduleGraph.getModulesByFile(normalizePath((0, node_path_1.join)(server.config.root, file)));
+        updatedModules?.forEach((m) => server.moduleGraph.invalidateModule(m));
     }
     if (!updatedFiles.length) {
         return;
     }
-    // clean server apps cache
-    if (isServerFileUpdated) {
-        const { ɵdestroyAngularServerApp } = (await server.ssrLoadModule('/main.server.mjs'));
-        ɵdestroyAngularServerApp();
-    }
     if (serverOptions.liveReload || serverOptions.hmr) {
         if (updatedFiles.every((f) => f.endsWith('.css'))) {
             const timestamp = Date.now();
-            server.hot.send({
+            server.ws.send({
                 type: 'update',
                 updates: updatedFiles.flatMap((filePath) => {
                     // For component styles, an HMR update must be sent for each one with the corresponding
@@ -332,7 +343,7 @@ async function handleUpdate(normalizePath, generatedFiles, server, serverOptions
     }
     // Send reload command to clients
     if (serverOptions.liveReload) {
-        server.hot.send({
+        server.ws.send({
             type: 'full-reload',
             path: '*',
         });
@@ -392,13 +403,13 @@ function analyzeResultFiles(normalizePath, htmlIndexPath, resultFiles, generated
         }
     }
 }
-async function setupServer(serverOptions, outputFiles, assets, preserveSymlinks, externalMetadata, ssr, prebundleTransformer, target, zoneless, usedComponentStyles, prebundleLoaderExtensions, extensionMiddleware, indexHtmlTransformer, thirdPartySourcemaps = false) {
+async function setupServer(serverOptions, outputFiles, assets, preserveSymlinks, externalMetadata, ssrMode, prebundleTransformer, target, zoneless, usedComponentStyles, 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');
     // Path will not exist on disk and only used to provide separate path for Vite requests
     const virtualProjectRoot = normalizePath((0, node_path_1.join)(serverOptions.workspaceRoot, `.angular/vite-root`, serverOptions.buildTarget.project));
-    const cacheDir = (0, node_path_1.join)(serverOptions.cacheOptions.path, 'vite');
+    const cacheDir = (0, node_path_1.join)(serverOptions.cacheOptions.path, serverOptions.buildTarget.project, 'vite');
     const configuration = {
         configFile: false,
         envFile: false,
@@ -427,6 +438,9 @@ async function setupServer(serverOptions, outputFiles, assets, preserveSymlinks,
             preserveSymlinks,
         },
         server: {
+            warmup: {
+                ssrFiles: ['./main.server.mjs', './server.mjs'],
+            },
             port: serverOptions.port,
             strictPort: true,
             host: serverOptions.host,
@@ -475,20 +489,22 @@ async function setupServer(serverOptions, outputFiles, assets, preserveSymlinks,
             }),
         },
         plugins: [
-            (0, i18n_locale_plugin_1.createAngularLocaleDataPlugin)(),
-            (0, angular_memory_plugin_1.createAngularMemoryPlugin)({
-                workspaceRoot: serverOptions.workspaceRoot,
-                virtualProjectRoot,
+            (0, plugins_1.createAngularLocaleDataPlugin)(),
+            (0, plugins_1.createAngularSetupMiddlewaresPlugin)({
                 outputFiles,
                 assets,
-                ssr,
-                external: externalMetadata.explicitBrowser,
                 indexHtmlTransformer,
                 extensionMiddleware,
-                normalizePath,
                 usedComponentStyles,
+                ssrMode,
+            }),
+            (0, plugins_1.createRemoveIdPrefixPlugin)(externalMetadata.explicitBrowser),
+            await (0, plugins_1.createAngularSsrTransformPlugin)(serverOptions.workspaceRoot),
+            await (0, plugins_1.createAngularMemoryPlugin)({
+                virtualProjectRoot,
+                outputFiles,
+                external: externalMetadata.explicitBrowser,
             }),
-            (0, id_prefix_plugin_1.createRemoveIdPrefixPlugin)(externalMetadata.explicitBrowser),
         ],
         // Browser only optimizeDeps. (This does not run for SSR dependencies).
         optimizeDeps: getDepOptimizationConfig({
@@ -556,12 +572,14 @@ function getDepOptimizationConfig({ disabled, exclude, include, target, zoneless
         },
     };
 }
-const nodeJsBuiltinModules = new Set(node_module_1.builtinModules);
-/** Remove any Node.js builtin modules to avoid Vite's prebundling from processing them as files. */
-function removeNodeJsBuiltinModules(value) {
-    return !nodeJsBuiltinModules.has(value);
-}
-/** Remove any absolute URLs (http://, https://, //) to avoid Vite's prebundling from processing them as files. */
-function removeAbsoluteUrls(value) {
-    return !/^(?:https?:)?\/\//.test(value);
+/**
+ * Checks if the given value is an absolute URL.
+ *
+ * This function helps in avoiding Vite's prebundling from processing absolute URLs (http://, https://, //) as files.
+ *
+ * @param value - The URL or path to check.
+ * @returns `true` if the value is not an absolute URL; otherwise, `false`.
+ */
+function isAbsoluteUrl(value) {
+    return /^(?:https?:)?\/\//.test(value);
 }

package/src/builders/extract-i18n/application-extraction.js

@@ -15,6 +15,7 @@ const node_fs_1 = require("node:fs");
 const node_path_1 = __importDefault(require("node:path"));
 const application_1 = require("../application");
 const results_1 = require("../application/results");
+const schema_1 = require("../application/schema");
 async function extractMessages(options, builderName, context, extractorConstructor, extensions) {
     const messages = [];
     // Setup the build options for the application based on the buildTarget option
@@ -25,9 +26,8 @@ async function extractMessages(options, builderName, context, extractorConstruct
     buildOptions.budgets = undefined;
     buildOptions.index = false;
     buildOptions.serviceWorker = false;
-    buildOptions.ssr = false;
-    buildOptions.appShell = false;
-    buildOptions.prerender = false;
+    buildOptions.outputMode = schema_1.OutputMode.Static;
+    buildOptions.server = undefined;
     // Build the application with the build options
     const builderResult = await first((0, application_1.buildApplicationInternal)(buildOptions, context, extensions));
     let success = false;

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

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

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

@@ -12,6 +12,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ensureSourceFileVersions = ensureSourceFileVersions;
 exports.createAngularCompilerHost = createAngularCompilerHost;
+const node_assert_1 = __importDefault(require("node:assert"));
 const node_crypto_1 = require("node:crypto");
 const node_path_1 = __importDefault(require("node:path"));
 /**
@@ -107,13 +108,31 @@ function createAngularCompilerHost(typescript, compilerOptions, hostOptions) {
         if (context.type !== 'style') {
             return null;
         }
+        (0, node_assert_1.default)(!context.resourceFile || !hostOptions.externalStylesheets?.has(context.resourceFile), 'External runtime stylesheets should not be transformed: ' + context.resourceFile);
         // No transformation required if the resource is empty
         if (data.trim().length === 0) {
             return { content: '' };
         }
-        const result = await hostOptions.transformStylesheet(data, context.containingFile, context.resourceFile ?? undefined);
+        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);
         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) {
+            return resolvedPath;
+        }
+        // For external stylesheets, create a unique identifier and store the mapping
+        let externalId = hostOptions.externalStylesheets.get(resolvedPath);
+        if (externalId === undefined) {
+            externalId = (0, node_crypto_1.createHash)('sha256').update(resolvedPath).digest('hex');
+            hostOptions.externalStylesheets.set(resolvedPath, externalId);
+        }
+        return externalId + '.css';
+    };
     // Allow the AOT compiler to request the set of changed templates and styles
     host.getModifiedResourceFiles = function () {
         return hostOptions.modifiedFiles;

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

@@ -30,6 +30,7 @@ export declare abstract class AngularCompilation {
         affectedFiles: ReadonlySet<ts.SourceFile>;
         compilerOptions: ng.CompilerOptions;
         referencedFiles: readonly string[];
+        externalStylesheets?: 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

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

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

@@ -47,6 +47,9 @@ class AotCompilation extends angular_compilation_1.AngularCompilation {
         // Load the compiler configuration and transform as needed
         const { options: originalCompilerOptions, rootNames, errors: configurationDiagnostics, } = await this.loadConfiguration(tsconfig);
         const compilerOptions = compilerOptionsTransformer?.(originalCompilerOptions) ?? originalCompilerOptions;
+        if (compilerOptions.externalRuntimeStyles) {
+            hostOptions.externalStylesheets ??= new Map();
+        }
         // Create Angular compiler host
         const host = (0, angular_host_1.createAngularCompilerHost)(typescript_1.default, compilerOptions, hostOptions);
         // Create the Angular specific program that contains the Angular compiler
@@ -82,7 +85,12 @@ class AotCompilation extends angular_compilation_1.AngularCompilation {
             return [sourceFile.fileName, ...resourceDependencies];
         });
         this.#state = new AngularCompilationState(angularProgram, host, typeScriptProgram, affectedFiles, affectedFiles.size === 1 ? OptimizeFor.SingleFile : OptimizeFor.WholeProgram, (0, web_worker_transformer_1.createWorkerTransformer)(hostOptions.processWebWorker.bind(hostOptions)), this.#state?.diagnosticCache);
-        return { affectedFiles, compilerOptions, referencedFiles };
+        return {
+            affectedFiles,
+            compilerOptions,
+            referencedFiles,
+            externalStylesheets: hostOptions.externalStylesheets,
+        };
     }
     *collectDiagnostics(modes) {
         (0, node_assert_1.default)(this.#state, 'Angular compilation must be initialized prior to collecting diagnostics.');

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

@@ -26,6 +26,7 @@ export declare class ParallelCompilation extends AngularCompilation {
         affectedFiles: ReadonlySet<SourceFile>;
         compilerOptions: CompilerOptions;
         referencedFiles: readonly string[];
+        externalStylesheets?: ReadonlyMap<string, string>;
     }>;
     /**
      * This is not needed with this compilation type since the worker will already send a response

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

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

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

@@ -33,7 +33,7 @@ async function initialize(request) {
             stylesheetRequests.get(requestId)?.[0](value);
         }
     });
-    const { compilerOptions, referencedFiles } = await compilation.initialize(request.tsconfig, {
+    const { compilerOptions, referencedFiles, externalStylesheets } = await compilation.initialize(request.tsconfig, {
         fileReplacements: request.fileReplacements,
         sourceFileCache,
         modifiedFiles: sourceFileCache.modifiedFiles,
@@ -69,6 +69,7 @@ async function initialize(request) {
         return result?.transformedOptions ?? compilerOptions;
     });
     return {
+        externalStylesheets,
         referencedFiles,
         // TODO: Expand? `allowJs`, `isolatedModules`, `sourceMap`, `inlineSourceMap` are the only fields needed currently.
         compilerOptions: {

package/src/tools/babel/plugins/add-code-coverage.d.ts

@@ -0,0 +1,14 @@
+/**
+ * @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 { PluginObj } from '@babel/core';
+/**
+ * A babel plugin factory function for adding istanbul instrumentation.
+ *
+ * @returns A babel plugin object instance.
+ */
+export default function (): PluginObj;

package/src/tools/babel/plugins/add-code-coverage.js

@@ -0,0 +1,44 @@
+"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
+ */
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = default_1;
+const core_1 = require("@babel/core");
+const istanbul_lib_instrument_1 = require("istanbul-lib-instrument");
+const node_assert_1 = __importDefault(require("node:assert"));
+/**
+ * A babel plugin factory function for adding istanbul instrumentation.
+ *
+ * @returns A babel plugin object instance.
+ */
+function default_1() {
+    const visitors = new WeakMap();
+    return {
+        visitor: {
+            Program: {
+                enter(path, state) {
+                    const visitor = (0, istanbul_lib_instrument_1.programVisitor)(core_1.types, state.filename, {
+                        // Babel returns a Converter object from the `convert-source-map` package
+                        inputSourceMap: state.file.inputMap?.toObject(),
+                    });
+                    visitors.set(path, visitor);
+                    visitor.enter(path);
+                },
+                exit(path) {
+                    const visitor = visitors.get(path);
+                    (0, node_assert_1.default)(visitor, 'Instrumentation visitor should always be present for program path.');
+                    visitor.exit(path);
+                    visitors.delete(path);
+                },
+            },
+        },
+    };
+}

package/src/tools/babel/plugins/types.d.ts

@@ -0,0 +1,20 @@
+/**
+ * @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
+ */
+
+declare module 'istanbul-lib-instrument' {
+  export interface Visitor {
+    enter(path: import('@babel/core').NodePath<types.Program>): void;
+    exit(path: import('@babel/core').NodePath<types.Program>): void;
+  }
+
+  export function programVisitor(
+    types: typeof import('@babel/core').types,
+    filePath?: string,
+    options?: { inputSourceMap?: object | null },
+  ): Visitor;
+}

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

@@ -21,6 +21,8 @@ export interface CompilerPluginOptions {
     sourceFileCache?: SourceFileCache;
     loadResultCache?: LoadResultCache;
     incremental: boolean;
+    externalRuntimeStyles?: boolean;
+    instrumentForCoverage?: (request: string) => boolean;
 }
 export declare function createCompilerPlugin(pluginOptions: CompilerPluginOptions, styleOptions: BundleStylesheetOptions & {
     inlineStyleLanguage: string;

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

@@ -35,6 +35,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.createCompilerPlugin = createCompilerPlugin;
 const node_assert_1 = __importDefault(require("node:assert"));
+const node_crypto_1 = require("node:crypto");
 const path = __importStar(require("node:path"));
 const environment_options_1 = require("../../../utils/environment-options");
 const compilation_1 = require("../../angular/compilation");
@@ -120,13 +121,14 @@ function createCompilerPlugin(pluginOptions, styleOptions) {
                 // Angular compiler which does not have direct knowledge of transitive resource
                 // dependencies or web worker processing.
                 let modifiedFiles;
+                let invalidatedStylesheetEntries;
                 if (pluginOptions.sourceFileCache?.modifiedFiles.size &&
                     referencedFileTracker &&
                     !pluginOptions.noopTypeScriptCompilation) {
                     // TODO: Differentiate between changed input files and stale output files
                     modifiedFiles = referencedFileTracker.update(pluginOptions.sourceFileCache.modifiedFiles);
                     pluginOptions.sourceFileCache.invalidate(modifiedFiles);
-                    stylesheetBundler.invalidate(modifiedFiles);
+                    invalidatedStylesheetEntries = stylesheetBundler.invalidate(modifiedFiles);
                 }
                 if (!pluginOptions.noopTypeScriptCompilation &&
                     compilation.update &&
@@ -138,7 +140,7 @@ function createCompilerPlugin(pluginOptions, styleOptions) {
                     fileReplacements: pluginOptions.fileReplacements,
                     modifiedFiles,
                     sourceFileCache: pluginOptions.sourceFileCache,
-                    async transformStylesheet(data, containingFile, stylesheetFile) {
+                    async transformStylesheet(data, containingFile, stylesheetFile, order) {
                         let stylesheetResult;
                         // Stylesheet file only exists for external stylesheets
                         if (stylesheetFile) {
@@ -147,7 +149,17 @@ function createCompilerPlugin(pluginOptions, styleOptions) {
                         else {
                             stylesheetResult = await stylesheetBundler.bundleInline(data, containingFile, 
                             // Inline stylesheets from a template style element are always CSS
-                            containingFile.endsWith('.html') ? 'css' : styleOptions.inlineStyleLanguage);
+                            containingFile.endsWith('.html') ? 'css' : styleOptions.inlineStyleLanguage, 
+                            // When external runtime styles are enabled, an identifier for the style that does not change
+                            // based on the content is required to avoid emitted JS code changes. Any JS code changes will
+                            // invalid the output and force a full page reload for HMR cases. The containing file and order
+                            // of the style within the containing file is used.
+                            pluginOptions.externalRuntimeStyles
+                                ? (0, node_crypto_1.createHash)('sha-256')
+                                    .update(containingFile)
+                                    .update((order ?? 0).toString())
+                                    .digest('hex')
+                                : undefined);
                         }
                         const { contents, outputFiles, metafile, referencedFiles, errors, warnings } = stylesheetResult;
                         if (errors) {
@@ -201,6 +213,7 @@ function createCompilerPlugin(pluginOptions, styleOptions) {
                 // Initialize the Angular compilation for the current build.
                 // In watch mode, previous build state will be reused.
                 let referencedFiles;
+                let externalStylesheets;
                 try {
                     const initializationResult = await compilation.initialize(pluginOptions.tsconfig, hostOptions, createCompilerOptionsTransformer(setupWarnings, pluginOptions, preserveSymlinks));
                     shouldTsIgnoreJs = !initializationResult.compilerOptions.allowJs;
@@ -211,6 +224,7 @@ function createCompilerPlugin(pluginOptions, styleOptions) {
                             !!initializationResult.compilerOptions.sourceMap ||
                             !!initializationResult.compilerOptions.inlineSourceMap;
                     referencedFiles = initializationResult.referencedFiles;
+                    externalStylesheets = initializationResult.externalStylesheets;
                 }
                 catch (error) {
                     (result.errors ??= []).push({
@@ -231,6 +245,19 @@ function createCompilerPlugin(pluginOptions, styleOptions) {
                     hasCompilationErrors = await sharedTSCompilationState.waitUntilReady;
                     return result;
                 }
+                if (externalStylesheets) {
+                    // Process any new external stylesheets
+                    for (const [stylesheetFile, externalId] of externalStylesheets) {
+                        await bundleExternalStylesheet(stylesheetBundler, stylesheetFile, externalId, result, additionalResults);
+                    }
+                    // Process any updated stylesheets
+                    if (invalidatedStylesheetEntries) {
+                        for (const stylesheetFile of invalidatedStylesheetEntries) {
+                            // externalId is already linked in the bundler context so only enabling is required here
+                            await bundleExternalStylesheet(stylesheetBundler, stylesheetFile, true, result, additionalResults);
+                        }
+                    }
+                }
                 // Update TypeScript file output cache for all affected files
                 try {
                     await (0, profiling_1.profileAsync)('NG_EMIT_TS', async () => {
@@ -312,7 +339,8 @@ function createCompilerPlugin(pluginOptions, styleOptions) {
                     // A string indicates untransformed output from the TS/NG compiler.
                     // This step is unneeded when using esbuild transpilation.
                     const sideEffects = await hasSideEffects(request);
-                    contents = await javascriptTransformer.transformData(request, contents, true /* skipLinker */, sideEffects);
+                    const instrumentForCoverage = pluginOptions.instrumentForCoverage?.(request);
+                    contents = await javascriptTransformer.transformData(request, contents, true /* skipLinker */, sideEffects, instrumentForCoverage);
                     // Store as the returned Uint8Array to allow caching the fully transformed code
                     typeScriptFileCache.set(request, contents);
                 }
@@ -376,6 +404,17 @@ function createCompilerPlugin(pluginOptions, styleOptions) {
         },
     };
 }
+async function bundleExternalStylesheet(stylesheetBundler, stylesheetFile, externalId, result, additionalResults) {
+    const { outputFiles, metafile, errors, warnings } = await stylesheetBundler.bundleFile(stylesheetFile, externalId);
+    if (errors) {
+        (result.errors ??= []).push(...errors);
+    }
+    (result.warnings ??= []).push(...warnings);
+    additionalResults.set(stylesheetFile, {
+        outputFiles,
+        metafile,
+    });
+}
 function createCompilerOptionsTransformer(setupWarnings, pluginOptions, preserveSymlinks) {
     return (compilerOptions) => {
         // target of 9 is ES2022 (using the number avoids an expensive import of typescript just for an enum)
@@ -433,6 +472,7 @@ function createCompilerOptionsTransformer(setupWarnings, pluginOptions, preserve
             mapRoot: undefined,
             sourceRoot: undefined,
             preserveSymlinks,
+            externalRuntimeStyles: pluginOptions.externalRuntimeStyles,
         };
     };
 }