fix(@angular-devkit/build-angular): enable dynamic import parsing with serve localization

Fixes #16248

Author: clydin

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

@@ -367,6 +367,9 @@ async function setupLocalize(
             translationIntegrity: localeDescription && localeDescription.integrity,
           }),
           plugins,
+          parserOpts: {
+            plugins: ['dynamicImport'],
+          },
         },
       },
     ],

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

@@ -57,6 +57,7 @@ export const langTranslations = [
   },
 ];
 export const sourceLocale = langTranslations[0].lang;
+
 export const externalServer = (outputPath: string) => {
   const app = express();
   app.use(express.static(resolve(outputPath)));
@@ -87,6 +88,13 @@ export async function setupI18nConfig(useLocalize = true) {
     <p id="plural" i18n>Updated {minutes, plural, =0 {just now} =1 {one minute ago} other {{{minutes}} minutes ago}}</p>
   `);
 
+  // Add a dynamic import to ensure syntax is supported
+  // ng serve support: https://github.com/angular/angular-cli/issues/16248
+  await writeFile('src/app/dynamic.ts', `export const abc = 5;`);
+  await appendToFile('src/app/app.component.ts', `
+    (async () => { await import('./dynamic'); })();
+  `);
+
   // Add e2e specs for each lang.
   for (const { lang, translation } of langTranslations) {
     await writeFile(`./e2e/src/app.${lang}.e2e-spec.ts`, `