fix(@angular-devkit/build-angular): wait during file watching to impr…

…ove multi-save rebuilds for esbuild builder

When using the experimental esbuild-based browser application builder in watch mode, the file watcher will now
wait 250ms from a reported file event before triggering a rebuild. The change allows the rebuild to better
capture groups of file changes. This can happen when using an IDE while editing multiple files and would otherwise
result in multiple rebuilds where a single rebuild would be ideal.

(cherry picked from commit 7c2b846)

packages/angular_devkit/build_angular/src/builders/browser-esbuild/watcher.ts

@@ -43,6 +43,7 @@ export function createWatcher(options?: {
 
   const nextQueue: ((value?: ChangedFiles) => void)[] = [];
   let currentChanges: ChangedFiles | undefined;
+  let nextWaitTimeout: NodeJS.Timeout | undefined;
 
   watcher.on('all', (event, path) => {
     switch (event) {
@@ -62,11 +63,18 @@ export function createWatcher(options?: {
         return;
     }
 
-    const next = nextQueue.shift();
-    if (next) {
-      const value = currentChanges;
-      currentChanges = undefined;
-      next(value);
+    // Wait 250ms from next change to better capture groups of file save operations.
+    if (!nextWaitTimeout) {
+      nextWaitTimeout = setTimeout(() => {
+        nextWaitTimeout = undefined;
+        const next = nextQueue.shift();
+        if (next) {
+          const value = currentChanges;
+          currentChanges = undefined;
+          next(value);
+        }
+      }, 250);
+      nextWaitTimeout?.unref();
     }
   });
 
@@ -99,6 +107,9 @@ export function createWatcher(options?: {
     async close() {
       try {
         await watcher.close();
+        if (nextWaitTimeout) {
+          clearTimeout(nextWaitTimeout);
+        }
       } finally {
         let next;
         while ((next = nextQueue.shift()) !== undefined) {