fix(@angular-devkit/build-angular): ensure esbuild builder sourcemap sources are relative to workspace

This change adjusts the virtual output directory of the configuration for the experimental esbuild-based
browser application builder to be based on the workspace root. This allows esbuild to generate sourcemap
source paths that are relative to the workspace root and that do not contain path information from outside
the workspace root.

Author: clydin

.circleci/config.yml

@@ -221,7 +221,7 @@ jobs:
           name: Execute CLI E2E Tests Subset with esbuild builder
           command: |
             mkdir /mnt/ramdisk/e2e-esbuild
-            node ./tests/legacy-cli/run_e2e --nb-shards=${CIRCLE_NODE_TOTAL} --shard=${CIRCLE_NODE_INDEX} <<# parameters.snapshots >>--ng-snapshots<</ parameters.snapshots >> --esbuild --tmpdir=/mnt/ramdisk/e2e-esbuild --glob="{tests/basic/**,tests/build/prod-build.ts,tests/build/styles/scss.ts,tests/build/styles/include-paths.ts,tests/commands/add/add-pwa.ts}" --ignore="tests/basic/{environment,rebuild,serve,scripts-array}.ts"
+            node ./tests/legacy-cli/run_e2e --nb-shards=${CIRCLE_NODE_TOTAL} --shard=${CIRCLE_NODE_INDEX} <<# parameters.snapshots >>--ng-snapshots<</ parameters.snapshots >> --esbuild --tmpdir=/mnt/ramdisk/e2e-esbuild --glob="{tests/basic/**,tests/build/prod-build.ts,tests/build/relative-sourcemap.ts,tests/build/styles/scss.ts,tests/build/styles/include-paths.ts,tests/commands/add/add-pwa.ts}" --ignore="tests/basic/{environment,rebuild,serve,scripts-array}.ts"
       - fail_fast
 
   test-browsers:

packages/angular_devkit/build_angular/src/builders/browser-esbuild/esbuild.ts

@@ -16,10 +16,6 @@ import {
   build,
   formatMessages,
 } from 'esbuild';
-import { resolve } from 'path';
-
-/** Default outdir setting for esbuild. */
-export const DEFAULT_OUTDIR = resolve('/virtual-output');
 
 /**
  * Determines if an unknown value is an esbuild BuildFailure error object thrown by esbuild.

packages/angular_devkit/build_angular/src/builders/browser-esbuild/index.ts

@@ -21,7 +21,7 @@ import { augmentAppWithServiceWorker } from '../../utils/service-worker';
 import { getIndexInputFile, getIndexOutputFile } from '../../utils/webpack-browser-config';
 import { resolveGlobalStyles } from '../../webpack/configs';
 import { createCompilerPlugin } from './compiler-plugin';
-import { DEFAULT_OUTDIR, bundle, logMessages } from './esbuild';
+import { bundle, logMessages } from './esbuild';
 import { logExperimentalWarnings } from './experimental-warnings';
 import { normalizeOptions } from './options';
 import { Schema as BrowserBuilderOptions, SourceMapClass } from './schema';
@@ -120,7 +120,7 @@ export async function buildEsbuildBrowser(
     const relativeFilePath = path.relative(workspaceRoot, outputFile.path);
     const entryPoint = result.metafile?.outputs[relativeFilePath]?.entryPoint;
 
-    outputFile.path = path.relative(DEFAULT_OUTDIR, outputFile.path);
+    outputFile.path = relativeFilePath;
 
     if (entryPoint) {
       // An entryPoint value indicates an initial file
@@ -159,6 +159,7 @@ export async function buildEsbuildBrowser(
         virtualEntryData,
         { virtualName: `angular:style/global;${name}`, resolvePath: workspaceRoot },
         {
+          workspaceRoot,
           optimization: !!optimizationOptions.styles.minify,
           sourcemap: !!sourcemapOptions.styles && (sourcemapOptions.hidden ? 'external' : true),
           outputNames: noInjectNames.includes(name) ? { media: outputNames.media } : outputNames,
@@ -309,7 +310,7 @@ async function bundleCode(
     metafile: true,
     minify: optimizationOptions.scripts,
     pure: ['forwardRef'],
-    outdir: DEFAULT_OUTDIR,
+    outdir: workspaceRoot,
     sourcemap: sourcemapOptions.scripts && (sourcemapOptions.hidden ? 'external' : true),
     splitting: true,
     tsconfig,

packages/angular_devkit/build_angular/src/builders/browser-esbuild/stylesheets.ts

@@ -8,11 +8,11 @@
 
 import type { BuildOptions, OutputFile } from 'esbuild';
 import * as path from 'path';
-import { DEFAULT_OUTDIR, bundle } from './esbuild';
+import { bundle } from './esbuild';
 import { createSassPlugin } from './sass-plugin';
 
 export interface BundleStylesheetOptions {
-  workspaceRoot?: string;
+  workspaceRoot: string;
   optimization: boolean;
   preserveSymlinks?: boolean;
   sourcemap: boolean | 'external' | 'inline';
@@ -34,7 +34,7 @@ async function bundleStylesheet(
     logLevel: 'silent',
     minify: options.optimization,
     sourcemap: options.sourcemap,
-    outdir: DEFAULT_OUTDIR,
+    outdir: options.workspaceRoot,
     write: false,
     platform: 'browser',
     preserveSymlinks: options.preserveSymlinks,
@@ -52,7 +52,7 @@ async function bundleStylesheet(
   const resourceFiles: OutputFile[] = [];
   if (result.outputFiles) {
     for (const outputFile of result.outputFiles) {
-      outputFile.path = path.relative(DEFAULT_OUTDIR, outputFile.path);
+      outputFile.path = path.relative(options.workspaceRoot, outputFile.path);
       const filename = path.basename(outputFile.path);
       if (filename.endsWith('.css')) {
         outputPath = outputFile.path;

tests/legacy-cli/e2e/tests/build/relative-sourcemap.ts

@@ -1,19 +1,45 @@
 import * as fs from 'fs';
 
 import { isAbsolute } from 'path';
+import { getGlobalVariable } from '../../utils/env';
 import { ng } from '../../utils/process';
+import { updateJsonFile } from '../../utils/project';
 
 export default async function () {
   // General secondary application project
   await ng('generate', 'application', 'secondary-project', '--skip-install');
+  // Setup esbuild builder if requested on the commandline
+  const useEsbuildBuilder = !!getGlobalVariable('argv')['esbuild'];
+  if (useEsbuildBuilder) {
+    await updateJsonFile('angular.json', (json) => {
+      json['projects']['secondary-project']['architect']['build']['builder'] =
+        '@angular-devkit/build-angular:browser-esbuild';
+    });
+  }
+
   await ng('build', 'secondary-project', '--configuration=development');
 
   await ng('build', '--output-hashing=none', '--source-map', '--configuration=development');
   const content = fs.readFileSync('./dist/secondary-project/main.js.map', 'utf8');
-  const { sources } = JSON.parse(content);
+  const { sources } = JSON.parse(content) as { sources: string[] };
+  let mainFileFound = false;
   for (const source of sources) {
     if (isAbsolute(source)) {
       throw new Error(`Expected ${source} to be relative.`);
     }
+
+    if (source.endsWith('main.ts')) {
+      mainFileFound = true;
+      if (
+        source !== 'projects/secondary-project/src/main.ts' &&
+        source !== './projects/secondary-project/src/main.ts'
+      ) {
+        throw new Error(`Expected main file ${source} to be relative to the workspace root.`);
+      }
+    }
+  }
+
+  if (!mainFileFound) {
+    throw new Error('Could not find the main file in the application sourcemap sources array.');
   }
 }