feat(@angular-devkit/build-angular): watch i18n translation files with dev server

When using i18n with the dev server, the translation files will now be linked as a dependency to any file containing translated text. This allows translation files to be watched and the application to be rebuilt using the changed translation files.
This change should also provide some performance improvements as well since now only files containing `$localize` will be parsed and processed by the babel-based localization inliner.

Closes #16341

Author: clydin

packages/angular_devkit/build_angular/src/babel/presets/application.ts

@@ -36,6 +36,7 @@ export interface ApplicationPresetOptions {
     locale: string;
     missingTranslationBehavior?: 'error' | 'warning' | 'ignore';
     translation?: unknown;
+    translationFiles?: string[];
     pluginCreators?: I18nPluginCreators;
   };
 

packages/angular_devkit/build_angular/src/babel/webpack-loader.ts

@@ -62,6 +62,7 @@ async function requiresLinking(path: string, source: string): Promise<boolean> {
   return needsLinking(path, source);
 }
 
+// eslint-disable-next-line max-lines-per-function
 export default custom<ApplicationPresetOptions>(() => {
   const baseOptions = Object.freeze({
     babelrc: false,
@@ -149,6 +150,18 @@ export default custom<ApplicationPresetOptions>(() => {
           ...(i18n as NonNullable<ApplicationPresetOptions['i18n']>),
           pluginCreators: i18nPluginCreators,
         };
+
+        // Add translation files as dependencies of the file to support rebuilds
+        // Except for `@angular/core` which needs locale injection but has no translations
+        if (
+          customOptions.i18n.translationFiles &&
+          !/[\\/]@angular[\\/]core/.test(this.resourcePath)
+        ) {
+          for (const file of customOptions.i18n.translationFiles) {
+            this.addDependency(file);
+          }
+        }
+
         shouldProcess = true;
       }
 

packages/angular_devkit/build_angular/src/builders/dev-server/index.ts

@@ -23,8 +23,9 @@ import { ExecutionTransformer } from '../../transforms';
 import { normalizeOptimization } from '../../utils';
 import { checkPort } from '../../utils/check-port';
 import { colors } from '../../utils/color';
-import { I18nOptions } from '../../utils/i18n-options';
+import { I18nOptions, loadTranslations } from '../../utils/i18n-options';
 import { IndexHtmlTransform } from '../../utils/index-file/index-html-generator';
+import { createTranslationLoader } from '../../utils/load-translations';
 import { NormalizedCachedOptions, normalizeCacheOptions } from '../../utils/normalize-cache';
 import { generateEntryPoints } from '../../utils/package-chunk-sort';
 import { assertCompatibleAngularVersion } from '../../utils/version';
@@ -33,6 +34,7 @@ import {
   getIndexInputFile,
   getIndexOutputFile,
 } from '../../utils/webpack-browser-config';
+import { addError, addWarning } from '../../utils/webpack-diagnostics';
 import {
   getAnalyticsConfig,
   getCommonConfig,
@@ -192,7 +194,7 @@ export function serveWebpackBrowser(
         );
       }
 
-      await setupLocalize(locale, i18n, browserOptions, webpackConfig, cacheOptions);
+      await setupLocalize(locale, i18n, browserOptions, webpackConfig, cacheOptions, context);
     }
 
     if (transforms.webpackConfiguration) {
@@ -288,6 +290,7 @@ async function setupLocalize(
   browserOptions: BrowserBuilderSchema,
   webpackConfig: webpack.Configuration,
   cacheOptions: NormalizedCachedOptions,
+  context: BuilderContext,
 ) {
   const localeDescription = i18n.locales[locale];
 
@@ -320,6 +323,9 @@ async function setupLocalize(
     locale,
     missingTranslationBehavior,
     translation: i18n.shouldInline ? translation : undefined,
+    translationFiles: localeDescription?.files.map((file) =>
+      path.resolve(context.workspaceRoot, file.path),
+    ),
   };
 
   const i18nRule: webpack.RuleSetRule = {
@@ -351,6 +357,33 @@ async function setupLocalize(
   }
 
   rules.push(i18nRule);
+
+  // Add a plugin to reload translation files on rebuilds
+  const loader = await createTranslationLoader();
+  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+  webpackConfig.plugins!.push({
+    apply: (compiler: webpack.Compiler) => {
+      compiler.hooks.thisCompilation.tap('build-angular', (compilation) => {
+        if (i18n.shouldInline && i18nLoaderOptions.translation === undefined) {
+          // Reload translations
+          loadTranslations(locale, localeDescription, context.workspaceRoot, loader, {
+            warn(message) {
+              addWarning(compilation, message);
+            },
+            error(message) {
+              addError(compilation, message);
+            },
+          });
+          i18nLoaderOptions.translation = localeDescription.translation;
+        }
+
+        compilation.hooks.finishModules.tap('build-angular', () => {
+          // After loaders are finished, clear out the now unneeded translations
+          i18nLoaderOptions.translation = undefined;
+        });
+      });
+    },
+  });
 }
 
 export default createBuilder<DevServerBuilderOptions, DevServerBuilderOutput>(serveWebpackBrowser);

packages/angular_devkit/build_angular/src/builders/dev-server/tests/behavior/build_translation_watch_spec.ts

@@ -0,0 +1,109 @@
+/**
+ * @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.io/license
+ */
+
+/* eslint-disable max-len */
+import fetch from 'node-fetch'; // eslint-disable-line import/no-extraneous-dependencies
+import { concatMap, count, take, timeout } from 'rxjs/operators';
+import { URL } from 'url';
+import { serveWebpackBrowser } from '../../index';
+import {
+  BASE_OPTIONS,
+  BUILD_TIMEOUT,
+  DEV_SERVER_BUILDER_INFO,
+  describeBuilder,
+  setupBrowserTarget,
+} from '../setup';
+
+describeBuilder(serveWebpackBrowser, DEV_SERVER_BUILDER_INFO, (harness) => {
+  describe('Behavior: "i18n translation file watching"', () => {
+    beforeEach(() => {
+      harness.useProject('test', {
+        root: '.',
+        sourceRoot: 'src',
+        cli: {
+          cache: {
+            enabled: false,
+          },
+        },
+        i18n: {
+          locales: {
+            'fr': 'src/locales/messages.fr.xlf',
+          },
+        },
+      });
+
+      setupBrowserTarget(harness, { localize: ['fr'] });
+    });
+
+    it('watches i18n translation files by default', async () => {
+      harness.useTarget('serve', {
+        ...BASE_OPTIONS,
+      });
+
+      await harness.writeFile(
+        'src/app/app.component.html',
+        `
+          <p id="hello" i18n="An introduction header for this sample">Hello {{ title }}! </p>
+        `,
+      );
+
+      await harness.writeFile('src/locales/messages.fr.xlf', TRANSLATION_FILE_CONTENT);
+
+      const buildCount = await harness
+        .execute()
+        .pipe(
+          timeout(BUILD_TIMEOUT * 2),
+          concatMap(async ({ result }, index) => {
+            expect(result?.success).toBe(true);
+
+            const mainUrl = new URL('main.js', `${result?.baseUrl}`);
+
+            switch (index) {
+              case 0: {
+                const response = await fetch(mainUrl);
+                expect(await response?.text()).toContain('Bonjour');
+
+                await harness.modifyFile('src/locales/messages.fr.xlf', (content) =>
+                  content.replace('Bonjour', 'Salut'),
+                );
+                break;
+              }
+              case 1: {
+                const response = await fetch(mainUrl);
+                expect(await response?.text()).toContain('Salut');
+                break;
+              }
+            }
+          }),
+          take(2),
+          count(),
+        )
+        .toPromise();
+
+      expect(buildCount).toBe(2);
+    });
+  });
+});
+
+const TRANSLATION_FILE_CONTENT = `
+  <?xml version="1.0" encoding="UTF-8" ?>
+  <xliff version="1.2" xmlns="urn:oasis:names:tc:xliff:document:1.2">
+    <file target-language="en-US" datatype="plaintext" original="ng2.template">
+      <body>
+        <trans-unit id="4286451273117902052" datatype="html">
+          <target>Bonjour <x id="INTERPOLATION" equiv-text="{{ title }}"/>! </target>
+          <context-group purpose="location">
+            <context context-type="targetfile">src/app/app.component.html</context>
+            <context context-type="linenumber">2,3</context>
+          </context-group>
+          <note priority="1" from="description">An introduction header for this sample</note>
+        </trans-unit>
+      </body>
+    </file>
+  </xliff>
+`;

packages/angular_devkit/build_angular/src/utils/i18n-options.ts

@@ -15,25 +15,28 @@ import path from 'path';
 import { Schema as BrowserBuilderSchema } from '../builders/browser/schema';
 import { Schema as ServerBuilderSchema } from '../builders/server/schema';
 import { readTsconfig } from '../utils/read-tsconfig';
-import { createTranslationLoader } from './load-translations';
+import { TranslationLoader, createTranslationLoader } from './load-translations';
 
 /**
  * The base module location used to search for locale specific data.
  */
 const LOCALE_DATA_BASE_MODULE = '@angular/common/locales/global';
 
+export interface LocaleDescription {
+  files: {
+    path: string;
+    integrity?: string;
+    format?: string;
+  }[];
+  translation?: Record<string, unknown>;
+  dataPath?: string;
+  baseHref?: string;
+}
+
 export interface I18nOptions {
   inlineLocales: Set<string>;
   sourceLocale: string;
-  locales: Record<
-    string,
-    {
-      files: { path: string; integrity?: string; format?: string }[];
-      translation?: Record<string, unknown>;
-      dataPath?: string;
-      baseHref?: string;
-    }
-  >;
+  locales: Record<string, LocaleDescription>;
   flatOutput?: boolean;
   readonly shouldInline: boolean;
   hasDefinedSourceLocale?: boolean;
@@ -218,48 +221,27 @@ export async function configureI18nBuild<T extends BrowserBuilderSchema | Server
       loader = await createTranslationLoader();
     }
 
-    for (const file of desc.files) {
-      const loadResult = loader(path.join(context.workspaceRoot, file.path));
-
-      for (const diagnostics of loadResult.diagnostics.messages) {
-        if (diagnostics.type === 'error') {
-          throw new Error(`Error parsing translation file '${file.path}': ${diagnostics.message}`);
-        } else {
-          context.logger.warn(`WARNING [${file.path}]: ${diagnostics.message}`);
-        }
-      }
-
-      if (loadResult.locale !== undefined && loadResult.locale !== locale) {
-        context.logger.warn(
-          `WARNING [${file.path}]: File target locale ('${loadResult.locale}') does not match configured locale ('${locale}')`,
-        );
-      }
-
-      usedFormats.add(loadResult.format);
-      if (usedFormats.size > 1 && tsConfig.options.enableI18nLegacyMessageIdFormat !== false) {
-        // This limitation is only for legacy message id support (defaults to true as of 9.0)
-        throw new Error(
-          'Localization currently only supports using one type of translation file format for the entire application.',
-        );
-      }
-
-      file.format = loadResult.format;
-      file.integrity = loadResult.integrity;
-
-      if (desc.translation) {
-        // Merge translations
-        for (const [id, message] of Object.entries(loadResult.translations)) {
-          if (desc.translation[id] !== undefined) {
-            context.logger.warn(
-              `WARNING [${file.path}]: Duplicate translations for message '${id}' when merging`,
-            );
-          }
-          desc.translation[id] = message;
-        }
-      } else {
-        // First or only translation file
-        desc.translation = loadResult.translations;
-      }
+    loadTranslations(
+      locale,
+      desc,
+      context.workspaceRoot,
+      loader,
+      {
+        warn(message) {
+          context.logger.warn(message);
+        },
+        error(message) {
+          throw new Error(message);
+        },
+      },
+      usedFormats,
+    );
+
+    if (usedFormats.size > 1 && tsConfig.options.enableI18nLegacyMessageIdFormat !== false) {
+      // This limitation is only for legacy message id support (defaults to true as of 9.0)
+      throw new Error(
+        'Localization currently only supports using one type of translation file format for the entire application.',
+      );
     }
   }
 
@@ -294,3 +276,49 @@ function findLocaleDataPath(locale: string, resolver: (locale: string) => string
     return null;
   }
 }
+
+export function loadTranslations(
+  locale: string,
+  desc: LocaleDescription,
+  workspaceRoot: string,
+  loader: TranslationLoader,
+  logger: { warn: (message: string) => void; error: (message: string) => void },
+  usedFormats?: Set<string>,
+) {
+  for (const file of desc.files) {
+    const loadResult = loader(path.join(workspaceRoot, file.path));
+
+    for (const diagnostics of loadResult.diagnostics.messages) {
+      if (diagnostics.type === 'error') {
+        logger.error(`Error parsing translation file '${file.path}': ${diagnostics.message}`);
+      } else {
+        logger.warn(`WARNING [${file.path}]: ${diagnostics.message}`);
+      }
+    }
+
+    if (loadResult.locale !== undefined && loadResult.locale !== locale) {
+      logger.warn(
+        `WARNING [${file.path}]: File target locale ('${loadResult.locale}') does not match configured locale ('${locale}')`,
+      );
+    }
+
+    usedFormats?.add(loadResult.format);
+    file.format = loadResult.format;
+    file.integrity = loadResult.integrity;
+
+    if (desc.translation) {
+      // Merge translations
+      for (const [id, message] of Object.entries(loadResult.translations)) {
+        if (desc.translation[id] !== undefined) {
+          logger.warn(
+            `WARNING [${file.path}]: Duplicate translations for message '${id}' when merging`,
+          );
+        }
+        desc.translation[id] = message;
+      }
+    } else {
+      // First or only translation file
+      desc.translation = loadResult.translations;
+    }
+  }
+}