fix(@angular-devkit/build-angular): temporarily disable localize for multiple locales

Related to angular#15974

Author: filipesilva

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

@@ -105,6 +105,11 @@ export async function configureI18nBuild<T extends BrowserBuilderSchema | Server
 
   const buildOptions = { ... options };
 
+  if (buildOptions.localize === true
+    || (Array.isArray(buildOptions.localize) && buildOptions.localize.length > 1)) {
+    throw new Error('Using the localize option for multiple locales is temporarily disabled.');
+  }
+
   const tsConfig = readTsconfig(buildOptions.tsConfig, context.workspaceRoot);
   const usingIvy = tsConfig.options.enableIvy !== false;
   const metadata = await context.getProjectMetadata(context.target);

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

@@ -54,6 +54,8 @@ export default async function() {
 
     // Enable localization for all locales
     appArchitect['build'].options.localize = true;
+    // Always error on missing translations.
+    appArchitect['build'].options.i18nMissingTranslation = 'error';
 
     // Add locale definitions to the project
     // tslint:disable-next-line: no-any
@@ -103,8 +105,13 @@ export default async function() {
   }
 
   // Build each locale and verify the output.
-  await ng('build', '--i18n-missing-translation', 'error');
+  // NOTE: this should not fail in general, but multi-locale translation is currently disabled.
+  // TODO: remove expectToFail when functionality is re-enabled.
+  await expectToFail(() => ng('build'));
   for (const { lang, translation } of langTranslations) {
+    // NOTE: remove this extra single build once the above expectToFail is removed.
+    await ng('build', '-c', lang);
+
     await expectFileToMatch(`${baseDir}/${lang}/main-es5.js`, translation);
     await expectFileToMatch(`${baseDir}/${lang}/main-es2015.js`, translation);
     await expectToFail(() => expectFileToMatch(`${baseDir}/${lang}/main-es5.js`, '$localize`'));
@@ -152,8 +159,8 @@ export default async function() {
 
   // Verify missing translation behaviour.
   await appendToFile('src/app/app.component.html', '<p i18n>Other content</p>');
-  await ng('build', '--i18n-missing-translation', 'ignore');
+  await ng('build', '--i18n-missing-translation', 'ignore', '-c', 'fr');
   await expectFileToMatch(`${baseDir}/fr/main-es5.js`, /Other content/);
   await expectFileToMatch(`${baseDir}/fr/main-es2015.js`, /Other content/);
-  await expectToFail(() => ng('build', '--i18n-missing-translation', 'error'));
+  await expectToFail(() => ng('build', '-c', 'fr'));
 }

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

@@ -42,6 +42,7 @@ export default async function() {
     const appArchitect = appProject.architect || appProject.targets;
     const serveConfigs = appArchitect['serve'].configurations;
     const e2eConfigs = appArchitect['e2e'].configurations;
+    const buildConfigs = appArchitect['build'].configurations;
 
     // Make default builds prod.
     appArchitect['build'].options.optimization = true;
@@ -56,6 +57,8 @@ export default async function() {
 
     // Enable localization for all locales
     appArchitect['build'].options.localize = true;
+    // Always error on missing translations.
+    appArchitect['build'].options.i18nMissingTranslation = 'error';
 
     // Add locale definitions to the project
     // tslint:disable-next-line: no-any
@@ -66,6 +69,8 @@ export default async function() {
       } else {
         i18n.locales[lang] = `src/locale/messages.${lang}.xlf`;
       }
+
+      buildConfigs[lang] = { localize: [lang] };
       serveConfigs[lang] = { browserTarget: `test-project:build:${lang}` };
       e2eConfigs[lang] = {
         specs: [`./src/app.${lang}.e2e-spec.ts`],
@@ -102,9 +107,13 @@ export default async function() {
     }
   }
 
-  // Build each locale and verify the output.
-  await ng('build', '--i18n-missing-translation', 'error');
+  // NOTE: this should not fail in general, but multi-locale translation is currently disabled.
+  // TODO: remove expectToFail when functionality is re-enabled.
+  await expectToFail(() => ng('build'));
   for (const { lang, translation } of langTranslations) {
+    // NOTE: remove this extra single build once the above expectToFail is removed.
+    await ng('build', '-c', lang);
+
     await expectFileToMatch(`${baseDir}/${lang}/main.js`, translation);
     await expectToFail(() => expectFileToMatch(`${baseDir}/${lang}/main.js`, '$localize`'));
     await expectFileNotToExist(`${baseDir}/${lang}/main-es5.js`);
@@ -145,7 +154,7 @@ export default async function() {
 
   // Verify missing translation behaviour.
   await appendToFile('src/app/app.component.html', '<p i18n>Other content</p>');
-  await ng('build', '--i18n-missing-translation', 'ignore');
+  await ng('build', '--i18n-missing-translation', 'ignore', '-c', 'fr');
   await expectFileToMatch(`${baseDir}/fr/main.js`, /Other content/);
-  await expectToFail(() => ng('build', '--i18n-missing-translation', 'error'));
+  await expectToFail(() => ng('build', '-c', 'fr'));
 }

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

@@ -41,6 +41,7 @@ export default async function() {
     const appArchitect = appProject.architect || appProject.targets;
     const serveConfigs = appArchitect['serve'].configurations;
     const e2eConfigs = appArchitect['e2e'].configurations;
+    const buildConfigs = appArchitect['build'].configurations;
 
     // Make default builds prod.
     appArchitect['build'].options.optimization = true;
@@ -55,6 +56,8 @@ export default async function() {
 
     // Enable localization for all locales
     appArchitect['build'].options.localize = true;
+    // Always error on missing translations.
+    appArchitect['build'].options.i18nMissingTranslation = 'error';
 
     // Add locale definitions to the project
     // tslint:disable-next-line: no-any
@@ -65,6 +68,8 @@ export default async function() {
       } else {
         i18n.locales[lang] = `src/locale/messages.${lang}.xlf`;
       }
+
+      buildConfigs[lang] = { localize: [lang] };
       serveConfigs[lang] = { browserTarget: `test-project:build:${lang}` };
       e2eConfigs[lang] = {
         specs: [`./src/app.${lang}.e2e-spec.ts`],
@@ -102,9 +107,15 @@ export default async function() {
   }
 
   // Build each locale and verify the output.
-  await ng('build', '--i18n-missing-translation', 'error');
+  // NOTE: this should not fail in general, but multi-locale translation is currently disabled.
+  // TODO: remove expectToFail when functionality is re-enabled.
+  await expectToFail(() => ng('build'));
   for (const { lang, translation } of langTranslations) {
+    // NOTE: remove this extra single build once the above expectToFail is removed.
+    await ng('build', '-c', lang);
+
     await expectFileToMatch(`${baseDir}/${lang}/main.js`, translation);
+    await expectFileToMatch(`${baseDir}/${lang}/main.js`, 'registerLocaleData');
     await expectToFail(() => expectFileToMatch(`${baseDir}/${lang}/main.js`, '$localize`'));
     await expectFileNotToExist(`${baseDir}/${lang}/main-es2015.js`);
     await expectFileToMatch(`${baseDir}/${lang}/main.js`, lang);
@@ -142,9 +153,13 @@ export default async function() {
     }
   }
 
+  // Verify locale data registration (currently only for single locale builds)
+  await ng('build', '--optimization', 'false', '-c', 'fr', '--i18n-missing-translation', 'error');
+  await expectFileToMatch(`${baseDir}/fr/main.js`, 'registerLocaleData');
+
   // Verify missing translation behaviour.
   await appendToFile('src/app/app.component.html', '<p i18n>Other content</p>');
-  await ng('build', '--i18n-missing-translation', 'ignore');
+  await ng('build', '--i18n-missing-translation', 'ignore', '-c', 'fr');
   await expectFileToMatch(`${baseDir}/fr/main.js`, /Other content/);
-  await expectToFail(() => ng('build', '--i18n-missing-translation', 'error'));
+  await expectToFail(() => ng('build', '-c', 'fr'));
 }