compile in karma plugin

Author: filipesilva

package.json

@@ -40,6 +40,7 @@
   },
   "homepage": "https://github.com/angular/angular-cli",
   "dependencies": {
+    "@types/webpack-dev-middleware": "^1.9.1",
     "async": "^2.3.0",
     "autoprefixer": "^6.5.3",
     "chalk": "^1.1.3",

packages/@angular/cli/models/webpack-configs/test.ts

@@ -91,7 +91,7 @@ export function getTestConfig(testConfig: WebpackTestOptions) {
       rules: [].concat(extraRules)
     },
     plugins: [
-      new webpackBuildLogger({ logEnabled: true }),
+      // new webpackBuildLogger({ logEnabled: true }),
       // new (<any>FileListPlugin)(),
       new KarmaWebpackEmitlessError()
     ].concat(extraPlugins)

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

@@ -1,6 +1,8 @@
 import * as path from 'path';
 import * as fs from 'fs';
 import * as glob from 'glob';
+import * as webpack from 'webpack';
+const webpackDevMiddleware = require('webpack-dev-middleware');
 
 import { Pattern } from './glob-copy-webpack-plugin';
 import { WebpackTestConfig, WebpackTestOptions } from '../models/webpack-test-config';
@@ -39,7 +41,7 @@ function addKarmaFiles(files: any[], newFiles: any[], prepend = false) {
   }
 }
 
-const init: any = (config: any) => {
+const init: any = (config: any, emitter: any, customFileHandlers: any) => {
   const appConfig = getAppFromConfig(config.angularCli.app);
   const appRoot = path.join(config.basePath, appConfig.root);
   const testConfig: WebpackTestOptions = Object.assign({
@@ -88,6 +90,8 @@ const init: any = (config: any) => {
   const webpackConfig = new WebpackTestConfig(testConfig, appConfig).buildConfig();
   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,
@@ -97,9 +101,6 @@ const init: any = (config: any) => {
       chunks: false,
       chunkModules: false
     },
-    watchOptions: {
-      poll: testConfig.poll
-    }
   };
 
   // If Karma is being ran in single run mode, throw errors.
@@ -120,15 +121,54 @@ const init: any = (config: any) => {
   config.customDebugFile = `${__dirname}/karma-debug.html`;
 
   config.files.forEach((file: any) => {
-    if (file.pattern === `./${appConfig.root}/${appConfig.test}`){
+    if (file.pattern === `./${appConfig.root}/${appConfig.test}`) {
       file.watched = false;
       file.served = false;
       file.included = false;
     }
   });
+
+
+
+  // code from karma-webpack
+
+  // The webpack tier owns the watch behavior so we want to force it in the config
+  webpackConfig.watch = true;
+  webpackConfig.output.path = '/_karma_webpack_/';
+  webpackConfig.output.publicPath = '/_karma_webpack_/';
+
+  let compiler: any;
+  try {
+    compiler = webpack(webpackConfig);
+  } catch (e) {
+    console.error(e.stack || e);
+    if (e.details) {
+      console.error(e.details);
+    }
+    throw e;
+  }
+
+  compiler.plugin('done', () => emitter.refreshFiles());
+
+  const middleware = new webpackDevMiddleware(compiler, webpackMiddlewareConfig);
+
+  customFileHandlers.push({
+    urlRegex: /^\/_karma_webpack_\/.*/,
+    handler: function handler(req: any, res: any) {
+      middleware(req, res, function () {
+        res.statusCode = 404;
+        res.end('Not found');
+      });
+    }
+  });
+
+  emitter.on('exit', (done: any) => {
+    middleware.close();
+    done();
+  });
 };
 
-init.$inject = ['config'];
+init.$inject = ['config', 'emitter', 'customFileHandlers'];
 
 // Dummy preprocessor, just to keep karma from showing a warning.
 const preprocessor: any = () => (content: any, _file: string, done: any) => done(null, content);
@@ -138,4 +178,5 @@ preprocessor.$inject = [];
 module.exports = Object.assign({
   'framework:@angular/cli': ['factory', init],
   'preprocessor:@angular/cli': ['factory', preprocessor]
-}, require('./karma-webpack-custom'), require('karma-sourcemap-loader'));
+  // }, require('./karma-webpack-custom'), require('karma-sourcemap-loader'));
+});