fix(@angular-devkit/build-angular): allow localization with development server

Author: clydin

packages/angular_devkit/build_angular/package.json

@@ -17,6 +17,7 @@
     "@ngtools/webpack": "0.0.0",
     "ajv": "6.10.2",
     "autoprefixer": "9.7.1",
+    "babel-loader": "8.0.6",
     "browserslist": "4.7.2",
     "cacache": "13.0.1",
     "caniuse-lite": "1.0.30001008",

packages/angular_devkit/build_angular/src/browser/index.ts

@@ -355,7 +355,7 @@ export function buildWebpackBrowser(
                 }
                 seen.add(file.file);
 
-                if (file.name === 'main') {
+                if (file.name === 'vendor' || (!mainChunkId && file.name === 'main')) {
                   // tslint:disable-next-line: no-non-null-assertion
                   mainChunkId = file.id!.toString();
                 }

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

@@ -12,11 +12,7 @@ import {
   WebpackLoggingCallback,
   runWebpackDevServer,
 } from '@angular-devkit/build-webpack';
-import {
-  json,
-  logging,
-  tags,
-} from '@angular-devkit/core';
+import { json, logging, tags } from '@angular-devkit/core';
 import { NodeJsSyncHost } from '@angular-devkit/core/node';
 import { existsSync, readFileSync } from 'fs';
 import * as path from 'path';
@@ -58,6 +54,46 @@ const devServerBuildOverriddenKeys: (keyof DevServerBuilderOptions)[] = [
   'deployUrl',
 ];
 
+async function createI18nPlugins(
+  locale: string,
+  translation: unknown | undefined,
+  missingTranslation?: 'error' | 'warning' | 'ignore',
+) {
+  const plugins = [];
+  // tslint:disable-next-line: no-implicit-dependencies
+  const localizeDiag = await import('@angular/localize/src/tools/src/diagnostics');
+
+  const diagnostics = new localizeDiag.Diagnostics();
+
+  if (translation) {
+    const es2015 = await import(
+      // tslint:disable-next-line: trailing-comma no-implicit-dependencies
+      '@angular/localize/src/tools/src/translate/source_files/es2015_translate_plugin'
+    );
+    plugins.push(
+      // tslint:disable-next-line: no-any
+      es2015.makeEs2015TranslatePlugin(diagnostics, translation as any, { missingTranslation }),
+    );
+
+    const es5 = await import(
+      // tslint:disable-next-line: trailing-comma no-implicit-dependencies
+      '@angular/localize/src/tools/src/translate/source_files/es5_translate_plugin'
+    );
+    plugins.push(
+      // tslint:disable-next-line: no-any
+      es5.makeEs5TranslatePlugin(diagnostics, translation as any, { missingTranslation }),
+    );
+  }
+
+  const inlineLocale = await import(
+    // tslint:disable-next-line: trailing-comma no-implicit-dependencies
+    '@angular/localize/src/tools/src/translate/source_files/locale_plugin'
+  );
+  plugins.push(inlineLocale.makeLocalePlugin(locale));
+
+  return { diagnostics, plugins };
+}
+
 export type DevServerBuilderOutput = DevServerBuildOutput & {
   baseUrl: string;
 };
@@ -69,6 +105,7 @@ export type DevServerBuilderOutput = DevServerBuildOutput & {
  * @param transforms A map of transforms that can be used to hook into some logic (such as
  *     transforming webpack configuration before passing it to webpack).
  */
+// tslint:disable-next-line: no-big-function
 export function serveWebpackBrowser(
   options: DevServerBuilderOptions,
   context: BuilderContext,
@@ -119,14 +156,83 @@ export function serveWebpackBrowser(
       browserName,
     );
 
-    const webpackConfigResult = await buildBrowserWebpackConfigFromContext(
+    const { config, projectRoot, i18n } = await buildBrowserWebpackConfigFromContext(
       browserOptions,
       context,
       host,
+      true,
     );
+    let webpackConfig = config;
+
+    const tsConfig = readTsconfig(browserOptions.tsConfig, context.workspaceRoot);
+    if (i18n.shouldInline && tsConfig.options.enableIvy !== false) {
+      if (i18n.inlineLocales.size > 1) {
+        throw new Error(
+          'The development server only supports localizing a single locale per build',
+        );
+      }
+
+      const locale = [...i18n.inlineLocales][0];
+      const translation = i18n.locales[locale] && i18n.locales[locale].translation;
+
+      const { plugins, diagnostics } = await createI18nPlugins(
+        locale,
+        translation,
+        browserOptions.i18nMissingTranslation,
+      );
 
-    // No differential loading for dev-server, hence there is just one config
-    let webpackConfig = webpackConfigResult.config;
+      // 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({
+        // tslint:disable-next-line:no-any
+        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;
+            });
+          });
+        },
+      });
+    }
 
     const port = await checkPort(options.port || 0, options.host || 'localhost', 4200);
     const webpackDevServerConfig = (webpackConfig.devServer = buildServerConfig(
@@ -145,7 +251,7 @@ export function serveWebpackBrowser(
       webpackConfig,
       webpackDevServerConfig,
       port,
-      projectRoot: webpackConfigResult.projectRoot,
+      projectRoot,
     };
   }
 

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

@@ -40,7 +40,7 @@ function emittedFilesToInlineOptions(
       es5,
       outputPath,
       missingTranslation,
-      setLocale: emittedFile.name === 'main',
+      setLocale: emittedFile.name === 'main' || emittedFile.name === 'vendor',
     };
     originalFiles.push(originalPath);
 

tests/legacy-cli/e2e/tests/i18n/ivy-localize-dl.ts

@@ -1,11 +1,10 @@
 import { appendToFile, expectFileToMatch } from '../../utils/fs';
-import { ng } from '../../utils/process';
+import { execAndWaitForOutputToMatch, killAllProcesses, ng } from '../../utils/process';
 import { updateJsonFile } from '../../utils/project';
 import { expectToFail } from '../../utils/utils';
 import { baseDir, externalServer, langTranslations, setupI18nConfig } from './legacy';
 
-
-export default async function () {
+export default async function() {
   // Setup i18n tests and config.
   await setupI18nConfig();
 
@@ -37,9 +36,12 @@ export default async function () {
     await expectFileToMatch(`${outputPath}/main-es5.js`, '.ng.common.locales');
     await expectFileToMatch(`${outputPath}/main-es2015.js`, '.ng.common.locales');
 
+    // Execute Application E2E tests with dev server
+    await ng('e2e', `--configuration=${lang}`, '--port=0');
+
+    // Execute Application E2E tests for a production build without dev server
     const server = externalServer(outputPath);
     try {
-      // Execute without a devserver.
       await ng('e2e', `--configuration=${lang}`, '--devServerTarget=');
     } finally {
       server.close();
@@ -57,4 +59,9 @@ export default async function () {
   await expectFileToMatch(`${baseDir}/fr/main-es5.js`, /Other content/);
   await expectFileToMatch(`${baseDir}/fr/main-es2015.js`, /Other content/);
   await expectToFail(() => ng('build'));
+  try {
+    await execAndWaitForOutputToMatch('ng', ['serve', '--port=0'], /No translation found for/);
+  } finally {
+    killAllProcesses();
+  }
 }

tests/legacy-cli/e2e/tests/i18n/ivy-localize-es2015.ts

@@ -26,9 +26,12 @@ export default async function() {
     await expectFileNotToExist(`${outputPath}/main-es5.js`);
     await expectFileToMatch(`${outputPath}/main.js`, lang);
 
+    // Execute Application E2E tests with dev server
+    await ng('e2e', `--configuration=${lang}`, '--port=0');
+
+    // Execute Application E2E tests for a production build without dev server
     const server = externalServer(outputPath);
     try {
-      // Execute without a devserver.
       await ng('e2e', `--configuration=${lang}`, '--devServerTarget=');
     } finally {
       server.close();

tests/legacy-cli/e2e/tests/i18n/ivy-localize-es5.ts

@@ -25,9 +25,12 @@ export default async function() {
     await expectFileNotToExist(`${outputPath}/main-es2015.js`);
     await expectFileToMatch(`${outputPath}/main.js`, lang);
 
+    // Execute Application E2E tests with dev server
+    await ng('e2e', `--configuration=${lang}`, '--port=0');
+
+    // Execute Application E2E tests for a production build without dev server
     const server = externalServer(outputPath);
     try {
-      // Execute without a devserver.
       await ng('e2e', `--configuration=${lang}`, '--devServerTarget=');
     } finally {
       server.close();

tests/legacy-cli/e2e/tests/i18n/legacy.ts

@@ -215,17 +215,15 @@ export default async function () {
     await expectFileToMatch(`${outputPath}/main-es5.js`, translation.helloPartial);
     await expectFileToMatch(`${outputPath}/main-es2015.js`, translation.helloPartial);
 
-    // E2E to verify the output runs and is correct.
-    if (getGlobalVariable('argv')['ve']) {
-      await ng('e2e', `--configuration=${lang}`);
-    } else {
-      const server = externalServer(outputPath);
-      try {
-        // Execute without a devserver.
-        await ng('e2e', `--configuration=${lang}`, '--devServerTarget=');
-      } finally {
-        server.close();
-      }
+    // Execute Application E2E tests with dev server
+    await ng('e2e', `--configuration=${lang}`, '--port=0');
+
+    // Execute Application E2E tests for a production build without dev server
+    const server = externalServer(outputPath);
+    try {
+      await ng('e2e', `--configuration=${lang}`, '--devServerTarget=');
+    } finally {
+      server.close();
     }
   }
 

yarn.lock

@@ -2067,6 +2067,16 @@ babel-generator@^6.18.0:
     source-map "^0.5.7"
     trim-right "^1.0.1"
 
+[email protected]:
+  version "8.0.6"
+  resolved "https://registry.yarnpkg.com/babel-loader/-/babel-loader-8.0.6.tgz#e33bdb6f362b03f4bb141a0c21ab87c501b70dfb"
+  integrity sha512-4BmWKtBOBm13uoUwd08UwjZlaw3O9GWf456R9j+5YykFZ6LUIjIKLc0zEZf+hauxPOJs96C8k6FvYD09vWzhYw==
+  dependencies:
+    find-cache-dir "^2.0.0"
+    loader-utils "^1.0.2"
+    mkdirp "^0.5.1"
+    pify "^4.0.1"
+
 babel-messages@^6.23.0:
   version "6.23.0"
   resolved "https://registry.yarnpkg.com/babel-messages/-/babel-messages-6.23.0.tgz#f3cdf4703858035b2a2951c6ec5edf6c62f2630e"
@@ -4474,7 +4484,7 @@ [email protected], find-cache-dir@^3.0.0:
     make-dir "^3.0.0"
     pkg-dir "^4.1.0"
 
-find-cache-dir@^2.1.0:
+find-cache-dir@^2.0.0, find-cache-dir@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/find-cache-dir/-/find-cache-dir-2.1.0.tgz#8d0f94cd13fe43c6c7c261a0d86115ca918c05f7"
   integrity sha512-Tq6PixE0w/VMFfCgbONnkiQIVol/JJL7nRMi20fqzA4NRs9AfeqMGeRdPi3wIhYkxjeBaWh2rxwapn5Tu3IqOQ==