fix(bazel): ngc-wrapped should not rely on linker for external workspaces (#43690)

Currently when `ngc-wrapped` runs in external/consumer workspaces, like
in the Angular Components project, the `ngc-wrapped` binary relies on
the linker due to the patched module resolution in `rules_nodejs` no
longer being default. The reliance on the linker of `rules_nodejs` is
problematic for workers as the required `node_modules` are not
re-linked for every build. This was previously not an issue before the
APF v13 changes because the `compiler-cli` module was loaded only once
through an import statement.

As of APF v13, the compiler-cli module is loaded dynamically for every
build. This dynamic import can then break as the worker does not
initially load the compiler-cli module when becoming online. Instead,
the module is loaded on the first build where the node modules might not
be linked properly anymore (due to e.g. other targets running at the same time).

We fix thi issue by doing the following things:

1. Enabling the patched module resolution for consumer/external
   workspaces. This would match how we use ngc-wrapped inside FW as
   well.

2. Caching the compiler CLI module. Instead of re-fetching the module
   through dynamic imports for every build (in a worker), we should use
   the cached version. This is semantically the same as with APF v12
   where a single import statement at file top-level was used.
   Technically, NodeJS should cache the module, but it doesn't hurt
   directly caching it as the module resolution will be patched by
   `rules_nodejs` and could perform unnecessary tasks.

PR Close #43690

packages/bazel/package.json

@@ -17,7 +17,8 @@
   "bazelBin": {
     "ngc-wrapped": {
       "additionalAttributes": {
-        "configuration_env_vars": "[\"angular_ivy_enabled\"]"
+        "configuration_env_vars": "[\"angular_ivy_enabled\"]",
+        "templated_args": "[\"--bazel_patch_module_resolver\"]"
       }
     }
   },

packages/bazel/src/ngc-wrapped/index.ts

@@ -17,6 +17,13 @@ import {pathToFileURL} from 'url';
 type CompilerCliModule =
     typeof import('@angular/compiler-cli')&typeof import('@angular/compiler-cli/private/bazel');
 
+/**
+ * Reference to the previously loaded `compiler-cli` module exports. We cache the exports
+ * as `ngc-wrapped` can run as part of a worker where the Angular compiler should not be
+ * resolved through a dynamic import for every build.
+ */
+let _cachedCompilerCliModule: CompilerCliModule|null = null;
+
 const EXT = /(\.ts|\.d\.ts|\.js|\.jsx|\.tsx)$/;
 const NGC_GEN_FILES = /^(.*?)\.(ngfactory|ngsummary|ngstyle|shim\.ngstyle)(.*)$/;
 // FIXME: we should be able to add the assets to the tsconfig so FileLoader
@@ -58,11 +65,14 @@ async function loadModuleInterop<T>(moduleName: string): Promise<T> {
   return exports.default ?? exports as T;
 }
 
-export async function runOneBuild(
-    args: string[], inputs?: {[path: string]: string}): Promise<boolean> {
-  if (args[0] === '-p') args.shift();
-  // Strip leading at-signs, used to indicate a params file
-  const project = args[0].replace(/^@+/, '');
+/**
+ * Fetches the Angular compiler CLI module dynamically, allowing for an ESM
+ * variant of the compiler.
+ */
+async function fetchCompilerCliModule(): Promise<CompilerCliModule> {
+  if (_cachedCompilerCliModule !== null) {
+    return _cachedCompilerCliModule;
+  }
 
   // Note: We load the compiler-cli package dynamically using `loadModuleInterop` as
   // this script runs as CommonJS module but the compiler-cli could be built as strict ESM
@@ -75,7 +85,18 @@ export async function runOneBuild(
   const compilerPrivateExports =
       await loadModuleInterop<typeof import('@angular/compiler-cli/private/bazel')>(
           '@angular/compiler-cli/private/bazel');
-  const ng = {...compilerExports, ...compilerPrivateExports};
+  return _cachedCompilerCliModule = {...compilerExports, ...compilerPrivateExports};
+}
+
+export async function runOneBuild(
+    args: string[], inputs?: {[path: string]: string}): Promise<boolean> {
+  if (args[0] === '-p') {
+    args.shift();
+  }
+
+  // Strip leading at-signs, used to indicate a params file
+  const project = args[0].replace(/^@+/, '');
+  const ng = await fetchCompilerCliModule();
 
   const [parsedOptions, errors] = parseTsconfig(project);
   if (errors?.length) {