fix(@angular/build) allow component HMR for templates with i18n

When using the development server with the `application` build system
and HMR has been enabled (default), component templates with i18n are
now eligible to be hot reloaded. If translations exist within the template,
they will also be translated assuming a matching translation is available.
Changing the content of an i18n block may result in a missing translation
warning/error. The development server continues to only support a single
enabled locale.

Author: clydin

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

@@ -285,8 +285,10 @@ export async function executeBuild(
       i18nOptions.hasDefinedSourceLocale ? i18nOptions.sourceLocale : undefined,
     );
 
-    executionResult.addErrors(result.errors);
-    executionResult.addWarnings(result.warnings);
+    // Deduplicate and add errors and warnings
+    executionResult.addErrors([...new Set(result.errors)]);
+    executionResult.addWarnings([...new Set(result.warnings)]);
+
     executionResult.addPrerenderedRoutes(result.prerenderedRoutes);
     executionResult.outputFiles.push(...result.additionalOutputFiles);
     executionResult.assetFiles.push(...result.additionalAssets);

packages/angular/build/src/builders/application/i18n.ts

@@ -140,6 +140,30 @@ export async function inlineI18n(
     executionResult.assetFiles = updatedAssetFiles;
   }
 
+  // Inline any template updates if present
+  if (executionResult.templateUpdates?.size) {
+    // The development server only allows a single locale but issue a warning if used programmatically (experimental)
+    // with multiple locales and template HMR.
+    if (i18nOptions.inlineLocales.size > 1) {
+      inlineResult.warnings.push(
+        `Component HMR updates can only be inlined with a single locale. The first locale will be used.`,
+      );
+    }
+    const firstLocale = [...i18nOptions.inlineLocales][0];
+
+    for (const [id, content] of executionResult.templateUpdates) {
+      const templateUpdateResult = await inliner.inlineTemplateUpdate(
+        firstLocale,
+        i18nOptions.locales[firstLocale].translation,
+        content,
+        id,
+      );
+      executionResult.templateUpdates.set(id, templateUpdateResult.code);
+      inlineResult.errors.push(...templateUpdateResult.errors);
+      inlineResult.warnings.push(...templateUpdateResult.warnings);
+    }
+  }
+
   return inlineResult;
 }
 

packages/angular/build/src/tools/angular/compilation/aot-compilation.ts

@@ -161,10 +161,7 @@ export class AotCompilation extends AngularCompilation {
         );
         const updateText = angularCompiler.emitHmrUpdateModule(node);
         // If compiler cannot generate an update for the component, prevent template updates.
-        // Also prevent template updates if $localize is directly present which also currently
-        // prevents a template update at runtime.
-        // TODO: Support localized template update modules and remove this check.
-        if (updateText === null || updateText.includes('$localize')) {
+        if (updateText === null) {
           // Build is needed if a template cannot be updated
           templateUpdates = undefined;
           break;

packages/angular/build/src/tools/esbuild/i18n-inliner-worker.ts

@@ -16,7 +16,7 @@ import { loadEsmModule } from '../../utils/load-esm';
 /**
  * The options passed to the inliner for each file request
  */
-interface InlineRequest {
+interface InlineFileRequest {
   /**
    * The filename that should be processed. The data for the file is provided to the Worker
    * during Worker initialization.
@@ -34,6 +34,31 @@ interface InlineRequest {
   translation?: Record<string, unknown>;
 }
 
+/**
+ * The options passed to the inliner for each code request
+ */
+interface InlineCodeRequest {
+  /**
+   * The code that should be processed.
+   */
+  code: string;
+
+  /**
+   * The filename to use in error and warning messages for the provided code.
+   */
+  filename: string;
+
+  /**
+   * The locale specifier that should be used during the inlining process of the file.
+   */
+  locale: string;
+
+  /**
+   * The translation messages for the locale that should be used during the inlining process of the file.
+   */
+  translation?: Record<string, unknown>;
+}
+
 // Extract the application files and common options used for inline requests from the Worker context
 // TODO: Evaluate overall performance difference of passing translations here as well
 const { files, missingTranslation, shouldOptimize } = (workerData || {}) as {
@@ -47,9 +72,9 @@ const { files, missingTranslation, shouldOptimize } = (workerData || {}) as {
  * This function is the main entry for the Worker's action that is called by the worker pool.
  *
  * @param request An InlineRequest object representing the options for inlining
- * @returns An array containing the inlined file and optional map content.
+ * @returns An object containing the inlined file and optional map content.
  */
-export default async function inlineLocale(request: InlineRequest) {
+export default async function inlineFile(request: InlineFileRequest) {
   const data = files.get(request.filename);
 
   assert(data !== undefined, `Invalid inline request for file '${request.filename}'.`);
@@ -70,6 +95,22 @@ export default async function inlineLocale(request: InlineRequest) {
   };
 }
 
+/**
+ * Inlines the provided locale and translation into JavaScript code that contains `$localize` usage.
+ * This function is a secondary entry primarily for use with component HMR update modules.
+ *
+ * @param request An InlineRequest object representing the options for inlining
+ * @returns An object containing the inlined code.
+ */
+export async function inlineCode(request: InlineCodeRequest) {
+  const result = await transformWithBabel(request.code, undefined, request);
+
+  return {
+    output: result.code,
+    messages: result.diagnostics.messages,
+  };
+}
+
 /**
  * A Type representing the localize tools module.
  */
@@ -138,7 +179,7 @@ async function createI18nPlugins(locale: string, translation: Record<string, unk
 async function transformWithBabel(
   code: string,
   map: SourceMapInput | undefined,
-  options: InlineRequest,
+  options: InlineFileRequest,
 ) {
   let ast;
   try {

packages/angular/build/src/tools/esbuild/i18n-inliner.ts

@@ -209,6 +209,44 @@ export class I18nInliner {
     };
   }
 
+  async inlineTemplateUpdate(
+    locale: string,
+    translation: Record<string, unknown> | undefined,
+    templateCode: string,
+    templateId: string,
+  ): Promise<{ code: string; errors: string[]; warnings: string[] }> {
+    const hasLocalize = templateCode.includes(LOCALIZE_KEYWORD);
+
+    if (!hasLocalize) {
+      return {
+        code: templateCode,
+        errors: [],
+        warnings: [],
+      };
+    }
+
+    const { output, messages } = await this.#workerPool.run(
+      { code: templateCode, filename: templateId, locale, translation },
+      { name: 'inlineCode' },
+    );
+
+    const errors: string[] = [];
+    const warnings: string[] = [];
+    for (const message of messages) {
+      if (message.type === 'error') {
+        errors.push(message.message);
+      } else {
+        warnings.push(message.message);
+      }
+    }
+
+    return {
+      code: output,
+      errors,
+      warnings,
+    };
+  }
+
   /**
    * Stops all active transformation tasks and shuts down all workers.
    * @returns A void promise that resolves when closing is complete.