feat(@angular/build): allow enabling Bazel sandbox plugin with esbuild

Setting the new `ENABLE_BAZEL_SANDBOX_PLUGIN` environment variable to `true` or `1`
during a build with the `esbuild` based builder will now inject a special plugin to
make `esbuild` compatible with Bazel builds in the output tree.

When trying to integrate the `esbuild` based builder into Bazel with `rules_js` we found
that it will incorrectly follow symlinks out of the sandbox. This is because Node.js based
tooling runs in the output tree to support canonical JS project directory structures. The
output tree will contain symlinks outside of the sandbox. Node tooling will generally
follow these symlinks, which violates the rules of Bazel sandboxing. This can manifest
in a wide variety of errors. One example we encountered with Angular compilation
is that the symlinked browser entry point (e.g. `main.ts`) is outside of the range of
`tsconfig.json` when the compiler follows the symlink.

The plugin itself was originally written in https://github.com/aspect-build/rules_esbuild.
The version container in this commit is a fork of https://github.com/aspect-build/rules_esbuild/blob/e4e49d3354cbf7087c47ac9c5f2e6fe7f5e398d3/esbuild/private/plugins/bazel-sandbox.js.
I've adapted the JS file to TypeScript and made no further changes.

Author: sbarfurth

packages/angular/build/src/tools/esbuild/application-code-bundle.ts

@@ -34,6 +34,7 @@ import { createSourcemapIgnorelistPlugin } from './sourcemap-ignorelist-plugin';
 import { SERVER_GENERATED_EXTERNALS, getFeatureSupport, isZonelessApp } from './utils';
 import { createVirtualModulePlugin } from './virtual-module-plugin';
 import { createWasmPlugin } from './wasm-plugin';
+import { createBazelSandboxPlugin } from './sandbox-plugin-bazel';
 
 export function createBrowserCodeBundleOptions(
   options: NormalizedApplicationBuildOptions,
@@ -606,6 +607,15 @@ function getEsBuildCommonOptions(options: NormalizedApplicationBuildOptions): Bu
     }
   }
 
+  // Inject the Bazel sandbox plugin only when specifically enabled to be fully backward compatible.
+  // Most users will never need this and as such should not have it influence their builds.
+  if (
+    process.env.ENABLE_BAZEL_SANDBOX_PLUGIN === 'true' ||
+    process.env.ENABLE_BAZEL_SANDBOX_PLUGIN === '1'
+  ) {
+    plugins.push(createBazelSandboxPlugin());
+  }
+
   return {
     absWorkingDir: workspaceRoot,
     format: 'esm',

packages/angular/build/src/tools/esbuild/sandbox-plugin-bazel.ts

@@ -0,0 +1,98 @@
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.dev/license
+ */
+
+/**
+ * Forked from https://github.com/aspect-build/rules_esbuild/blob/e4e49d3354cbf7087c47ac9c5f2e6fe7f5e398d3/esbuild/private/plugins/bazel-sandbox.js
+ */
+
+import { join } from 'node:path';
+import type { Plugin, PluginBuild, ResolveOptions, ResolveResult } from 'esbuild';
+
+// Under Bazel, esbuild will follow symlinks out of the sandbox when the sandbox is enabled. See https://github.com/aspect-build/rules_esbuild/issues/58.
+// This plugin using a separate resolver to detect if the the resolution has left the execroot (which is the root of the sandbox
+// when sandboxing is enabled) and patches the resolution back into the sandbox.
+export function createBazelSandboxPlugin(): Plugin {
+  return {
+    name: 'bazel-sandbox',
+    setup(build) {
+      build.onResolve({ filter: /./ }, async ({ path: importPath, ...otherOptions }) => {
+        // NB: these lines are to prevent infinite recursion when we call `build.resolve`.
+        if (otherOptions.pluginData) {
+          if (otherOptions.pluginData.executedSandboxPlugin) {
+            return;
+          }
+        } else {
+          otherOptions.pluginData = {};
+        }
+        otherOptions.pluginData.executedSandboxPlugin = true;
+
+        const bindir = process.env.BAZEL_BINDIR ?? '';
+        const execroot = process.env.JS_BINARY__EXECROOT ?? '';
+
+        console.log(`DEBUG: [bazel-sandbox] detected bindir ${bindir}`);
+        console.log(`DEBUG: [bazel-sandbox] detected execroot ${execroot}`);
+
+        return await resolveInExecroot({ build, bindir, execroot, importPath, otherOptions });
+      });
+    },
+  };
+}
+
+interface ResolveInExecrootOptions {
+  build: PluginBuild;
+  bindir: string;
+  execroot: string;
+  importPath: string;
+  otherOptions: ResolveOptions;
+}
+
+async function resolveInExecroot({
+  build,
+  bindir,
+  execroot,
+  importPath,
+  otherOptions,
+}: ResolveInExecrootOptions): Promise<ResolveResult> {
+  const result = await build.resolve(importPath, otherOptions);
+
+  if (result.errors && result.errors.length) {
+    // There was an error resolving, just return the error as-is.
+    return result;
+  }
+
+  if (
+    !result.path.startsWith('.') &&
+    !result.path.startsWith('/') &&
+    !result.path.startsWith('\\')
+  ) {
+    // Not a relative or absolute path. Likely a module resolution that is marked "external"
+    return result;
+  }
+
+  // If esbuild attempts to leave the execroot, map the path back into the execroot.
+  if (!result.path.startsWith(execroot)) {
+    // If it tried to leave bazel-bin, error out completely.
+    if (!result.path.includes(bindir)) {
+      throw new Error(
+        `Error: esbuild resolved a path outside of BAZEL_BINDIR (${bindir}): ${result.path}`,
+      );
+    }
+    // Otherwise remap the bindir-relative path
+    const correctedPath = join(execroot, result.path.substring(result.path.indexOf(bindir)));
+    if (!!process.env.JS_BINARY__LOG_DEBUG) {
+      console.error(
+        `DEBUG: [bazel-sandbox] correcting esbuild resolution ${result.path} that left the sandbox to ${correctedPath}.`,
+      );
+    }
+    result.path = correctedPath;
+  }
+
+  console.log(`DEBUG: [bazel-sandbox] import: ${importPath}`);
+  console.log(`DEBUG: [bazel-sandbox] result: ${result.path}`);
+  return result;
+}