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 {
@@ -176,7 +175,7 @@ export async function* serveWithVite(
   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/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';
@@ -35,8 +34,7 @@ export abstract class AngularCompilation {
   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,

packages/angular/build/src/tools/vite/plugins/angular-memory-plugin.ts

@@ -11,7 +11,6 @@ import { readFile } from 'node:fs/promises';
 import { dirname, join, relative } from 'node:path';
 import { fileURLToPath } from 'node:url';
 import type { Plugin } from 'vite';
-import { loadEsmModule } from '../../../utils/load-esm';
 import { AngularMemoryOutputFiles } from '../utils';
 
 interface AngularMemoryPluginOptions {
@@ -30,7 +29,7 @@ export async function createAngularMemoryPlugin(
   options: AngularMemoryPluginOptions,
 ): Promise<Plugin> {
   const { virtualProjectRoot, outputFiles, external } = options;
-  const { normalizePath } = await loadEsmModule<typeof import('vite')>('vite');
+  const { normalizePath } = await import('vite');
 
   return {
     name: 'vite:angular-memory',