fix(@angular-devkit/build-angular): watch all bundler provided inputs…

… with esbuild builder

When using the esbuild-based browser application builder in watch mode (including `ng serve`),
all input files provided by the bundler via the internal metafile information will now be
watched and will trigger rebuilds if changed. This allows for files outside of the TypeScript
compilation that are also outside of the project source root to be watched. This situation
can be encountered in monorepo setups where library code is directly referenced within an application.

(cherry picked from commit e827c69)

packages/angular_devkit/build_angular/src/tools/esbuild/angular/aot-compilation.ts

@@ -103,7 +103,10 @@ export class AotCompilation extends AngularCompilation {
     const referencedFiles = typeScriptProgram
       .getSourceFiles()
       .filter((sourceFile) => !angularCompiler.ignoreForEmit.has(sourceFile))
-      .map((sourceFile) => sourceFile.fileName);
+      .flatMap((sourceFile) => [
+        sourceFile.fileName,
+        ...angularCompiler.getResourceDependencies(sourceFile),
+      ]);
 
     return { affectedFiles, compilerOptions, referencedFiles };
   }

packages/angular_devkit/build_angular/src/tools/esbuild/bundler-context.ts

@@ -16,7 +16,7 @@ import {
   build,
   context,
 } from 'esbuild';
-import { basename, extname, relative } from 'node:path';
+import { basename, extname, join, relative } from 'node:path';
 
 export type BundleContextResult =
   | { errors: Message[]; warnings: Message[] }
@@ -48,6 +48,8 @@ export class BundlerContext {
   #esbuildContext?: BuildContext<{ metafile: true; write: false }>;
   #esbuildOptions: BuildOptions & { metafile: true; write: false };
 
+  readonly watchFiles = new Set<string>();
+
   constructor(
     private workspaceRoot: string,
     private incremental: boolean,
@@ -138,6 +140,17 @@ export class BundlerContext {
       }
     }
 
+    // Update files that should be watched.
+    // While this should technically not be linked to incremental mode, incremental is only
+    // currently enabled with watch mode where watch files are needed.
+    if (this.incremental) {
+      this.watchFiles.clear();
+      // Add input files except virtual angular files which do not exist on disk
+      Object.keys(result.metafile.inputs)
+        .filter((input) => !input.startsWith('angular:'))
+        .forEach((input) => this.watchFiles.add(join(this.workspaceRoot, input)));
+    }
+
     // Return if the build encountered any errors
     if (result.errors.length) {
       return {

packages/angular_devkit/build_angular/src/tools/esbuild/bundler-execution-result.ts

@@ -49,7 +49,12 @@ export class ExecutionResult {
   }
 
   get watchFiles() {
-    return this.codeBundleCache?.referencedFiles ?? [];
+    const files = this.rebuildContexts.flatMap((context) => [...context.watchFiles]);
+    if (this.codeBundleCache?.referencedFiles) {
+      files.push(...this.codeBundleCache.referencedFiles);
+    }
+
+    return files;
   }
 
   createRebuildState(fileChanges: ChangedFiles): RebuildState {

packages/angular_devkit/build_angular/src/tools/esbuild/watcher.ts

@@ -36,7 +36,9 @@ export function createWatcher(options?: {
   ignored?: string[];
 }): BuildWatcher {
   const watcher = new FSWatcher({
-    ...options,
+    usePolling: options?.polling,
+    interval: options?.interval,
+    ignored: options?.ignored,
     disableGlobbing: true,
     ignoreInitial: true,
   });