fix(@angular-devkit/build-angular): block Karma from starting until build is complete

This change is inspired by karma-runner/karma-chrome-launcher#154 (comment) which blocks Karma from launching the browsers until the compilation is complete.

This is needed especially for large applications when using code-coverage where otherwise the users would have to fine-tune several Karma timeouts such as  `captureTimeout` for various environments.

Closes #22495

Author: alan-agius4

packages/angular_devkit/build_angular/src/webpack/plugins/karma/karma.ts

@@ -169,29 +169,42 @@ const init: any = (config: any, emitter: any) => {
   compiler.hooks.watchRun.tapAsync('karma', (_: any, callback: () => void) => handler(callback));
   compiler.hooks.run.tapAsync('karma', (_: any, callback: () => void) => handler(callback));
 
+  webpackMiddleware = webpackDevMiddleware(compiler, webpackMiddlewareConfig);
+  emitter.on('exit', (done: any) => {
+    webpackMiddleware.close();
+    done();
+  });
+
   function unblock() {
     isBlocked = false;
     blocked.forEach((cb) => cb());
     blocked = [];
   }
 
   let lastCompilationHash: string | undefined;
-  compiler.hooks.done.tap('karma', (stats) => {
-    if (stats.hasErrors()) {
-      lastCompilationHash = undefined;
-    } else if (stats.hash != lastCompilationHash) {
-      // Refresh karma only when there are no webpack errors, and if the compilation changed.
-      lastCompilationHash = stats.hash;
-      emitter.refreshFiles();
-    }
-    unblock();
-  });
+  let isFirstRun = true;
+
+  return new Promise<void>((resolve) => {
+    compiler.hooks.done.tap('karma', (stats) => {
+      if (isFirstRun) {
+        // This is needed to block Karma from launching browsers before Webpack writes the assets in memory.
+        // See the below:
+        // https://github.com/karma-runner/karma-chrome-launcher/issues/154#issuecomment-986661937
+        // https://github.com/angular/angular-cli/issues/22495
+        isFirstRun = false;
+        resolve();
+      }
 
-  webpackMiddleware = webpackDevMiddleware(compiler, webpackMiddlewareConfig);
+      if (stats.hasErrors()) {
+        lastCompilationHash = undefined;
+      } else if (stats.hash != lastCompilationHash) {
+        // Refresh karma only when there are no webpack errors, and if the compilation changed.
+        lastCompilationHash = stats.hash;
+        emitter.refreshFiles();
+      }
 
-  emitter.on('exit', (done: any) => {
-    webpackMiddleware.close();
-    done();
+      unblock();
+    });
   });
 };