From a406e5d4e2abba4f48440ffbc0306fb7386f9121 Mon Sep 17 00:00:00 2001
From: Charles Lyding <19598772+clydin@users.noreply.github.com>
Date: Mon, 30 Oct 2023 21:18:01 -0400
Subject: [PATCH] fix(@angular-devkit/build-angular): only watch used files
 with application 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.
---
 .../build_angular/src/builders/application/build-action.ts | 7 +++++--
 .../src/tools/esbuild/bundler-execution-result.ts          | 3 +++
 .../build_angular/src/utils/environment-options.ts         | 3 +++
 3 files changed, 11 insertions(+), 2 deletions(-)

diff --git a/packages/angular_devkit/build_angular/src/builders/application/build-action.ts b/packages/angular_devkit/build_angular/src/builders/application/build-action.ts
index 11e05deff19a..8c29e511ebec 100644
--- a/packages/angular_devkit/build_angular/src/builders/application/build-action.ts
+++ b/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 = [
diff --git a/packages/angular_devkit/build_angular/src/tools/esbuild/bundler-execution-result.ts b/packages/angular_devkit/build_angular/src/tools/esbuild/bundler-execution-result.ts
index 53842e98ac97..e7707b162312 100644
--- a/packages/angular_devkit/build_angular/src/tools/esbuild/bundler-execution-result.ts
+++ b/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;
   }
diff --git a/packages/angular_devkit/build_angular/src/utils/environment-options.ts b/packages/angular_devkit/build_angular/src/utils/environment-options.ts
index 548b3a617cfa..9db966c6171f 100644
--- a/packages/angular_devkit/build_angular/src/utils/environment-options.ts
+++ b/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);