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/webpack-loader.ts

@@ -108,7 +108,19 @@ export default custom<AngularCustomOptions>(() => {
         !/[\\\/]@angular[\\\/](?:compiler|localize)/.test(this.resourcePath) &&
         source.includes('$localize')
       ) {
-        customOptions.i18n = i18n as ApplicationPresetOptions['i18n'];
+        const { translationFiles, ...i18nOptions } = i18n as ApplicationPresetOptions['i18n'] & {
+          translationFiles?: string[];
+        };
+        customOptions.i18n = i18nOptions;
+
+        // Add translation files as dependencies of the file to support rebuilds
+        // Except for `@angular/core` which needs locale injection but has no translations
+        if (translationFiles && !/[\\\/]@angular[\\\/]core/.test(this.resourcePath)) {
+          for (const file of translationFiles) {
+            this.addDependency(file);
+          }
+        }
+
         shouldProcess = true;
       }
 

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

@@ -242,7 +242,7 @@ export function serveWebpackBrowser(
           );
         }
 
-        await setupLocalize(locale, i18n, browserOptions, webpackConfig);
+        await setupLocalize(locale, i18n, browserOptions, webpackConfig, context);
       }
     }
 
@@ -352,6 +352,7 @@ async function setupLocalize(
   i18n: I18nOptions,
   browserOptions: BrowserBuilderSchema,
   webpackConfig: webpack.Configuration,
+  context: BuilderContext,
 ) {
   const localeDescription = i18n.locales[locale];
 
@@ -371,16 +372,21 @@ async function setupLocalize(
 
   let missingTranslationBehavior = browserOptions.i18nMissingTranslation || 'ignore';
   let translation = localeDescription?.translation || {};
+  const sourceLocale = i18n.sourceLocale;
+  const shouldInline = i18n.shouldInline;
 
-  if (locale === i18n.sourceLocale) {
+  if (locale === sourceLocale) {
     missingTranslationBehavior = 'ignore';
     translation = {};
   }
 
   const i18nLoaderOptions = {
     locale,
     missingTranslationBehavior,
-    translation: i18n.shouldInline ? translation : undefined,
+    translation: shouldInline ? translation : undefined,
+    translationFiles: localeDescription?.files.map((file) =>
+      path.resolve(context.workspaceRoot, file.path),
+    ),
   };
 
   const i18nRule: webpack.RuleSetRule = {
@@ -410,6 +416,25 @@ async function setupLocalize(
   }
 
   rules.push(i18nRule);
+
+  // Add a plugin to reload translation files on rebuilds
+  // tslint:disable-next-line: no-non-null-assertion
+  webpackConfig.plugins!.push({
+    apply: (compiler: webpack.Compiler) => {
+      compiler.hooks.thisCompilation.tap('build-angular', compilation => {
+        if (shouldInline && i18nLoaderOptions.translation === undefined) {
+          // Reload translation
+          // NOTE: This could be further optimized by checking if any translation file actually changed
+
+        }
+
+        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);