fix(@angular-devkit/build-angular): only watch used files with applic…

…ation builder

When using the application builder in watch mode (including `ng serve`), the file watching
will now only watch files used or relevant to the used files. Previously, all files within
the project root were watched. This previous behavior could result in unneeded rebuilds when
unrelated files were changed. An environment variable named `NG_BUILD_WATCH_ROOT` is also
now available to enable the previous behavior in cases where it is still preferred as well
as for testing and debugging purposes.

packages/angular_devkit/build_angular/src/builders/application/build-action.ts

@@ -14,6 +14,7 @@ import { BuildOutputFile } from '../../tools/esbuild/bundler-context';
 import { ExecutionResult, RebuildState } from '../../tools/esbuild/bundler-execution-result';
 import { shutdownSassWorkerPool } from '../../tools/esbuild/stylesheets/sass-language';
 import { withNoProgress, withSpinner, writeResultFiles } from '../../tools/esbuild/utils';
+import { shouldWatchRoot } from '../../utils/environment-options';
 import { assertIsError } from '../../utils/error';
 import { NormalizedCachedOptions } from '../../utils/normalize-cache';
 
@@ -112,8 +113,10 @@ export async function* runEsBuildBuildAction(
     // Setup abort support
     options.signal?.addEventListener('abort', () => void watcher?.close());
 
-    // Temporarily watch the entire project
-    watcher.add(projectRoot);
+    // Watch the entire project root if 'NG_BUILD_WATCH_ROOT' environment variable is set
+    if (shouldWatchRoot) {
+      watcher.add(projectRoot);
+    }
 
     // Watch workspace for package manager changes
     const packageWatchFiles = [

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

@@ -81,6 +81,9 @@ export class ExecutionResult {
     if (this.codeBundleCache?.referencedFiles) {
       files.push(...this.codeBundleCache.referencedFiles);
     }
+    if (this.codeBundleCache?.loadResultCache) {
+      files.push(...this.codeBundleCache.loadResultCache.watchFiles);
+    }
 
     return files;
   }

packages/angular_devkit/build_angular/src/utils/environment-options.ts

@@ -99,3 +99,6 @@ export const useLegacySass: boolean = (() => {
 
 const debugPerfVariable = process.env['NG_BUILD_DEBUG_PERF'];
 export const debugPerformance = isPresent(debugPerfVariable) && isEnabled(debugPerfVariable);
+
+const watchRootVariable = process.env['NG_BUILD_WATCH_ROOT'];
+export const shouldWatchRoot = isPresent(watchRootVariable) && isEnabled(watchRootVariable);