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

@@ -7,11 +7,13 @@
  */
 import { custom } from 'babel-loader';
 import { ScriptTarget } from 'typescript';
+import { ApplicationPresetOptions } from './presets/application';
 
 interface AngularCustomOptions {
   forceAsyncTransformation: boolean;
   forceES5: boolean;
   shouldLink: boolean;
+  i18n: ApplicationPresetOptions['i18n'];
 }
 
 /**
@@ -65,56 +67,82 @@ export default custom<AngularCustomOptions>(() => {
   });
 
   return {
-    async customOptions({ scriptTarget, ...loaderOptions }, { source }) {
+    async customOptions({ i18n, scriptTarget, ...rawOptions }, { source }) {
       // Must process file if plugins are added
-      let shouldProcess = Array.isArray(loaderOptions.plugins) && loaderOptions.plugins.length > 0;
+      let shouldProcess = Array.isArray(rawOptions.plugins) && rawOptions.plugins.length > 0;
+
+      const customOptions: AngularCustomOptions = {
+        forceAsyncTransformation: false,
+        forceES5: false,
+        shouldLink: false,
+        i18n: undefined,
+      };
 
       // Analyze file for linking
-      let shouldLink = false;
       const { hasLinkerSupport, requiresLinking } = await checkLinking(this.resourcePath, source);
       if (requiresLinking && !hasLinkerSupport) {
         // Cannot link if there is no linker support
         this.emitError(
           'File requires the Angular linker. "@angular/compiler-cli" version 11.1.0 or greater is needed.',
         );
       } else {
-        shouldLink = requiresLinking;
+        customOptions.shouldLink = requiresLinking;
       }
-      shouldProcess ||= shouldLink;
+      shouldProcess ||= customOptions.shouldLink;
 
       // Analyze for ES target processing
-      let forceES5 = false;
-      let forceAsyncTransformation = false;
-      const esTarget = scriptTarget as ScriptTarget;
-      if (esTarget < ScriptTarget.ES2015) {
-        // TypeScript files will have already been downlevelled
-        forceES5 = !/\.tsx?$/.test(this.resourcePath);
-      } else if (esTarget >= ScriptTarget.ES2017) {
-        forceAsyncTransformation = source.includes('async');
+      const esTarget = scriptTarget as ScriptTarget | undefined;
+      if (esTarget !== undefined) {
+        if (esTarget < ScriptTarget.ES2015) {
+          // TypeScript files will have already been downlevelled
+          customOptions.forceES5 = !/\.tsx?$/.test(this.resourcePath);
+        } else if (esTarget >= ScriptTarget.ES2017) {
+          customOptions.forceAsyncTransformation = source.includes('async');
+        }
+        shouldProcess ||= customOptions.forceAsyncTransformation || customOptions.forceES5;
+      }
+
+      // Analyze for i18n inlining
+      if (
+        i18n &&
+        !/[\\\/]@angular[\\\/](?:compiler|localize)/.test(this.resourcePath) &&
+        source.includes('$localize')
+      ) {
+        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;
       }
-      shouldProcess ||= forceAsyncTransformation || forceES5;
 
       // Add provided loader options to default base options
-      const options: Record<string, unknown> = {
+      const loaderOptions: Record<string, unknown> = {
         ...baseOptions,
-        ...loaderOptions,
+        ...rawOptions,
         cacheIdentifier: JSON.stringify({
           buildAngular: require('../../package.json').version,
-          forceAsyncTransformation,
-          forceES5,
-          shouldLink,
+          customOptions,
           baseOptions,
-          loaderOptions,
+          rawOptions,
         }),
       };
 
       // Skip babel processing if no actions are needed
       if (!shouldProcess) {
         // Force the current file to be ignored
-        options.ignore = [() => true];
+        loaderOptions.ignore = [() => true];
       }
 
-      return { custom: { forceAsyncTransformation, forceES5, shouldLink }, loader: options };
+      return { custom: customOptions, loader: loaderOptions };
     },
     config(configuration, { customOptions }) {
       return {
@@ -127,6 +155,7 @@ export default custom<AngularCustomOptions>(() => {
               angularLinker: customOptions.shouldLink,
               forceES5: customOptions.forceES5,
               forceAsyncTransformation: customOptions.forceAsyncTransformation,
+              i18n: customOptions.i18n,
               diagnosticReporter: (type, message) => {
                 switch (type) {
                   case 'error':
@@ -139,7 +168,7 @@ export default custom<AngularCustomOptions>(() => {
                     break;
                 }
               },
-            } as import('./presets/application').ApplicationPresetOptions,
+            } as ApplicationPresetOptions,
           ],
         ],
       };

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,9 +352,9 @@ async function setupLocalize(
   i18n: I18nOptions,
   browserOptions: BrowserBuilderSchema,
   webpackConfig: webpack.Configuration,
+  context: BuilderContext,
 ) {
   const localeDescription = i18n.locales[locale];
-  const i18nDiagnostics: { type: string, message: string }[] = [];
 
   // Modify main entrypoint to include locale data
   if (
@@ -372,43 +372,37 @@ 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: shouldInline ? translation : undefined,
+    translationFiles: localeDescription?.files.map((file) =>
+      path.resolve(context.workspaceRoot, file.path),
+    ),
+  };
+
   const i18nRule: webpack.RuleSetRule = {
     test: /\.(?:m?js|ts)$/,
     enforce: 'post',
     use: [
       {
-        loader: require.resolve('babel-loader'),
+        loader: require.resolve('../babel/webpack-loader'),
         options: {
-          babelrc: false,
-          configFile: false,
-          compact: false,
-          cacheCompression: false,
-          cacheDirectory: findCachePath('babel-loader'),
-          cacheIdentifier: JSON.stringify({
-            buildAngular: require('../../package.json').version,
-            locale,
-            translationIntegrity: localeDescription?.files.map((file) => file.integrity),
-          }),
-          sourceType: 'unambiguous',
-          presets: [
-            [
-              require.resolve('../babel/presets/application'),
-              {
-                i18n: {
-                  locale,
-                  translation: i18n.shouldInline ? translation : undefined,
-                  missingTranslationBehavior,
-                },
-                diagnosticReporter: (type, message) => i18nDiagnostics.push({ type, message }),
-              } as import('../babel/presets/application').ApplicationPresetOptions,
-            ],
-          ],
+          // cacheDirectory: findCachePath('babel-dev-server-i18n'),
+          // cacheIdentifier: JSON.stringify({
+          //   buildAngular: require('../../package.json').version,
+          //   locale,
+          //   translationIntegrity: localeDescription?.files.map((file) => file.integrity),
+          // }),
+          i18n: i18nLoaderOptions,
         },
       },
     ],
@@ -424,20 +418,20 @@ async function setupLocalize(
 
   rules.push(i18nRule);
 
-  // Add a plugin to inject the i18n diagnostics
+  // 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', () => {
-          for (const diagnostic of i18nDiagnostics) {
-            if (diagnostic.type === 'error') {
-              addError(compilation, diagnostic.message);
-            } else {
-              addWarning(compilation, diagnostic.message);
-            }
-          }
-          i18nDiagnostics.length = 0;
+          // After loaders are finished, clear out the now unneeded translations
+          i18nLoaderOptions.translation = undefined;
         });
       });
     },