refactor: replace loadEsmModule with dynamic import()

The custom `loadEsmModule` helper function was a workaround to prevent TypeScript from downleveling dynamic imports to `require()` calls, which would fail to load ESM modules.

With modern TypeScript and Node.js versions, this workaround is no longer necessary. This commit removes the `loadEsmModule` utility and replaces all its usages with standard dynamic `import()` expressions.

This simplifies the codebase and relies on the native module loading capabilities of the environment.

Author: alan-agius4

packages/angular/build/src/builders/dev-server/vite/index.ts

@@ -17,7 +17,6 @@ import { ServerSsrMode } from '../../../tools/vite/plugins';
 import { EsbuildLoaderOption } from '../../../tools/vite/utils';
 import { normalizeSourceMaps } from '../../../utils';
 import { useComponentStyleHmr, useComponentTemplateHmr } from '../../../utils/environment-options';
-import { loadEsmModule } from '../../../utils/load-esm';
 import { Result, ResultKind } from '../../application/results';
 import { OutputHashing } from '../../application/schema';
 import {
@@ -175,8 +174,7 @@ export async function* serveWithVite(
   // The index HTML path will be updated from the build results if provided by the builder
   let htmlIndexPath = 'index.html';
 
-  // dynamically import Vite for ESM compatibility
-  const { createServer, normalizePath } = await loadEsmModule<typeof import('vite')>('vite');
+  const { createServer, normalizePath } = await import('vite');
 
   let server: ViteDevServer | undefined;
   let serverUrl: URL | undefined;

packages/angular/build/src/builders/dev-server/vite/server.ts

@@ -19,7 +19,6 @@ import {
 } from '../../../tools/vite/plugins';
 import { EsbuildLoaderOption, getDepOptimizationConfig } from '../../../tools/vite/utils';
 import { loadProxyConfiguration } from '../../../utils';
-import { loadEsmModule } from '../../../utils/load-esm';
 import { type ApplicationBuilderInternalOptions, JavaScriptTransformer } from '../internal';
 import type { NormalizedDevServerOptions } from '../options';
 import { DevServerExternalResultMetadata, OutputAssetRecord, OutputFileRecord } from './utils';
@@ -152,8 +151,7 @@ export async function setupServer(
   indexHtmlTransformer?: (content: string) => Promise<string>,
   thirdPartySourcemaps = false,
 ): Promise<InlineConfig> {
-  // dynamically import Vite for ESM compatibility
-  const { normalizePath } = await loadEsmModule<typeof import('vite')>('vite');
+  const { normalizePath } = await import('vite');
 
   // Path will not exist on disk and only used to provide separate path for Vite requests
   const virtualProjectRoot = normalizePath(

packages/angular/build/src/builders/extract-i18n/builder.ts

@@ -10,7 +10,6 @@ import type { Diagnostics } from '@angular/localize/tools';
 import type { BuilderContext, BuilderOutput } from '@angular-devkit/architect';
 import fs from 'node:fs';
 import path from 'node:path';
-import { loadEsmModule } from '../../utils/load-esm';
 import { assertCompatibleAngularVersion } from '../../utils/version';
 import type { ApplicationBuilderExtensions } from '../application/options';
 import { normalizeOptions } from './options';
@@ -51,8 +50,7 @@ export async function execute(
   // The package is a peer dependency and might not be present
   let localizeToolsModule;
   try {
-    localizeToolsModule =
-      await loadEsmModule<typeof import('@angular/localize/tools')>('@angular/localize/tools');
+    localizeToolsModule = await import('@angular/localize/tools');
   } catch {
     return {
       success: false,

packages/angular/build/src/builders/unit-test/runners/vitest/browser-provider.ts

@@ -7,15 +7,16 @@
  */
 
 import { createRequire } from 'node:module';
+import type { BrowserBuiltinProvider, BrowserConfigOptions } from 'vitest/node';
 
 export interface BrowserConfiguration {
-  browser?: import('vitest/node').BrowserConfigOptions;
+  browser?: BrowserConfigOptions;
   errors?: string[];
 }
 
 function findBrowserProvider(
   projectResolver: NodeJS.RequireResolve,
-): import('vitest/node').BrowserBuiltinProvider | undefined {
+): BrowserBuiltinProvider | undefined {
   // One of these must be installed in the project to use browser testing
   const vitestBuiltinProviders = ['playwright', 'webdriverio'] as const;
 
@@ -87,7 +88,7 @@ export function setupBrowserConfiguration(
   const isCI = !!process.env['CI'];
   const headless = isCI || browsers.some((name) => name.toLowerCase().includes('headless'));
 
-  const browser = {
+  const browser: BrowserConfigOptions = {
     enabled: true,
     provider,
     headless,
@@ -96,7 +97,7 @@ export function setupBrowserConfiguration(
     instances: browsers.map((browserName) => ({
       browser: normalizeBrowserName(browserName),
     })),
-  } satisfies import('vitest/node').BrowserConfigOptions;
+  };
 
   return { browser };
 }

packages/angular/build/src/builders/unit-test/runners/vitest/executor.ts

@@ -11,7 +11,6 @@ import assert from 'node:assert';
 import path from 'node:path';
 import type { InlineConfig, Vitest } from 'vitest/node';
 import { assertIsError } from '../../../../utils/error';
-import { loadEsmModule } from '../../../../utils/load-esm';
 import { toPosixPath } from '../../../../utils/path';
 import {
   type FullResult,
@@ -141,7 +140,7 @@ export class VitestExecutor implements TestExecutor {
     } = this.options;
     let vitestNodeModule;
     try {
-      vitestNodeModule = await loadEsmModule<typeof import('vitest/node')>('vitest/node');
+      vitestNodeModule = await import('vitest/node');
     } catch (error: unknown) {
       assertIsError(error);
       if (error.code !== 'ERR_MODULE_NOT_FOUND') {
@@ -230,7 +229,7 @@ async function generateCoverageOption(
   let defaultExcludes: string[] = [];
   if (coverage.exclude) {
     try {
-      const vitestConfig = await loadEsmModule<typeof import('vitest/config')>('vitest/config');
+      const vitestConfig = await import('vitest/config');
       defaultExcludes = vitestConfig.coverageConfigDefaults.exclude;
     } catch {}
   }

packages/angular/build/src/tools/angular/compilation/angular-compilation.ts

@@ -9,7 +9,6 @@
 import type ng from '@angular/compiler-cli';
 import type { PartialMessage } from 'esbuild';
 import type ts from 'typescript';
-import { loadEsmModule } from '../../../utils/load-esm';
 import { convertTypeScriptDiagnostic } from '../../esbuild/angular/diagnostics';
 import { profileAsync, profileSync } from '../../esbuild/profiling';
 import type { AngularHostOptions } from '../angular-host';
@@ -33,10 +32,7 @@ export abstract class AngularCompilation {
   static #typescriptModule?: typeof ts;
 
   static async loadCompilerCli(): Promise<typeof ng> {
-    // This uses a wrapped dynamic import to load `@angular/compiler-cli` which is ESM.
-    // Once TypeScript provides support for retaining dynamic imports this workaround can be dropped.
-    AngularCompilation.#angularCompilerCliModule ??=
-      await loadEsmModule<typeof ng>('@angular/compiler-cli');
+    AngularCompilation.#angularCompilerCliModule ??= await import('@angular/compiler-cli');
 
     return AngularCompilation.#angularCompilerCliModule;
   }

packages/angular/build/src/tools/angular/compilation/jit-compilation.ts

@@ -9,7 +9,6 @@
 import type ng from '@angular/compiler-cli';
 import assert from 'node:assert';
 import ts from 'typescript';
-import { loadEsmModule } from '../../../utils/load-esm';
 import { profileSync } from '../../esbuild/profiling';
 import { AngularHostOptions, createAngularCompilerHost } from '../angular-host';
 import { createJitResourceTransformer } from '../transformers/jit-resource-transformer';
@@ -44,9 +43,9 @@ export class JitCompilation extends AngularCompilation {
     referencedFiles: readonly string[];
   }> {
     // Dynamically load the Angular compiler CLI package
-    const { constructorParametersDownlevelTransform } = await loadEsmModule<
-      typeof import('@angular/compiler-cli/private/tooling')
-    >('@angular/compiler-cli/private/tooling');
+    const { constructorParametersDownlevelTransform } = await import(
+      '@angular/compiler-cli/private/tooling'
+    );
 
     // Load the compiler configuration and transform as needed
     const {

packages/angular/build/src/tools/esbuild/i18n-inliner-worker.ts

@@ -11,7 +11,6 @@ import { PluginObj, parseSync, transformFromAstAsync, types } from '@babel/core'
 import assert from 'node:assert';
 import { workerData } from 'node:worker_threads';
 import { assertIsError } from '../../utils/error';
-import { loadEsmModule } from '../../utils/load-esm';
 
 /**
  * The options passed to the inliner for each file request
@@ -131,7 +130,7 @@ async function loadLocalizeTools(): Promise<LocalizeUtilityModule> {
   // 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.
-  localizeToolsModule ??= await loadEsmModule<LocalizeUtilityModule>('@angular/localize/tools');
+  localizeToolsModule ??= await import('@angular/localize/tools');
 
   return localizeToolsModule;
 }

packages/angular/build/src/tools/esbuild/javascript-transformer-worker.ts

@@ -10,7 +10,6 @@ import { type PluginItem, transformAsync } from '@babel/core';
 import fs from 'node:fs';
 import path from 'node:path';
 import Piscina from 'piscina';
-import { loadEsmModule } from '../../utils/load-esm';
 
 interface JavaScriptTransformRequest {
   filename: string;
@@ -133,11 +132,8 @@ async function requiresLinking(path: string, source: string): Promise<boolean> {
 }
 
 async function createLinkerPlugin(options: Omit<JavaScriptTransformRequest, 'filename' | 'data'>) {
-  linkerPluginCreator ??= (
-    await loadEsmModule<typeof import('@angular/compiler-cli/linker/babel')>(
-      '@angular/compiler-cli/linker/babel',
-    )
-  ).createEs2015LinkerPlugin;
+  linkerPluginCreator ??= (await import('@angular/compiler-cli/linker/babel'))
+    .createEs2015LinkerPlugin;
 
   const linkerPlugin = linkerPluginCreator({
     linkerJitMode: options.jit,

packages/angular/build/src/tools/vite/middlewares/ssr-middleware.ts

@@ -10,10 +10,8 @@ import type {
   AngularAppEngine as SSRAngularAppEngine,
   ɵgetOrCreateAngularServerApp as getOrCreateAngularServerApp,
 } from '@angular/ssr';
-import type * as AngularSsrNode from '@angular/ssr/node' with { 'resolution-mode': 'import' };
 import type { ServerResponse } from 'node:http';
 import type { Connect, ViteDevServer } from 'vite';
-import { loadEsmModule } from '../../../utils/load-esm';
 import {
   isSsrNodeRequestHandler,
   isSsrRequestHandler,
@@ -37,9 +35,11 @@ export function createAngularSsrInternalMiddleware(
     (async () => {
       // Load the compiler because `@angular/ssr/node` depends on `@angular/` packages,
       // which must be processed by the runtime linker, even if they are not used.
-      await loadEsmModule('@angular/compiler');
-      const { writeResponseToNodeResponse, createWebRequestFromNodeRequest } =
-        await loadEsmModule<typeof AngularSsrNode>('@angular/ssr/node');
+      await import('@angular/compiler');
+      const { writeResponseToNodeResponse, createWebRequestFromNodeRequest } = (await import(
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        '@angular/ssr/node' as any
+      )) as typeof import('@angular/ssr/node', { with: { 'resolution-mode': 'import' } });
 
       const { ɵgetOrCreateAngularServerApp } = (await server.ssrLoadModule('/main.server.mjs')) as {
         ɵgetOrCreateAngularServerApp: typeof getOrCreateAngularServerApp;
@@ -91,10 +91,12 @@ export async function createAngularSsrExternalMiddleware(
 
   // Load the compiler because `@angular/ssr/node` depends on `@angular/` packages,
   // which must be processed by the runtime linker, even if they are not used.
-  await loadEsmModule('@angular/compiler');
+  await import('@angular/compiler');
 
-  const { createWebRequestFromNodeRequest, writeResponseToNodeResponse } =
-    await loadEsmModule<typeof AngularSsrNode>('@angular/ssr/node');
+  const { createWebRequestFromNodeRequest, writeResponseToNodeResponse } = (await import(
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    '@angular/ssr/node' as any
+  )) as typeof import('@angular/ssr/node', { with: { 'resolution-mode': 'import' } });
 
   return function angularSsrExternalMiddleware(
     req: Connect.IncomingMessage,