angular 4无法运行业力测试：意外令牌

Question

我正在使用karma + jasmine设置角度4单位测试。我经历了一些教程，看起来相对简单。

但是当我尝试运行测试时，我遇到了这个例外：

   ./app/main.spec.ts中的错误模块解析失败：   Path_to_folder \ app \ main.spec.ts意外的令牌（13：8）
  您可能需要适当的加载程序来处理此文件类型。

karma.config文件：

var webpackConfig = require("./app/webpack.config.js");

module.exports = function (config) {
  config.set({
    basePath: '',
    frameworks: ['jasmine'],
    files: [
      { pattern: 'app/main.spec.ts', watched: false }
    ],
    preprocessors: {
      'app/main.spec.ts': ['webpack', 'sourcemap']
    },
    client:{
      clearContext: false // leave Jasmine Spec Runner output visible in browser
    },
    coverageIstanbulReporter: {
      reports: [ 'html', 'lcovonly' ],
      fixWebpackSourcePaths: true
    },
    webpack: require("./app/webpack.config.js"),
    webpackMiddleware: {
      stats: "errors-only"
    },    
    webpackServer: {
      noInfo: true
    },
    reporters: ['progress'],
    port: 9876,
    colors: true,
    logLevel: config.LOG_INFO,
    autoWatch: false,
    browsers: ['Chrome'],
    singleRun: true
  });
};

main.spec.ts文件：

import 'reflect-metadata';
import 'zone.js';
import 'zone.js/dist/long-stack-trace-zone';
import 'zone.js/dist/proxy.js';
import 'zone.js/dist/sync-test';
import 'zone.js/dist/jasmine-patch';
import 'zone.js/dist/async-test';
import 'zone.js/dist/fake-async-test';
import * as testing from '@angular/core/testing';
import * as testingBrowser from '@angular/platform-browser-dynamic/testing';

// There's no typing for the `__karma__` variable. Just declare it as any
declare let __karma__: any;
declare let require: any;

// Prevent Karma from running prematurely
__karma__.loaded = function () {};

// First, initialize the Angular testing environment
testing.getTestBed().initTestEnvironment(
    testingBrowser.BrowserDynamicTestingModule,
    testingBrowser.platformBrowserDynamicTesting()
);

// Then we find all the tests
const context = require.context('../', true, /\.spec\.ts$/);

// And load the modules
context.keys().map(context);

// Finally, start Karma to run the tests
__karma__.start();

当然还有webpack.config文件：

const webpack = require("webpack");
const path = require("path");
const UglifyJsPlugin = require("uglifyjs-webpack-plugin");
const HtmlWebpackPlugin = require('html-webpack-plugin');

const CleanWebpackPlugin = require('clean-webpack-plugin');

const entryPath = path.resolve(__dirname);

const corePath = path.resolve(
  __dirname,
  "../Scripts/Ng2"
);

const targetPath = path.resolve(
  __dirname,
  "../Scripts"
);

const viewPath = path.resolve(
  __dirname,
  "../Views/Home"
);
const app = `${entryPath}`;

module.exports = envOptions => {
  envOptions = envOptions || {};

  const config = {
    entry: {
      app: `${entryPath}/main.ts`
    },
    output: {
      path: corePath,
      publicPath: "../Scripts/Ng2/",
      filename: "[name].[hash].js",
      chunkFilename: '[name].[hash]-chunk.js',
      sourceMapFilename: "[name].[hash].js.map"
    },
    resolve: {
      extensions: [".ts", ".js", ".html"]
    },
    module: {
      rules: [
        {
          test: /\.ts$/,
          loaders: ["awesome-typescript-loader", "angular2-template-loader", "angular-router-loader"]
        },
        {
          test: /\.html$/,
          loader: "raw-loader"
        },
        {
          test: /\.css$/,
          loader: "raw-loader"
        }
      ]
    },
    devtool: "source-map",
    plugins: [
      new webpack.NoEmitOnErrorsPlugin(),      
      new HtmlWebpackPlugin({
        template: viewPath + "/Loader.cshtml",
        filename: viewPath + "/Ng2Index.cshtml",
        inject: false
      }),
      new webpack.DefinePlugin({
        // Environment helpers
        'process.env': {
          ENV: JSON.stringify(envOptions.MODE)
        }
      }),
      new CleanWebpackPlugin(['Ng2'], {
        root: targetPath,
        verbose: true,
        dry: false,
      }),
    ]
  };

  if (envOptions.MODE === "prod") {
    config.plugins.push(
      new UglifyJsPlugin()      
    );
  }

  return config;
};

我的理解是karma-webpack包应该让karma使用webpack配置加载测试规范文件。那么它肯定应该有上传器来加载typescript文件。

我在这里缺少什么？