refactor(@angular/build): integrate template update function generation with builder results

When using the development server with the application builder (default for new projects),
experimental support for component template hot replacement is now available for use. To
enable support, the `NG_HMR_TEMPLATES=1` environment variable must present when executing
the development server (for example, `NG_HMR_TEMPLATES=1 ng serve`). Once support has become
stable, template hot replacement will be enabled by default.

Author: clydin

packages/angular/build/src/builders/application/build-action.ts

@@ -16,7 +16,7 @@ import { logMessages, withNoProgress, withSpinner } from '../../tools/esbuild/ut
 import { shouldWatchRoot } from '../../utils/environment-options';
 import { NormalizedCachedOptions } from '../../utils/normalize-cache';
 import { NormalizedApplicationBuildOptions, NormalizedOutputOptions } from './options';
-import { FullResult, Result, ResultKind, ResultMessage } from './results';
+import { ComponentUpdateResult, FullResult, Result, ResultKind, ResultMessage } from './results';
 
 // Watch workspace for package manager changes
 const packageWatchFiles = [
@@ -207,6 +207,7 @@ async function emitOutputResult(
     externalMetadata,
     htmlIndexPath,
     htmlBaseHref,
+    templateUpdates,
   }: ExecutionResult,
   outputOptions: NormalizedApplicationBuildOptions['outputOptions'],
 ): Promise<Result> {
@@ -221,6 +222,20 @@ async function emitOutputResult(
     };
   }
 
+  // Template updates only exist if no other changes have occurred
+  if (templateUpdates?.size) {
+    const updateResult: ComponentUpdateResult = {
+      kind: ResultKind.ComponentUpdate,
+      updates: Array.from(templateUpdates).map(([id, content]) => ({
+        type: 'template',
+        id,
+        content,
+      })),
+    };
+
+    return updateResult;
+  }
+
   const result: FullResult = {
     kind: ResultKind.Full,
     warnings: warnings as ResultMessage[],

packages/angular/build/src/builders/application/execute-build.ts

@@ -49,7 +49,6 @@ export async function executeBuild(
     i18nOptions,
     optimizationOptions,
     assets,
-    outputMode,
     cacheOptions,
     serverEntryPoint,
     baseHref,
@@ -73,10 +72,15 @@ export async function executeBuild(
   let componentStyleBundler;
   let codeBundleCache;
   let bundlingResult: BundleContextResult;
+  let templateUpdates: Map<string, string> | undefined;
   if (rebuildState) {
     bundlerContexts = rebuildState.rebuildContexts;
     componentStyleBundler = rebuildState.componentStyleBundler;
     codeBundleCache = rebuildState.codeBundleCache;
+    templateUpdates = rebuildState.templateUpdates;
+    // Reset template updates for new rebuild
+    templateUpdates?.clear();
+
     const allFileChanges = rebuildState.fileChanges.all;
 
     // Bundle all contexts that do not require TypeScript changed file checks.
@@ -85,7 +89,6 @@ export async function executeBuild(
 
     // Check the TypeScript code bundling cache for changes. If invalid, force a rebundle of
     // all TypeScript related contexts.
-    // TODO: Enable cached bundling for the typescript contexts
     const forceTypeScriptRebuild = codeBundleCache?.invalidate(allFileChanges);
     const typescriptResults: BundleContextResult[] = [];
     for (const typescriptContext of bundlerContexts.typescriptContexts) {
@@ -98,7 +101,16 @@ export async function executeBuild(
     const target = transformSupportedBrowsersToTargets(browsers);
     codeBundleCache = new SourceFileCache(cacheOptions.enabled ? cacheOptions.path : undefined);
     componentStyleBundler = createComponentStyleBundler(options, target);
-    bundlerContexts = setupBundlerContexts(options, target, codeBundleCache, componentStyleBundler);
+    if (options.templateUpdates) {
+      templateUpdates = new Map<string, string>();
+    }
+    bundlerContexts = setupBundlerContexts(
+      options,
+      target,
+      codeBundleCache,
+      componentStyleBundler,
+      templateUpdates,
+    );
 
     // Bundle everything on initial build
     bundlingResult = await BundlerContext.bundleAll([
@@ -129,6 +141,7 @@ export async function executeBuild(
     bundlerContexts,
     componentStyleBundler,
     codeBundleCache,
+    templateUpdates,
   );
   executionResult.addWarnings(bundlingResult.warnings);
 

packages/angular/build/src/builders/application/setup-bundling.ts

@@ -34,6 +34,7 @@ export function setupBundlerContexts(
   target: string[],
   codeBundleCache: SourceFileCache,
   stylesheetBundler: ComponentStylesheetBundler,
+  templateUpdates: Map<string, string> | undefined,
 ): {
   typescriptContexts: BundlerContext[];
   otherContexts: BundlerContext[];
@@ -55,7 +56,13 @@ export function setupBundlerContexts(
     new BundlerContext(
       workspaceRoot,
       watch,
-      createBrowserCodeBundleOptions(options, target, codeBundleCache, stylesheetBundler),
+      createBrowserCodeBundleOptions(
+        options,
+        target,
+        codeBundleCache,
+        stylesheetBundler,
+        templateUpdates,
+      ),
     ),
   );
 

packages/angular/build/src/tools/esbuild/angular/compiler-plugin.ts

@@ -51,7 +51,7 @@ export interface CompilerPluginOptions {
   incremental: boolean;
   externalRuntimeStyles?: boolean;
   instrumentForCoverage?: (request: string) => boolean;
-  templateUpdates?: boolean;
+  templateUpdates?: Map<string, string>;
 }
 
 // eslint-disable-next-line max-lines-per-function
@@ -303,6 +303,12 @@ export function createCompilerPlugin(
             !!initializationResult.compilerOptions.inlineSourceMap;
           referencedFiles = initializationResult.referencedFiles;
           externalStylesheets = initializationResult.externalStylesheets;
+          if (initializationResult.templateUpdates) {
+            // Propagate any template updates
+            initializationResult.templateUpdates.forEach((value, key) =>
+              pluginOptions.templateUpdates?.set(key, value),
+            );
+          }
         } catch (error) {
           (result.errors ??= []).push({
             text: 'Angular compilation initialization failed.',
@@ -657,7 +663,7 @@ function createCompilerOptionsTransformer(
       sourceRoot: undefined,
       preserveSymlinks,
       externalRuntimeStyles: pluginOptions.externalRuntimeStyles,
-      _enableHmr: pluginOptions.templateUpdates,
+      _enableHmr: !!pluginOptions.templateUpdates,
     };
   };
 }

packages/angular/build/src/tools/esbuild/application-code-bundle.ts

@@ -38,11 +38,17 @@ export function createBrowserCodeBundleOptions(
   target: string[],
   sourceFileCache: SourceFileCache,
   stylesheetBundler: ComponentStylesheetBundler,
+  templateUpdates: Map<string, string> | undefined,
 ): BundlerOptionsFactory {
   return (loadCache) => {
     const { entryPoints, outputNames, polyfills } = options;
 
-    const pluginOptions = createCompilerPluginOptions(options, sourceFileCache, loadCache);
+    const pluginOptions = createCompilerPluginOptions(
+      options,
+      sourceFileCache,
+      loadCache,
+      templateUpdates,
+    );
 
     const zoneless = isZonelessApp(polyfills);
 

packages/angular/build/src/tools/esbuild/bundler-execution-result.ts

@@ -28,6 +28,7 @@ export interface RebuildState {
   codeBundleCache?: SourceFileCache;
   fileChanges: ChangedFiles;
   previousOutputHashes: Map<string, string>;
+  templateUpdates?: Map<string, string>;
 }
 
 export interface ExternalResultMetadata {
@@ -60,6 +61,7 @@ export class ExecutionResult {
     },
     private componentStyleBundler: ComponentStylesheetBundler,
     private codeBundleCache?: SourceFileCache,
+    readonly templateUpdates?: Map<string, string>,
   ) {}
 
   addOutputFile(path: string, content: string | Uint8Array, type: BuildOutputFileType): void {
@@ -166,6 +168,7 @@ export class ExecutionResult {
       componentStyleBundler: this.componentStyleBundler,
       fileChanges,
       previousOutputHashes: new Map(this.outputFiles.map((file) => [file.path, file.hash])),
+      templateUpdates: this.templateUpdates,
     };
   }
 

packages/angular/build/src/tools/esbuild/compiler-plugin-options.ts

@@ -17,6 +17,7 @@ export function createCompilerPluginOptions(
   options: NormalizedApplicationBuildOptions,
   sourceFileCache: SourceFileCache,
   loadResultCache?: LoadResultCache,
+  templateUpdates?: Map<string, string>,
 ): CreateCompilerPluginParameters[0] {
   const {
     sourcemapOptions,
@@ -26,7 +27,6 @@ export function createCompilerPluginOptions(
     jit,
     externalRuntimeStyles,
     instrumentForCoverage,
-    templateUpdates,
   } = options;
   const incremental = !!options.watch;
 

packages/angular/build/src/tools/vite/middlewares/component-middleware.ts

@@ -33,7 +33,7 @@ export function createAngularComponentMiddleware(
       return;
     }
 
-    const updateCode = templateUpdates.get(componentId) ?? '';
+    const updateCode = templateUpdates.get(encodeURIComponent(componentId)) ?? '';
 
     res.setHeader('Content-Type', 'text/javascript');
     res.setHeader('Cache-Control', 'no-cache');