add blocker

Author: filipesilva

packages/@angular/cli/plugins/karma.ts

@@ -10,6 +10,9 @@ import { KarmaWebpackThrowError } from './karma-webpack-throw-error';
 
 const getAppFromConfig = require('../utilities/app-utils').getAppFromConfig;
 
+let blocked: any[] = [];
+let isBlocked = false;
+
 function isDirectory(path: string) {
   try {
     return fs.statSync(path).isDirectory();
@@ -91,16 +94,7 @@ const init: any = (config: any, emitter: any, customFileHandlers: any) => {
   const webpackMiddlewareConfig = {
     noInfo: true, // Hide webpack output because its noisy.
     watchOptions: { poll: testConfig.poll },
-    publicPath: '/_karma_webpack_/',
-    stats: { // Also prevent chunk and module display output, cleaner look. Only emit errors.
-      assets: false,
-      colors: true,
-      version: false,
-      hash: false,
-      timings: false,
-      chunks: false,
-      chunkModules: false
-    },
+    publicPath: '/_karma_webpack_/'
   };
 
   // If Karma is being ran in single run mode, throw errors.
@@ -129,6 +123,9 @@ const init: any = (config: any, emitter: any, customFileHandlers: any) => {
   });
 
 
+  // Add the blocker.
+  config.beforeMiddleware = config.beforeMiddleware || [];
+  config.beforeMiddleware.push('angularCliBlocker');
 
   // code from karma-webpack
 
@@ -148,7 +145,22 @@ const init: any = (config: any, emitter: any, customFileHandlers: any) => {
     throw e;
   }
 
-  compiler.plugin('done', () => emitter.refreshFiles());
+  ['invalid', 'watch-run', 'run'].forEach(function (name) {
+    compiler.plugin(name, function (_: any, callback: () => void) {
+      isBlocked = true;
+
+      if (typeof callback === 'function') {
+        callback();
+      }
+    });
+  });
+
+  compiler.plugin('done', () => {
+    emitter.refreshFiles();
+    isBlocked = false;
+    blocked.forEach((cb) => cb());
+    blocked = [];
+  });
 
   const middleware = new webpackDevMiddleware(compiler, webpackMiddlewareConfig);
 
@@ -174,9 +186,21 @@ init.$inject = ['config', 'emitter', 'customFileHandlers'];
 const preprocessor: any = () => (content: any, _file: string, done: any) => done(null, content);
 preprocessor.$inject = [];
 
+// Block requests until the Webpack compilation is done.
+function requestBlocker() {
+  return function (_request: any, _response: any, next: () => void) {
+    if (isBlocked) {
+      blocked.push(next);
+    } else {
+      next();
+    }
+  };
+}
+
 // Also export karma-webpack and karma-sourcemap-loader.
 module.exports = Object.assign({
   'framework:@angular/cli': ['factory', init],
-  'preprocessor:@angular/cli': ['factory', preprocessor]
+  'preprocessor:@angular/cli': ['factory', preprocessor],
+  'middleware:angularCliBlocker': ['factory', requestBlocker]
   // }, require('./karma-webpack-custom'), require('karma-sourcemap-loader'));
 });