fix(@angular-devkit/build-angular): cache localize results with development server

Author: clydin

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

@@ -31,6 +31,8 @@ import { buildBrowserWebpackConfigFromContext, createBrowserLoggingCallback } fr
 import { Schema as BrowserBuilderSchema } from '../browser/schema';
 import { ExecutionTransformer } from '../transforms';
 import { BuildBrowserFeatures, normalizeOptimization } from '../utils';
+import { findCachePath } from '../utils/cache-path';
+import { I18nOptions } from '../utils/i18n-options';
 import { assertCompatibleAngularVersion } from '../utils/version';
 import { getIndexInputFile, getIndexOutputFile } from '../utils/webpack-browser-config';
 import { Schema } from './schema';
@@ -174,80 +176,7 @@ export function serveWebpackBrowser(
         );
       }
 
-      const locale = [...i18n.inlineLocales][0];
-      const localeDescription = i18n.locales[locale] && i18n.locales[locale];
-
-      const { plugins, diagnostics } = await createI18nPlugins(
-        locale,
-        localeDescription && localeDescription.translation,
-        browserOptions.i18nMissingTranslation,
-      );
-
-      // Modify main entrypoint to include locale data
-      if (
-        localeDescription &&
-        localeDescription.dataPath &&
-        typeof config.entry === 'object' &&
-        !Array.isArray(config.entry) &&
-        config.entry['main']
-      ) {
-        if (Array.isArray(config.entry['main'])) {
-          config.entry['main'].unshift(localeDescription.dataPath);
-        } else {
-          config.entry['main'] = [localeDescription.dataPath, config.entry['main']];
-        }
-      }
-
-      // Get the insertion point for the i18n babel loader rule
-      // This is currently dependent on the rule order/construction in common.ts
-      // A future refactor of the webpack configuration definition will improve this situation
-      // tslint:disable-next-line: no-non-null-assertion
-      const rules = webpackConfig.module!.rules;
-      const index = rules.findIndex(r => r.enforce === 'pre');
-      if (index === -1) {
-        throw new Error('Invalid internal webpack configuration');
-      }
-
-      const i18nRule: webpack.Rule = {
-        test: /\.(?:m?js|ts)$/,
-        enforce: 'post',
-        use: [
-          {
-            loader: 'babel-loader',
-            options: {
-              babelrc: false,
-              compact: false,
-              cacheCompression: false,
-              plugins,
-            },
-          },
-        ],
-      };
-
-      rules.splice(index, 0, i18nRule);
-
-      // Add a plugin to inject the i18n diagnostics
-      // tslint:disable-next-line: no-non-null-assertion
-      webpackConfig.plugins!.push({
-        apply: (compiler: webpack.Compiler) => {
-          compiler.hooks.thisCompilation.tap('build-angular', compilation => {
-            compilation.hooks.finishModules.tap('build-angular', () => {
-              if (!diagnostics) {
-                return;
-              }
-              for (const diagnostic of diagnostics.messages) {
-                if (diagnostic.type === 'error') {
-                  compilation.errors.push(diagnostic.message);
-                } else {
-                  compilation.warnings.push(diagnostic.message);
-                }
-              }
-
-              diagnostics.messages.length = 0;
-            });
-          });
-        },
-      });
+      await setupLocalize(i18n, browserOptions, webpackConfig);
     }
 
     const port = await checkPort(options.port || 0, options.host || 'localhost', 4200);
@@ -383,6 +312,91 @@ export function serveWebpackBrowser(
   );
 }
 
+async function setupLocalize(
+  i18n: I18nOptions,
+  browserOptions: BrowserBuilderSchema,
+  webpackConfig: webpack.Configuration,
+) {
+  const locale = [...i18n.inlineLocales][0];
+  const localeDescription = i18n.locales[locale];
+  const { plugins, diagnostics } = await createI18nPlugins(
+    locale,
+    localeDescription && localeDescription.translation,
+    browserOptions.i18nMissingTranslation,
+  );
+
+  // Modify main entrypoint to include locale data
+  if (
+    localeDescription &&
+    localeDescription.dataPath &&
+    typeof webpackConfig.entry === 'object' &&
+    !Array.isArray(webpackConfig.entry) &&
+    webpackConfig.entry['main']
+  ) {
+    if (Array.isArray(webpackConfig.entry['main'])) {
+      webpackConfig.entry['main'].unshift(localeDescription.dataPath);
+    } else {
+      webpackConfig.entry['main'] = [localeDescription.dataPath, webpackConfig.entry['main']];
+    }
+  }
+
+  // Get the insertion point for the i18n babel loader rule
+  // This is currently dependent on the rule order/construction in common.ts
+  // A future refactor of the webpack configuration definition will improve this situation
+  // tslint:disable-next-line: no-non-null-assertion
+  const rules = webpackConfig.module!.rules;
+  const index = rules.findIndex(r => r.enforce === 'pre');
+  if (index === -1) {
+    throw new Error('Invalid internal webpack configuration');
+  }
+
+  const i18nRule: webpack.Rule = {
+    test: /\.(?:m?js|ts)$/,
+    enforce: 'post',
+    use: [
+      {
+        loader: require.resolve('babel-loader'),
+        options: {
+          babelrc: false,
+          compact: false,
+          cacheCompression: false,
+          cacheDirectory: findCachePath('babel-loader'),
+          cacheIdentifier: JSON.stringify({
+            buildAngular: require('../../package.json').version,
+            locale,
+            translationIntegrity: localeDescription && localeDescription.integrity,
+          }),
+          plugins,
+        },
+      },
+    ],
+  };
+
+  rules.splice(index, 0, i18nRule);
+
+  // Add a plugin to inject the i18n diagnostics
+  // tslint:disable-next-line: no-non-null-assertion
+  webpackConfig.plugins!.push({
+    apply: (compiler: webpack.Compiler) => {
+      compiler.hooks.thisCompilation.tap('build-angular', compilation => {
+        compilation.hooks.finishModules.tap('build-angular', () => {
+          if (!diagnostics) {
+            return;
+          }
+          for (const diagnostic of diagnostics.messages) {
+            if (diagnostic.type === 'error') {
+              compilation.errors.push(diagnostic.message);
+            } else {
+              compilation.warnings.push(diagnostic.message);
+            }
+          }
+          diagnostics.messages.length = 0;
+        });
+      });
+    },
+  });
+}
+
 /**
  * Create a webpack configuration for the dev server.
  * @param workspaceRoot The root of the workspace. This comes from the context.

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

@@ -21,7 +21,7 @@ export interface I18nOptions {
   sourceLocale: string;
   locales: Record<
     string,
-    { file: string; format?: string; translation?: unknown; dataPath?: string }
+    { file: string; format?: string; translation?: unknown; dataPath?: string, integrity?: string }
   >;
   flatOutput?: boolean;
   readonly shouldInline: boolean;
@@ -188,6 +188,7 @@ export async function configureI18nBuild<T extends BrowserBuilderSchema | Server
 
         desc.format = result.format;
         desc.translation = result.translation;
+        desc.integrity = result.integrity;
 
         const localeDataPath = findLocaleDataPath(locale, localeDataBasePath);
         if (!localeDataPath) {

packages/angular_devkit/build_angular/src/utils/load-translations.ts

@@ -5,6 +5,7 @@
  * 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
  */
+import { createHash } from 'crypto';
 import * as fs from 'fs';
 
 export type TranslationLoader = (
@@ -14,6 +15,7 @@ export type TranslationLoader = (
   format: string;
   // tslint:disable-next-line: no-implicit-dependencies
   diagnostics: import('@angular/localize/src/tools/src/diagnostics').Diagnostics;
+  integrity: string;
 };
 
 export async function createTranslationLoader(): Promise<TranslationLoader> {
@@ -25,8 +27,9 @@ export async function createTranslationLoader(): Promise<TranslationLoader> {
     for (const [format, parser] of Object.entries(parsers)) {
       if (parser.canParse(path, content)) {
         const result = parser.parse(path, content);
+        const integrity = 'sha256-' + createHash('sha256').update(content).digest('base64');
 
-        return { format, translation: result.translations, diagnostics };
+        return { format, translation: result.translations, diagnostics, integrity };
       }
     }