title: Getting unit test coverage working with Angular 4, Webpack 2, Karma, and Jasmine
body: <p>I have an app that uses Webpack, Angular 4 and ES6 modules. The app works as expected.</p>
  
  <p>I also have unit tests setup using Karma and Jasmine. As part of the test setup I have a test-main.js which is as follows:</p>
  
  <pre><code>Error.stackTraceLimit = Infinity;
  
  import 'core-js/es6';
  import 'core-js/es7/reflect';
  import 'reflect-metadata';
  import 'zone.js';
  import 'zone.js/dist/long-stack-trace-zone';
  import 'zone.js/dist/sync-test';
  import 'zone.js/dist/proxy';
  import 'zone.js/dist/jasmine-patch';
  import 'zone.js/dist/async-test';
  import 'zone.js/dist/fake-async-test';
  
  import {TestBed} from '@angular/core/testing';
  import {BrowserDynamicTestingModule, platformBrowserDynamicTesting} from '@angular/platform-browser-dynamic/testing';
  
  let appContext = require.context('./', true, /\.spec\.js/);
  
  appContext.keys().forEach(appContext);
  
  TestBed.initTestEnvironment(BrowserDynamicTestingModule, platformBrowserDynamicTesting());
  </code></pre>
  
  <p>The unit tests run as expected.</p>
  
  <p>I am trying to setup a coverage report, but the best I have been able to achieve is a coverage report where the entire Webpack-generated bundle is instrumented and reported in the coverage report. This is not entirely useful, as you can imagine.</p>
  
  <p>I've tried using the <a href="https://github.com/istanbuljs/babel-plugin-istanbul" rel="nofollow noreferrer">babel-plugin-istanbul</a> and also the <a href="https://github.com/webpack-contrib/istanbul-instrumenter-loader" rel="nofollow noreferrer">istanbul-instrumenter-loader</a> and I either get my entire bundle file in the coverage report, or no report at all. I don't see any errors, and my tests continue to run as expected.</p>
  
  <p>Here is my karma.conf.js file (with everything to do with coverage removed as it was not working):</p>
  
  <pre><code>// Karma configuration
  // Generated on Thu May 04 2017 13:00:28 GMT+0100 (GMT Daylight Time)
  'use strict';
  
  const webpack = require('webpack');
  const path = require('path');
  
  let reporters = ['progress'],
      singleRunSwitch = true,
      browsers = ['ChromeHeadless'];
  
  function isDebug(argument) {
      return argument === 'debug';
  }
  
  if (process.argv.some(isDebug)) {        
      reporters = ['progress'];
      singleRunSwitch = false;
      browsers = ['Chrome'];
  }
  
  module.exports = function(config) {
      config.set({
          basePath: '',
          frameworks: ['jasmine'],
          files: [
              { pattern: './test-main.js' }
          ],
          exclude: [],
          preprocessors: {
              './test-main.js': ['webpack', 'sourcemap']
          },
          reporters: reporters,
          port: 9876,
          colors: true,
          logLevel: config.LOG_INFO,
          autoWatch: false,
          browsers: browsers,
  
          customLaunchers: {
              ChromeHeadless: {
                  base: 'Chrome',
                  flags: [
                    '--headless',
                    ' --remote-debugging-port=9222',
                    '--disable-gpu',
                    '--disable-plugins',
                    '--window-size=0,0',
                    '--window-position=-9999,0'
                  ],
              },
          },
          singleRun: singleRunSwitch,
          concurrency: Infinity,
  
          webpack: {
              module: {
                  rules: [{
                      test: /\.js$/,
                      exclude: path.join(__dirname, '../node_modules/'),
                      use: [{
                          loader: 'babel-loader',
                          options: {
                              presets: ['es2015']
                          }
                      }]
                  }]
              },
              devtool: 'inline-source-map',
              plugins: [
                  new webpack.ContextReplacementPlugin(/angular(\\|\/)core(\\|\/)@angular/, path.join(__dirname))
              ]
          },
  
          webpackMiddleware: {
              stats: 'errors-only'
          },
  
          webpackServer: {
              noInfo: true
          }
  
      });
  }
  </code></pre>
  
  <p>Can anyone advise which plugins I need to use and how I should configure them please?</p>