webpack + Uncaughtによるカルマ設定SyntaxError

webpack + karma + angular 2を設定しています。Uncaught SyntaxError：予期せぬトークンのインポートがあります。私はなぜそれが発生するのか理解していません。私が実行すると$カルマ開始私はこのエラーを介してそれ.Plaese助けてください。webpack + Uncaughtによるカルマ設定SyntaxError

エラー

START: 

webpack: bundle is now VALID. 
webpack: bundle is now INVALID. 

webpack: bundle is now VALID. 
01 10 2016 21:19:23.983:INFO [karma]: Karma v1.2.0 server started at http://localhost:9876/ 
01 10 2016 21:19:23.986:INFO [launcher]: Launching browser Chrome with unlimited concurrency 
01 10 2016 21:19:23.992:INFO [launcher]: Starting browser Chrome 
01 10 2016 21:19:26.183:INFO [Chrome 52.0.2743 (Linux 0.0.0)]: Connected on socket /#lvvCZVUPfIeWdbpWAAAA with id 1306097 
Chrome 52.0.2743 (Linux 0.0.0) ERROR 
    Uncaught SyntaxError: Unexpected token import 
    at webpack:///~/@angular/platform-browser/src/dom/debug/by.js:8:0 <- config/spec-bundle.js:72359 
Chrome 52.0.2743 (Linux 0.0.0) ERROR 
    Uncaught SyntaxError: Unexpected token import 
    at webpack:///~/@angular/platform-browser/src/dom/debug/by.js:8:0 <- config/spec-bundle.js:72359 

Finished in 0.483 secs/0 secs 

SUMMARY: 
✔ 0 tests completed

karma.conf.js

module.exports = function(config) { 
    var testWebpackConfig = require('./webpack.test.js')({env: 'test'}); 

    var configuration = { 

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

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

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

/* 
* list of files/patterns to load in the browser 
* 
* we are building the test environment in ./spec-bundle.js 
*/ 
files: [ 

    { pattern: './config/spec-bundle.js', watched: false } 

], 

/* 
* preprocess matching files before serving them to the browser 
* available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor 
*/ 
preprocessors: { './config/spec-bundle.js': ['coverage', 'webpack', 'sourcemap'] }, 

// Webpack Config at ./webpack.test.js 
webpack: testWebpackConfig, 

coverageReporter: { 
    type: 'in-memory' 
}, 

remapCoverageReporter: { 
    'text-summary': null, 
    json: './coverage/coverage.json', 
    html: './coverage/html' 
}, 



// Webpack please don't spam the console when running in karma! 
webpackMiddleware: { stats: 'errors-only'}, 

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

// web server port 
port: 9876, 

// enable/disable colors in the output (reporters and logs) 
colors: true, 

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

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

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

customLaunchers: { 
    ChromeTravisCi: { 
    base: 'Chrome', 
    flags: ['--no-sandbox'] 
    } 
}, 

plugin:[ 
    'karma-coverage', 
    'karma-mocha-reporter', 
    'karma-remap-coverage', 
    'karma-sourcemap-loader', 

], 

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


}; 

    if (process.env.TRAVIS){ 
    configuration.browsers = [ 
     'ChromeTravisCi', 
     'Chrome' 
    ]; 
    } 

    config.set(configuration); 


};

webpack.test.js

const helpers = require('./helpers'); 

/** 
* Webpack Plugins 
*/ 
const ProvidePlugin = require('webpack/lib/ProvidePlugin'); 
const DefinePlugin = require('webpack/lib/DefinePlugin'); 

/** 
* Webpack Constants 
*/ 
const ENV = process.env.ENV = process.env.NODE_ENV = 'test'; 

/** 
* Webpack configuration 
* 
* See: http://webpack.github.io/docs/configuration.html#cli 
*/ 
module.exports = function(options) { 
    return { 

    /** 
    * Source map for Karma from the help of karma-sourcemap-loader & karma-webpack 
    * 
    * Do not change, leave as is or it wont work. 
    * See: https://github.com/webpack/karma-webpack#source-maps 
    */ 
    devtool: 'inline-source-map', 

    /** 
    * Options affecting the resolving of modules. 
    * 
    * See: http://webpack.github.io/docs/configuration.html#resolve 
    */ 
    resolve: { 

     /** 
     * An array of extensions that should be used to resolve modules. 
     * 
     * See: http://webpack.github.io/docs/configuration.html#resolve-extensions 
     */ 
     extensions: ['', '.ts', '.js'], 

     /** 
     * Make sure root is src 
     */ 
     root: helpers.root('src'), 

    }, 

    /** 
    * Options affecting the normal modules. 
    * 
    * See: http://webpack.github.io/docs/configuration.html#module 
    */ 
    module: { 

     /** 
     * An array of applied pre and post loaders. 
     * 
     * See: http://webpack.github.io/docs/configuration.html#module-preloaders-module-postloaders 
     */ 
     preLoaders: [ 

     /** 
     * Tslint loader support for *.ts files 
     * 
     * See: https://github.com/wbuchwalter/tslint-loader 
     */ 
     { 
      test: /\.ts$/, 
      loader: 'tslint-loader', 
      exclude: [helpers.root('node_modules')] 
     }, 

     /** 
     * Source map loader support for *.js files 
     * Extracts SourceMaps for source files that as added as sourceMappingURL comment. 
     * 
     * See: https://github.com/webpack/source-map-loader 
     */ 
     { 
      test: /\.js$/, 
      loader: 'source-map-loader', 
      exclude: [ 
      // these packages have problems with their sourcemaps 
      helpers.root('node_modules/rxjs'), 
      helpers.root('node_modules/@angular') 
     ]} 

     ], 

     /** 
     * An array of automatically applied loaders. 
     * 
     * IMPORTANT: The loaders here are resolved relative to the resource which they are applied to. 
     * This means they are not resolved relative to the configuration file. 
     * 
     * See: http://webpack.github.io/docs/configuration.html#module-loaders 
     */ 
     loaders: [ 

     /** 
     * Typescript loader support for .ts and Angular 2 async routes via .async.ts 
     * 
     * See: https://github.com/s-panferov/awesome-typescript-loader 
     */ 
     { 
      test: /\.ts$/, 
      loader: 'awesome-typescript-loader', 
      query: { 
      // use inline sourcemaps for "karma-remap-coverage" reporter 
      sourceMap: false, 
      inlineSourceMap: true, 
      compilerOptions: { 

       // Remove TypeScript helpers to be injected 
       // below by DefinePlugin 
       removeComments: true 

      } 
      }, 
      exclude: [/\.e2e\.ts$/] 
     }, 

     /** 
     * Json loader support for *.json files. 
     * 
     * See: https://github.com/webpack/json-loader 
     */ 
     { test: /\.json$/, loader: 'json-loader', exclude: [helpers.root('src/index.html')] }, 

     /** 
     * Raw loader support for *.css files 
     * Returns file content as string 
     * 
     * See: https://github.com/webpack/raw-loader 
     */ 
     { test: /\.css$/, loaders: ['to-string-loader', 'css-loader'], exclude: [helpers.root('src/index.html')] }, 

     /** 
     * Raw loader support for *.html 
     * Returns file content as string 
     * 
     * See: https://github.com/webpack/raw-loader 
     */ 
     { test: /\.html$/, loader: 'raw-loader', exclude: [helpers.root('src/index.html')] } 

     ], 

     /** 
     * An array of applied pre and post loaders. 
     * 
     * See: http://webpack.github.io/docs/configuration.html#module-preloaders-module-postloaders 
     */ 
     postLoaders: [ 

     /** 
     * Instruments JS files with Istanbul for subsequent code coverage reporting. 
     * Instrument only testing sources. 
     * 
     * See: https://github.com/deepsweet/istanbul-instrumenter-loader 
     */ 
     { 
      test: /\.(js|ts)$/, loader: 'istanbul-instrumenter-loader', 
      include: helpers.root('src'), 
      exclude: [ 
      /\.(e2e|spec)\.ts$/, 
      /node_modules/ 
      ] 
     } 

     ] 
    }, 

    /** 
    * Add additional plugins to the compiler. 
    * 
    * See: http://webpack.github.io/docs/configuration.html#plugins 
    */ 
    plugins: [ 

     /** 
     * Plugin: DefinePlugin 
     * Description: Define free variables. 
     * Useful for having development builds with debug logging or adding global constants. 
     * 
     * Environment helpers 
     * 
     * See: https://webpack.github.io/docs/list-of-plugins.html#defineplugin 
     */ 
     // NOTE: when adding more properties make sure you include them in custom-typings.d.ts 
     new DefinePlugin({ 
     'ENV': JSON.stringify(ENV), 
     'HMR': false, 
     'process.env': { 
      'ENV': JSON.stringify(ENV), 
      'NODE_ENV': JSON.stringify(ENV), 
      'HMR': false, 
     } 
     }), 


    ], 

    /** 
    * Static analysis linter for TypeScript advanced options configuration 
    * Description: An extensible linter for the TypeScript language. 
    * 
    * See: https://github.com/wbuchwalter/tslint-loader 
    */ 
    tslint: { 
     emitErrors: false, 
     failOnHint: false, 
     resourcePath: 'src' 
    }, 

    /** 
    * Include polyfills or mocks for various node stuff 
    * Description: Node configuration 
    * 
    * See: https://webpack.github.io/docs/configuration.html#node 
    */ 
    node: { 
     global: 'window', 
     process: false, 
     crypto: 'empty', 
     module: false, 
     clearImmediate: false, 
     setImmediate: false 
    } 

    }; 
}

仕様-bundle.js

Error.stackTraceLimit = Infinity; 

require('core-js/es6'); 
require('core-js/es7/reflect'); 

// Typescript emit helpers polyfill 
require('ts-helpers'); 

require('zone.js/dist/zone'); 
require('zone.js/dist/long-stack-trace-zone'); 
require('zone.js/dist/proxy'); // since zone.js 0.6.15 
require('zone.js/dist/sync-test'); 
require('zone.js/dist/jasmine-patch'); // put here since zone.js 0.6.14 
require('zone.js/dist/async-test'); 
require('zone.js/dist/fake-async-test'); 

// RxJS 
require('rxjs/Rx'); 

var testing = require('@angular/core/testing'); 
var browser = require('@angular/platform-browser-dynamic/testing'); 

testing.TestBed.initTestEnvironment(
    browser.BrowserDynamicTestingModule, 
    browser.platformBrowserDynamicTesting() 
); 

/* 
* Ok, this is kinda crazy. We can use the context method on 
* require that webpack created in order to tell webpack 
* what files we actually want to require or import. 
* Below, context will be a function/object with file names as keys. 
* Using that regex we are saying look in ../src then find 
* any file that ends with spec.ts and get its path. By passing in true 
* we say do this recursively 
*/ 
var testContext = require.context('../src', true, /\.spec\.ts/); 

/* 
* get all the files, for each file, call the context function 
* that will require the file and load it up here. Context will 
* loop and require those spec files here 
*/ 
function requireAll(requireContext) { 
    return requireContext.keys().map(requireContext); 
} 

// requires and returns all modules that match 
var modules = requireAll(testContext);

出典

2016-10-01 user6751153