fix(@angular-devkit/build-angular): only show changed output files in watch mode with esbuild

Similar to how the Webpack-based `browser` builder only shows the output files that have changed
during watch mode (including `ng serve`), the esbuild-based builders will now also only show changed
files. For large applications, this can greatly reduce the amount of text shown in the console when
actively developing in watch mode.

(cherry picked from commit 5a25398)

Author: clydin

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

@@ -256,7 +256,16 @@ export async function executeBuild(
   }
 
   printWarningsAndErrorsToConsole(context, warnings, errors);
-  logBuildStats(context, metafile, initialFiles, budgetFailures, estimatedTransferSizes);
+  const changedFiles =
+    rebuildState && executionResult.findChangedFiles(rebuildState.previousOutputHashes);
+  logBuildStats(
+    context,
+    metafile,
+    initialFiles,
+    budgetFailures,
+    changedFiles,
+    estimatedTransferSizes,
+  );
 
   // Write metafile if stats option is enabled
   if (options.stats) {

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

@@ -21,6 +21,7 @@ export interface RebuildState {
   rebuildContexts: BundlerContext[];
   codeBundleCache?: SourceFileCache;
   fileChanges: ChangedFiles;
+  previousOutputHashes: Map<string, string>;
 }
 
 /**
@@ -91,9 +92,22 @@ export class ExecutionResult {
       rebuildContexts: this.rebuildContexts,
       codeBundleCache: this.codeBundleCache,
       fileChanges,
+      previousOutputHashes: new Map(this.outputFiles.map((file) => [file.path, file.hash])),
     };
   }
 
+  findChangedFiles(previousOutputHashes: Map<string, string>): Set<string> {
+    const changed = new Set<string>();
+    for (const file of this.outputFiles) {
+      const previousHash = previousOutputHashes.get(file.path);
+      if (previousHash === undefined || previousHash !== file.hash) {
+        changed.add(file.path);
+      }
+    }
+
+    return changed;
+  }
+
   async dispose(): Promise<void> {
     await Promise.allSettled(this.rebuildContexts.map((context) => context.dispose()));
   }

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

@@ -28,9 +28,11 @@ export function logBuildStats(
   metafile: Metafile,
   initial: Map<string, InitialFileRecord>,
   budgetFailures: BudgetCalculatorResult[] | undefined,
+  changedFiles?: Set<string>,
   estimatedTransferSizes?: Map<string, number>,
 ): void {
   const stats: BundleStats[] = [];
+  let unchangedCount = 0;
   for (const [file, output] of Object.entries(metafile.outputs)) {
     // Only display JavaScript and CSS files
     if (!file.endsWith('.js') && !file.endsWith('.css')) {
@@ -42,6 +44,12 @@ export function logBuildStats(
       continue;
     }
 
+    // Show only changed files if a changed list is provided
+    if (changedFiles && !changedFiles.has(file)) {
+      ++unchangedCount;
+      continue;
+    }
+
     let name = initial.get(file)?.name;
     if (name === undefined && output.entryPoint) {
       name = path
@@ -56,15 +64,22 @@ export function logBuildStats(
     });
   }
 
-  const tableText = generateBuildStatsTable(
-    stats,
-    true,
-    true,
-    !!estimatedTransferSizes,
-    budgetFailures,
-  );
+  if (stats.length > 0) {
+    const tableText = generateBuildStatsTable(
+      stats,
+      true,
+      unchangedCount === 0,
+      !!estimatedTransferSizes,
+      budgetFailures,
+    );
 
-  context.logger.info('\n' + tableText + '\n');
+    context.logger.info('\n' + tableText + '\n');
+  } else if (changedFiles !== undefined) {
+    context.logger.info('\nNo output file changes.\n');
+  }
+  if (unchangedCount > 0) {
+    context.logger.info(`Unchanged output files: ${unchangedCount}`);
+  }
 }
 
 export async function calculateEstimatedTransferSizes(