refactor(@angular-devkit/build-angular): remove ESM workarounds

Author: alan-agius4

packages/angular_devkit/build_angular/src/babel/presets/application.ts

@@ -6,6 +6,7 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
+import type { ɵParsedTranslation } from '@angular/localize/private';
 import type {
   DiagnosticHandlingStrategy,
   Diagnostics,
@@ -35,9 +36,9 @@ export interface ApplicationPresetOptions {
   i18n?: {
     locale: string;
     missingTranslationBehavior?: 'error' | 'warning' | 'ignore';
-    translation?: unknown;
+    translation?: Record<string, ɵParsedTranslation>;
     translationFiles?: string[];
-    pluginCreators?: I18nPluginCreators;
+    pluginCreators: I18nPluginCreators;
   };
 
   angularLinker?: {
@@ -107,47 +108,30 @@ function createI18nDiagnostics(reporter: DiagnosticReporter | undefined): Diagno
 
 function createI18nPlugins(
   locale: string,
-  translation: unknown | undefined,
+  translation: Record<string, ɵParsedTranslation> | undefined,
   missingTranslationBehavior: 'error' | 'warning' | 'ignore',
   diagnosticReporter: DiagnosticReporter | undefined,
-  // TODO_ESM: Make `pluginCreators` required once `@angular/localize` is published with the `tools` entry point
-  pluginCreators: I18nPluginCreators | undefined,
+  pluginCreators: I18nPluginCreators,
 ) {
   const diagnostics = createI18nDiagnostics(diagnosticReporter);
   const plugins = [];
 
+  const { makeEs5TranslatePlugin, makeEs2015TranslatePlugin, makeLocalePlugin } = pluginCreators;
+
   if (translation) {
-    const {
-      makeEs2015TranslatePlugin,
-      // TODO_ESM: Remove all deep imports once `@angular/localize` is published with the `tools` entry point
-    } =
-      pluginCreators ??
-      require('@angular/localize/src/tools/src/translate/source_files/es2015_translate_plugin');
     plugins.push(
       makeEs2015TranslatePlugin(diagnostics, translation, {
         missingTranslation: missingTranslationBehavior,
       }),
     );
 
-    const {
-      makeEs5TranslatePlugin,
-      // TODO_ESM: Remove all deep imports once `@angular/localize` is published with the `tools` entry point
-    } =
-      pluginCreators ??
-      require('@angular/localize/src/tools/src/translate/source_files/es5_translate_plugin');
     plugins.push(
       makeEs5TranslatePlugin(diagnostics, translation, {
         missingTranslation: missingTranslationBehavior,
       }),
     );
   }
 
-  const {
-    makeLocalePlugin,
-    // TODO_ESM: Remove all deep imports once `@angular/localize` is published with the `tools` entry point
-  } =
-    pluginCreators ??
-    require('@angular/localize/src/tools/src/translate/source_files/locale_plugin');
   plugins.push(makeLocalePlugin(locale));
 
   return plugins;

packages/angular_devkit/build_angular/src/babel/webpack-loader.ts

@@ -91,15 +91,14 @@ export default custom<ApplicationPresetOptions>(() => {
 
       // Analyze file for linking
       if (await requiresLinking(this.resourcePath, source)) {
-        if (!linkerPluginCreator) {
-          // Load ESM `@angular/compiler-cli/linker/babel` using the TypeScript dynamic import workaround.
-          // Once TypeScript provides support for keeping the dynamic import this workaround can be
-          // changed to a direct dynamic import.
-          const linkerBabelModule = await loadEsmModule<
-            typeof import('@angular/compiler-cli/linker/babel')
-          >('@angular/compiler-cli/linker/babel');
-          linkerPluginCreator = linkerBabelModule.createEs2015LinkerPlugin;
-        }
+        // Load ESM `@angular/compiler-cli/linker/babel` using the TypeScript dynamic import workaround.
+        // Once TypeScript provides support for keeping the dynamic import this workaround can be
+        // changed to a direct dynamic import.
+        linkerPluginCreator ??= (
+          await loadEsmModule<typeof import('@angular/compiler-cli/linker/babel')>(
+            '@angular/compiler-cli/linker/babel',
+          )
+        ).createEs2015LinkerPlugin;
 
         customOptions.angularLinker = {
           shouldLink: true,
@@ -136,14 +135,11 @@ export default custom<ApplicationPresetOptions>(() => {
         // During the transition, this will always attempt to load the entry point for each file.
         // This will only occur during prerelease and will be automatically corrected once the new
         // entry point exists.
-        // TODO_ESM: Make import failure an error once the `tools` entry point exists.
         if (i18nPluginCreators === undefined) {
           // Load ESM `@angular/localize/tools` using the TypeScript dynamic import workaround.
           // Once TypeScript provides support for keeping the dynamic import this workaround can be
           // changed to a direct dynamic import.
-          try {
-            i18nPluginCreators = await loadEsmModule<I18nPluginCreators>('@angular/localize/tools');
-          } catch {}
+          i18nPluginCreators = await loadEsmModule<I18nPluginCreators>('@angular/localize/tools');
         }
 
         customOptions.i18n = {

packages/angular_devkit/build_angular/src/builders/extract-i18n/ivy-extract-loader.ts

@@ -49,7 +49,6 @@ async function extract(
   // Try to load the `@angular/localize` message extractor.
   // All the localize usages are setup to first try the ESM entry point then fallback to the deep imports.
   // This provides interim compatibility while the framework is transitioned to bundled ESM packages.
-  // TODO_ESM: Remove all deep imports once `@angular/localize` is published with the `tools` entry point
   let MessageExtractor;
   try {
     // Load ESM `@angular/localize/tools` using the TypeScript dynamic import workaround.

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

@@ -217,9 +217,7 @@ export async function configureI18nBuild<T extends BrowserBuilderSchema | Server
       continue;
     }
 
-    if (!loader) {
-      loader = await createTranslationLoader();
-    }
+    loader ??= await createTranslationLoader();
 
     loadTranslations(
       locale,

packages/angular_devkit/build_angular/src/utils/read-tsconfig.ts

@@ -26,14 +26,9 @@ export async function readTsconfig(
   // Load ESM `@angular/compiler-cli` using the TypeScript dynamic import workaround.
   // Once TypeScript provides support for keeping the dynamic import this workaround can be
   // changed to a direct dynamic import.
-  const compilerCliModule = await loadEsmModule<{ readConfiguration: unknown; default: unknown }>(
-    '@angular/compiler-cli',
-  );
-  // If it is not ESM then the functions needed will be stored in the `default` property.
-  // TODO_ESM: This can be removed once `@angular/compiler-cli` is ESM only.
-  const { formatDiagnostics, readConfiguration } = (
-    compilerCliModule.readConfiguration ? compilerCliModule : compilerCliModule.default
-  ) as typeof import('@angular/compiler-cli');
+  const { formatDiagnostics, readConfiguration } = await loadEsmModule<
+    typeof import('@angular/compiler-cli')
+  >('@angular/compiler-cli');
 
   const configResult = readConfiguration(tsConfigFullPath);
   if (configResult.errors && configResult.errors.length) {

packages/angular_devkit/build_angular/src/webpack/configs/common.ts

@@ -81,19 +81,11 @@ export async function getCommonConfig(wco: WebpackConfigOptions): Promise<Config
   // Load ESM `@angular/compiler-cli` using the TypeScript dynamic import workaround.
   // Once TypeScript provides support for keeping the dynamic import this workaround can be
   // changed to a direct dynamic import.
-  const compilerCliModule = await loadEsmModule<{
-    GLOBAL_DEFS_FOR_TERSER: unknown;
-    default: unknown;
-  }>('@angular/compiler-cli');
-  // If it is not ESM then the values needed will be stored in the `default` property.
-  // TODO_ESM: This can be removed once `@angular/compiler-cli` is ESM only.
   const {
     GLOBAL_DEFS_FOR_TERSER,
     GLOBAL_DEFS_FOR_TERSER_WITH_AOT,
     VERSION: NG_VERSION,
-  } = (
-    compilerCliModule.GLOBAL_DEFS_FOR_TERSER ? compilerCliModule : compilerCliModule.default
-  ) as typeof import('@angular/compiler-cli');
+  } = await loadEsmModule<typeof import('@angular/compiler-cli')>('@angular/compiler-cli');
 
   // determine hashing format
   const hashFormat = getOutputHashFormat(buildOptions.outputHashing || 'none');