fix(@angular-devkit/build-angular): use URLs for absolute import paths with ESM

clydin · clydin · commit 13cceab8e737 · 2021-09-23T13:59:31.000-04:00
Absolute import paths, especially on Windows, must be `file://` URLs when using ESM. Otherwise, Windows drive letters (e.g., `C:`) would be interpreted as a protocol instead of a drive letter when performing the import.
diff --git a/packages/angular_devkit/build_angular/src/utils/load-esm.ts b/packages/angular_devkit/build_angular/src/utils/load-esm.ts
@@ -6,6 +6,8 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
+import { URL } from 'url';
+
 /**
  * This uses a dynamic import to load a module which may be ESM.
  * CommonJS code can load ESM code via a dynamic import. Unfortunately, TypeScript
@@ -18,7 +20,7 @@
  * @param modulePath The path of the module to load.
  * @returns A Promise that resolves to the dynamically imported module.
  */
-export async function loadEsmModule<T>(modulePath: string): Promise<T> {
+export async function loadEsmModule<T>(modulePath: string | URL): Promise<T> {
   try {
     return (await new Function('modulePath', `return import(modulePath);`)(modulePath)) as T;
   } catch (e) {
diff --git a/packages/angular_devkit/build_angular/src/utils/service-worker.ts b/packages/angular_devkit/build_angular/src/utils/service-worker.ts
@@ -12,6 +12,7 @@ import * as crypto from 'crypto';
 import { createReadStream, promises as fs, constants as fsConstants } from 'fs';
 import * as path from 'path';
 import { pipeline } from 'stream';
+import { pathToFileURL } from 'url';
 import { loadEsmModule } from './load-esm';
 
 class CliFilesystem implements Filesystem {
@@ -75,9 +76,13 @@ export async function augmentAppWithServiceWorker(
   const workerPath = require.resolve('@angular/service-worker/ngsw-worker.js', {
     paths: [systemProjectRoot],
   });
-  const swConfigPath = require.resolve('@angular/service-worker/config', {
-    paths: [systemProjectRoot],
-  });
+  // Absolute paths on Windows must be `file://` URLs when using ESM. Otherwise,
+  // `c:` would be interpreted as a protocol instead of a drive letter.
+  const swConfigPath = pathToFileURL(
+    require.resolve('@angular/service-worker/config', {
+      paths: [systemProjectRoot],
+    }),
+  );
 
   // Determine the configuration file path
   let configPath;
