@angular/build 19.0.0-next.8 → 19.0.0-rc.0

package/src/builders/application/schema.json

@@ -18,7 +18,18 @@
     },
     "server": {
       "type": "string",
-      "description": "The full path for the server entry point to the application, relative to the current workspace."
+      "description": "The full path for the server entry point to the application, relative to the current workspace.",
+      "oneOf": [
+        {
+          "type": "string",
+          "description": "The full path for the server entry point to the application, relative to the current workspace."
+        },
+        {
+          "const": false,
+          "type": "boolean",
+          "description": "Indicates that a server entry point is not provided."
+        }
+      ]
     },
     "polyfills": {
       "description": "A list of polyfills to include in the build. Can be a full path for a file, relative to the current workspace or module specifier. Example: 'zone.js'.",
@@ -37,6 +48,33 @@
       "type": "string",
       "description": "Customize the base path for the URLs of resources in 'index.html' and component stylesheets. This option is only necessary for specific deployment scenarios, such as with Angular Elements or when utilizing different CDN locations."
     },
+    "security": {
+      "description": "Security features to protect against XSS and other common attacks",
+      "type": "object",
+      "additionalProperties": false,
+      "properties": {
+        "autoCsp": {
+          "description": "Enables automatic generation of a hash-based Strict Content Security Policy (https://web.dev/articles/strict-csp#choose-hash) based on scripts in index.html. Will default to true once we are out of experimental/preview phases.",
+          "default": false,
+          "oneOf": [
+            {
+              "type": "object",
+              "properties": {
+                "unsafeEval": {
+                  "type": "boolean",
+                  "description": "Include the `unsafe-eval` directive (https://web.dev/articles/strict-csp#remove-eval) in the auto-CSP. Please only enable this if you are absolutely sure that you need to, as allowing calls to eval will weaken the XSS defenses provided by the auto-CSP.",
+                  "default": false
+                }
+              },
+              "additionalProperties": false
+            },
+            {
+              "type": "boolean"
+            }
+          ]
+        }
+      }
+    },
     "scripts": {
       "description": "Global scripts to be included in the build.",
       "type": "array",
@@ -125,6 +163,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
@@ -481,7 +547,6 @@
     },
     "prerender": {
       "description": "Prerender (SSG) pages of your application during build time.",
-      "default": false,
       "oneOf": [
         {
           "type": "boolean",
@@ -518,6 +583,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
@@ -526,8 +596,7 @@
     },
     "appShell": {
       "type": "boolean",
-      "description": "Generates an application shell during build time.",
-      "default": false
+      "description": "Generates an application shell during build time."
     },
     "outputMode": {
       "type": "string",

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

@@ -16,7 +16,7 @@ import type { DevServerBuilderOutput } from './output';
 interface OutputFileRecord {
     contents: Uint8Array;
     size: number;
-    hash?: string;
+    hash: string;
     updated: boolean;
     servable: boolean;
     type: BuildOutputFileType;
@@ -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

@@ -65,10 +65,11 @@ 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
     browserOptions.externalPackages = serverOptions.prebundle;
@@ -91,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.
@@ -115,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 () => {
@@ -128,7 +135,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,
@@ -156,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;
@@ -165,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;
@@ -175,7 +194,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: [],
             });
@@ -248,11 +267,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), usedComponentStyles, templateUpdates, browserOptions.loader, extensions?.middleware, transformers?.indexHtml, thirdPartySourcemaps);
             server = await createServer(serverConfiguration);
             await server.listen();
             const urls = server.resolvedUrls;
@@ -268,7 +293,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: '*',
                             });
@@ -311,7 +336,7 @@ async function handleUpdate(normalizePath, generatedFiles, server, serverOptions
     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
@@ -321,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}` : ''),
@@ -342,7 +367,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: '*',
         });
@@ -372,6 +397,7 @@ function analyzeResultFiles(normalizePath, htmlIndexPath, resultFiles, generated
                 contents: file.contents,
                 servable,
                 size: file.contents.byteLength,
+                hash: file.hash,
                 type: file.type,
                 updated: false,
             });
@@ -402,13 +428,13 @@ 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');
     // 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,
@@ -495,6 +521,7 @@ async function setupServer(serverOptions, outputFiles, assets, preserveSymlinks,
                 indexHtmlTransformer,
                 extensionMiddleware,
                 usedComponentStyles,
+                templateUpdates,
                 ssrMode,
             }),
             (0, plugins_1.createRemoveIdPrefixPlugin)(externalMetadata.explicitBrowser),
@@ -567,6 +594,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,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/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/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);
+                },
+            },
+        },
+    };
+}