Webpack 测试-Angular2 jasmine，karma网页包，VS2015-未捕获错误：找不到模块

我正在用业力进行测试

这就是我正在做的 我使用“ASP.NET core Angular 2初学者应用程序（.NET core）模板创建了一个VS 2015项目

试图用Jasime设置一些类型脚本测试，Karma我收到了消息

“测试名称：Chrome 51.0.2704（Windows 7 0.0.0） 测试结果：失败 结果消息：未捕获错误：找不到模块“./app/components/home/home.component” 结果标准错误：未捕获错误：找不到模块“./app/components/home/home.component” 在“

这是我的package.json

 {
      "name": "Angular2Spa",
      "version": "0.0.0",
      "dependencies": {
        "@angular/common": "2.0.0",
        "@angular/compiler": "2.0.0",
        "@angular/core": "2.0.0",
        "@angular/forms": "2.0.0",
        "@angular/http": "2.0.0",
        "@angular/platform-browser": "2.0.0",
        "@angular/platform-browser-dynamic": "2.0.0",
        "@angular/platform-server": "2.0.0",
        "@angular/router": "3.0.0",
        "@types/jasmine": "^2.5.41",
        "@types/node": "^6.0.38",
        "angular2-platform-node": "~2.0.10",
        "angular2-universal": "~2.0.10",
        "angular2-universal-polyfills": "~2.0.10",
        "aspnet-prerendering": "^1.0.6",
        "aspnet-webpack": "^1.0.11",
        "bootstrap": "^3.3.7",
        "css": "^2.2.1",
        "css-loader": "^0.25.0",
        "es6-shim": "^0.35.1",
        "expose-loader": "^0.7.1",
        "extract-text-webpack-plugin": "^1.0.1",
        "file-loader": "^0.9.0",
        "isomorphic-fetch": "^2.2.1",
        "jquery": "^2.2.1",
        "preboot": "^4.5.2",
        "raw-loader": "^0.5.1",
        "rxjs": "5.0.0-beta.12",
        "style-loader": "^0.13.0",
        "to-string-loader": "^1.1.5",
        "ts-loader": "^0.8.2",
        "typescript": "^2.0.0",
        "url-loader": "^0.5.7",
        "webpack": "^2.2.1",
        "webpack-externals-plugin": "^1.0.0",
        "webpack-hot-middleware": "^2.16.1",
        "webpack-merge": "^2.6.1",
        "zone.js": "^0.6.21"
      },
      "devDependencies": {
        "awesome-typescript-loader": "3.0.0-beta.10",
        "jasmine-core": "^2.5.2",
        "karma": "^1.4.1",
        "karma-chrome-launcher": "^2.0.0",
        "karma-jasmine": "^1.1.0",
        "karma-webpack": "^2.0.2"
      }
    }

这里是karma.config

// Karma configuration
// Generated on Thu Feb 02 2017 10:25:26 GMT-0600 (Central Standard Time)

var webpackConfig = require('./webpack.config.js');
//webpackConfig.entry = {};
module.exports = function (config) {
  config.set({

    // base path that will be used to resolve all patterns (eg. files, exclude)
    basePath: '',


    // frameworks to use
    // available frameworks: https://npmjs.org/browse/keyword/karma-adapter
    frameworks: ['jasmine'],


    // list of files / patterns to load in the browser
    files: [
      'ClientApp/test/*spec.ts'
    ],


    // list of files to exclude
    exclude: [
    ],


    // preprocess matching files before serving them to the browser
    // available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
    preprocessors: {
        'ClientApp/test/*spec.ts': ['webpack'],

    },
    webpack: {
        module: webpackConfig.module,
        resolve: webpackConfig.resolve
    },


    // test results reporter to use
    // possible values: 'dots', 'progress'
    // available reporters: https://npmjs.org/browse/keyword/karma-reporter
    reporters: ['progress'],


    // web server port
    port: 9876,


    // enable / disable colors in the output (reporters and logs)
    colors: true,
    logLevel: config.LOG_DEBUG,
    loggers : [
     {
         type: 'console'
     },
    {
        type: 'file',
        absolute: false,
        filename: 'log_file.log',
        maxLogSize: 20480,
        backups: 10,
    }],

    // level of logging
    // possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
    //logLevel: config.LOG_DEBUG,


    // enable / disable watching file and executing tests whenever any file changes
    autoWatch: true,


    // start these browsers
    // available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
    browsers: ['Chrome'],


    // Continuous Integration mode
    // if true, Karma captures browsers, runs the tests and exits
    singleRun: false,

    // Concurrency level
    // how many browser should be started simultaneous
    concurrency: Infinity,
  //    webpackMiddleware: {
  //        // webpack-dev-middleware configuration
  //        // i.e.
  //    noInfo: true,
  //        // and use stats to turn off verbose output
  //    stats: {
  //        // options i.e. 
  //        chunks: false
  //    }
  //},

  //  plugins: [
  //      require("karma-webpack")
  //]
  })
}

这是我的webpack.config.js

var isDevBuild = process.argv.indexOf('--env.prod') < 0;
var path = require('path');
var webpack = require('webpack');
var nodeExternals = require('webpack-node-externals');
var merge = require('webpack-merge');
var allFilenamesExceptJavaScript = /\.(?!js(\?|$))([^.]+(\?|$))/;

// Configuration in common to both client-side and server-side bundles
var sharedConfig = {
    resolve: { extensions: [ '', '.js','.ts'] },
    output: {
        filename: '[name].js',
        publicPath: '/dist/' // Webpack dev middleware, if enabled, handles requests for this URL prefix
    },
    module: {
        loaders: [
            { test: /\.ts$/, include: /ClientApp/, loaders: ['awesome-typescript-loader', 'angular2-router-loader'] },
            { test: /\.html$/, include: /ClientApp/, loader: 'raw' },
            { test: /\.css$/, include: /ClientApp/, loader: 'to-string!css' },
            { test: /\.(png|jpg|jpeg|gif|svg)$/, include: /ClientApp/, loader: 'url', query: { limit: 25000 } }          


        ]
    }
};

// Configuration for client-side bundle suitable for running in browsers
var clientBundleConfig = merge(sharedConfig, {
    entry: { 'main-client': './ClientApp/boot-client.ts' },
    output: { path: path.join(__dirname, './wwwroot/dist') },
    devtool: isDevBuild ? 'inline-source-map' : null,
    plugins: [
        new webpack.DllReferencePlugin({
            context: __dirname,
            manifest: require('./wwwroot/dist/vendor-manifest.json')
        }),
        new webpack.ProvidePlugin({ $: 'jquery', jQuery: 'jquery' })
    ].concat(isDevBuild ? [] : [
        // Plugins that apply in production builds only
        new webpack.optimize.OccurenceOrderPlugin(),
        new webpack.optimize.UglifyJsPlugin()
    ])
});

// Configuration for server-side (prerendering) bundle suitable for running in Node
var serverBundleConfig = merge(sharedConfig, {
    entry: { 'main-server': './ClientApp/boot-server.ts' },
    output: {
        libraryTarget: 'commonjs',
        path: path.join(__dirname, './ClientApp/dist')
    },
    target: 'node',
    devtool: 'inline-source-map',
    externals: [nodeExternals({ whitelist: [allFilenamesExceptJavaScript] })] // Don't bundle .js files from node_modules
});

module.exports = [clientBundleConfig, serverBundleConfig];

var isDevBuild=process.argv.indexOf（'--env.prod'）<0；
var path=require（'path'）；
var webpack=require（'webpack'）；
var nodeExternals=require（'webpack-node-externals'）；
var merge=require（'webpack-merge'）；
var allFilenamesExceptJavaScript=/\（？！js（\？|$）（[^.]+（\？|$）/；
//客户端和服务器端捆绑包的共同配置
var sharedConfig={
解析：{extensions:[''，'.js'，'.ts']}，
输出：{
文件名：'[name].js'，
publicPath:'/dist/'//Webpack dev中间件，如果启用，将处理对此URL前缀的请求
},
模块：{
装载机：[
{test:/\.ts$/，include:/ClientApp/，加载器：['awesome-typescript-loader'，'angular2路由器加载器']}，
{test://\.html$/，include:/ClientApp/，loader:'raw'}，
{test://\.css$/，include:/ClientApp/，loader:'to string！css'}，
{test://\（png | jpg | jpeg | gif | svg）$/，include:/ClientApp/，loader:'url'，查询：{limit:25000}
]
}
};
//适用于在浏览器中运行的客户端捆绑包的配置
var clientBundleConfig=merge（sharedConfig{
条目：{'main client'：'./ClientApp/boot client.ts'}，
输出：{path:path.join（uu dirname，'./wwwroot/dist'），
devtool:isDevBuild？“内联源映射”：null，
插件：[
新建webpack.DllReferencePlugin({
上下文：_dirname，
清单：要求（'./wwwroot/dist/vendor manifest.json'）
}),
新的webpack.ProvidePlugin（{$：'jquery'，jquery:'jquery'}）
].concat（isDevBuild？[]：[
//仅适用于生产版本的插件
新建webpack.optimize.OccurenceOrderPlugin（），
新建webpack.optimize.UglifyJsPlugin（）
])
});
//适合在节点中运行的服务器端（预渲染）捆绑包的配置
var serverBundleConfig=merge（sharedConfig{
条目：{'main server'：'./ClientApp/boot server.ts'}，
输出：{
libraryTarget:'commonjs'，
path:path.join（uu dirname，'./ClientApp/dist'）
},
目标：'节点'，
devtool:“内联源映射”，
externals:[nodeExternals（{whitelist:[allFilenamesExceptJavaScript]}）]//不捆绑来自节点\模块的.js文件
});
module.exports=[clientBundleConfig，serverBundleConfig]；

这是我的spec.ts代码

/// <reference path="../../node_modules/@types/jasmine/index.d.ts" />
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { By } from '@angular/platform-browser';
import { DebugElement } from '@angular/core';
import { HomeComponent } from '../app/components/home/home.component';
//var a = require('../app/components / home / home.component.ts');

describe('Counter', () => {

    let comp: HomeComponent;
    let fixture: ComponentFixture<HomeComponent>;

    beforeEach(() => {
        TestBed.configureTestingModule({
            declarations: [HomeComponent], //declare the test component
        });
    });

    fixture = TestBed.createComponent(HomeComponent);
    comp = fixture.componentInstance;


    it('Tittle Test', () => {

        expect(comp.title).toEqual('Counter value');
    });

}); 

//
从“@angular/core/testing”导入{ComponentFixture，TestBed}；
从“@angular/platform browser”导入{By}”；
从“@angular/core”导入{DebugElement}；
从“../app/components/home/home.component”导入{HomeComponent}；
//var a=require（'../app/components/home/home.component.ts'）；
描述（'计数器'，（）=>{
let comp：HomeComponent；
let夹具：组件夹具；
在每个之前（（）=>{
TestBed.configureTestingModule({
声明：[HomeComponent]，//声明测试组件
});
});
fixture=TestBed.createComponent（HomeComponent）；
comp=夹具。组件状态；
它（‘标题测试’，（）=>{
expect（公司名称）.toEqual（“计数器值”）；
});
});