title: "Uncaught Error: Zone already loaded." during karma test
body: <p>All I want is to be able to load my typescript files into the browser's debugger when I run unit tests with Karma. If I remove karma-typescript, the tests run, but I can only debug with the transpiled javascript. With karma-typescript, I get the above error. What do I need to do to debug my typescript files while using karma?</p>
  
  <p>Here is my karma conf that is used for tests.</p>
  
  <pre><code>const conf = require('./gulp.conf');
  
  module.exports = function (config) {
  const configuration = {
  basePath: '../',
  singleRun: false,
  autoWatch: true,
  logLevel: 'INFO',
  junitReporter: {
    outputDir: 'test-reports'
  },
  browsers: [
    'Chrome'
  ],
  frameworks: [
    'jasmine',
    'karma-typescript'
  ],
  files: [
    { pattern: "src/**/*.ts" },
    conf.path.src('index.spec.js')
  ],
  preprocessors: {
    [conf.path.src('index.spec.js')]: [
      'webpack'
    ],
    "**/*.ts": ['karma-typescript']
  },
  reporters: ['progress', 'coverage', 'karma-typescript'],
  coverageReporter: {
    type: 'html',
    dir: 'coverage/'
  },
  webpack: require('./webpack-test.conf'),
  webpackMiddleware: {
    noInfo: true
  },
  plugins: [
    require('karma-jasmine'),
    require('karma-junit-reporter'),
    require('karma-coverage'),
    require('karma-chrome-launcher'),
    require('karma-webpack'),
    require('karma-typescript')
  ]
  };
  
    config.set(configuration);
  };
  </code></pre>
  
  <p>Here is my webpack conf that is used for tests.</p>
  
  <pre><code>const webpack = require('webpack');
  const conf = require('./gulp.conf');
  module.exports = {
    module: {
      loaders: [
        {
          test: /.json$/,
          loaders: [
            'json-loader'
          ]
        },
        {
          test: /.ts$/,
          exclude: /node_modules/,
          loader: 'tslint-loader',
          enforce: 'pre'
        },
        {
          test: /\.ts$/,
          exclude: /node_modules/,
          loaders: [
            'ts-loader'
          ]
        },
        {
          test: /.html$/,
          loaders: [
            'html-loader'
          ]
        }
      ]
    },
    plugins: [
      new webpack.ContextReplacementPlugin(
        /angular(\\|\/)core(\\|\/)(esm(\\|\/)src|src)(\\|\/)linker/,
        conf.paths.src
      ),
      new webpack.LoaderOptionsPlugin({
        options: {
          resolve: {},
          ts: {
            configFileName: 'tsconfig.json'
          },
          tslint: {
            configuration: require('../tslint.json')
          }
        },
        debug: true
      }),
      new webpack.SourceMapDevToolPlugin({
        filename: null,
        test: /\.(ts|js)($|\?)/i
      })
    ],
    devtool: 'source-map',
    resolve: {
      extensions: [
        '.webpack.js',
        '.web.js',
        '.js',
        '.ts'
      ]
    }
  };
  </code></pre>
  
  <p>Here is my webpack conf that is used for running the app.</p>
  
  <pre><code>const webpack = require('webpack');
  const conf = require('./gulp.conf');
  const path = require('path');
  
  const HtmlWebpackPlugin = require('html-webpack-plugin');
  const FailPlugin = require('webpack-fail-plugin');
  const autoprefixer = require('autoprefixer');
  const fileLoader = require('file-loader');
  
  module.exports = {
    module: {
      loaders: [
        {
          test: /.json$/,
          loaders: [
            'json-loader'
          ]
        },
        {
          test: /.ts$/,
          exclude: /node_modules/,
          loader: 'tslint-loader',
          enforce: 'pre'
        },
        {
          test: /\.(css|scss)$/,
          loaders: [
            'style-loader',
            'css-loader',
            'sass-loader',
            'postcss-loader'
          ]
        },
        {
          test: /\.ts$/,
          exclude: /node_modules/,
          loaders: [
            'ts-loader'
          ]
        },
        {
          test: /.html$/,
          loaders: [
            'html-loader'
          ]
        },
        {
          test: /\.(jpe?g|png|gif|svg)$/i,
          loader: "file-loader?name=/public/images/[name].[ext]"
  
        }
      ]
    },
    plugins: [
      new webpack.optimize.OccurrenceOrderPlugin(),
      new webpack.NoErrorsPlugin(),
      FailPlugin,
      new HtmlWebpackPlugin({
        template: conf.path.src('index.html')
      }),
      new webpack.ContextReplacementPlugin(
        /angular(\\|\/)core(\\|\/)(esm(\\|\/)src|src)(\\|\/)linker/,
        conf.paths.src
      ),
      new webpack.LoaderOptionsPlugin({
        options: {
          postcss: () =&gt; [autoprefixer],
          resolve: {},
          ts: {
            configFileName: 'tsconfig.json'
          },
          tslint: {
            configuration: require('../tslint.json')
          }
        },
        debug: true
      })
    ],
    devtool: 'source-map',
    output: {
      path: path.join(process.cwd(), conf.paths.tmp),
      filename: 'index.js'
    },
    resolve: {
      extensions: [
        '.webpack.js',
        '.web.js',
        '.js',
        '.ts'
      ]
    },
    entry: `./${conf.path.src('index')}`
  };
  </code></pre>
  
  <p>Please let me know what other info or code you would like.</p>