fix(ng-dev): properly load typescript configuration files (#3048)

Properly load typescript configuration files by registering tsx to transpile the files at load time

PR Close #3048

Author: josephperrott

.github/local-actions/branch-manager/BUILD.bazel

@@ -31,6 +31,9 @@ esbuild_checked_in(
         ":lib",
     ],
     entry_point = "lib/main.ts",
+    external = [
+        "pnpapi",
+    ],
     format = "esm",
     platform = "node",
     target = "node22",

.github/local-actions/branch-manager/main.js

@@ -34,6 +34,7 @@ NG_DEV_EXTERNALS = [
     # intend to provide interop globals for this as it could hide other significant issues.
     "@yarnpkg/lockfile",
     "@google-cloud/spanner",
+    "tsx",
 ]
 
 ts_project(

ng-dev/BUILD.bazel

@@ -66,6 +66,7 @@
     "semver": "7.7.2",
     "supports-color": "10.2.2",
     "typed-graphqlify": "3.1.6",
+    "tsx": "4.20.5",
     "typescript": "5.9.2",
     "utf-8-validate": "6.0.5",
     "which": "5.0.0",

ng-dev/package.json

@@ -60,8 +60,10 @@ ts_project(
         "//ng-dev:node_modules/@types/yarnpkg__lockfile",
         "//ng-dev:node_modules/@yarnpkg/lockfile",
         "//ng-dev:node_modules/chalk",
+        "//ng-dev:node_modules/fast-glob",
         "//ng-dev:node_modules/semver",
         "//ng-dev:node_modules/supports-color",
+        "//ng-dev:node_modules/tsx",
         "//ng-dev:node_modules/typed-graphqlify",
         "//ng-dev:node_modules/which",
         "//ng-dev:node_modules/yaml",

ng-dev/utils/BUILD.bazel

@@ -6,13 +6,14 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {pathToFileURL} from 'url';
 import {join} from 'path';
-
+import glob from 'fast-glob';
+import {register} from 'tsx/esm/api';
 import {Assertions, MultipleAssertions} from './config-assertions.js';
 import {Log} from './logging.js';
 import {getCachedConfig, setCachedConfig} from './config-cache.js';
 import {determineRepoBaseDirFromCwd} from './repo-directory.js';
+import {pathToFileURL} from 'url';
 
 /**
  * Type describing a ng-dev configuration.
@@ -81,7 +82,7 @@ export interface CaretakerConfig {
  * The filename expected for creating the ng-dev config, without the file
  * extension to allow either a typescript or javascript file to be used.
  */
-const CONFIG_FILE_PATH = '.ng-dev/config.mjs';
+const CONFIG_FILE_PATH_MATCHER = '.ng-dev/config.{mjs,mts}';
 
 /**
  * The filename expected for local user config, without the file extension to allow a typescript,
@@ -118,9 +119,12 @@ export async function getConfig(baseDirOrAssertions?: unknown) {
       baseDir = determineRepoBaseDirFromCwd();
     }
 
+    /** The configuration file discovered based on a glob match. */
+    const [matchedFile] = await glob(CONFIG_FILE_PATH_MATCHER, {cwd: baseDir});
+
     // If the global config is not defined, load it from the file system.
     // The full path to the configuration file.
-    const configPath = join(baseDir, CONFIG_FILE_PATH);
+    const configPath = join(baseDir, matchedFile);
     // Read the configuration and validate it before caching it for the future.
     cachedConfig = await readConfigFile(configPath);
 
@@ -204,6 +208,7 @@ export function assertValidCaretakerConfig<T extends NgDevConfig>(
  * if the configuration file cannot be read.
  */
 async function readConfigFile(configPath: string, returnEmptyObjectOnError = false): Promise<{}> {
+  const unregister = register({tsconfig: false});
   try {
     // ESM imports expect a valid URL. On Windows, the disk name causes errors like:
     // `ERR_UNSUPPORTED_ESM_URL_SCHEME: <..> Received protocol 'c:'`
@@ -219,5 +224,7 @@ async function readConfigFile(configPath: string, returnEmptyObjectOnError = fal
     Log.error(`Could not read configuration file at ${configPath}.`);
     Log.error(e);
     process.exit(1);
+  } finally {
+    unregister();
   }
 }

ng-dev/utils/config.ts

@@ -17,9 +17,6 @@ bazelCommand=${BAZEL:-"pnpm bazel"}
   ${bazelCommand} build ng-dev:npm_package
 )
 
-export TS_NODE_TRANSPILE_ONLY=1
-export TS_NODE_PROJECT=${PWD}/.ng-dev/tsconfig.json
-
 # Execute the built ng-dev command in the current working directory
 # and pass-through arguments unmodified.
-${devInfraProjectDir}/node_modules/.bin/tsx ${ngDevBinFile} ${@}
+${ngDevBinFile} ${@}