Angular Webpack/Karma/awesome类型脚本加载器赢得'；不要忽略文件

我使用Webpack2.x来编译我的Angular 2应用程序。对于生产代码，我使用

ngc

和

@ngtools/webpack

的AotPlugin组合进行编译。对于测试，我使用了

awesome typescript加载程序

。我的代码的产品构建工作得很好。然而，当我进行

npm测试时

会发生一些非常奇怪的事情

awesome typescript loader

抱怨它无法编译代码，但Karma还是通过了测试，测试都通过了

bash-3.2$ npm test
> btc2017@1.0.0 test /Users/tomb/Projects/brandontom.com/wp-content/themes/btc2017
> NODE_ENV=test node ./node_modules/.bin/karma start --single-run=true

webpack: wait until bundle finished:

[at-loader] Using typescript@2.2.1 from typescript and "tsconfig.json" from /Users/tomb/Projects/brandontom.com/wp-content/themes/b
tc2017/tsconfig.json.
[at-loader] Checking started in a separate process...
[at-loader] Ok, 1.054 sec.
ERROR in ./ngfactory/src/app/app.module.ngfactory.ts
Module parse failed: /Users/tomb/Projects/brandontom.com/wp-content/themes/btc2017/ngfactory/src/app/app.module.ngfactory.ts Unexpe
cted token (65:56)
You may need an appropriate loader to handle this file type.
| import * as import55 from '@angular/router/src/router_config_loader';
| import * as import56 from '@angular/router/src/router_state';
| class AppModuleInjector extends import0.NgModuleInjector<import1.AppModule> {
|   _CommonModule_0:import2.CommonModule;
|   _ApplicationModule_1:import3.ApplicationModule;
 @ ./bootstrap/main.aot.ts 1:0-78
webpack: Failed to compile.
Chrome 56.0.2924 (Mac OS X 10.12.3): Executed 4 of 4 SUCCESS (1.41 secs / 0.758 secs)

但是

awesome typescript loader

一直在尝试解析这个文件，尽管

exclude

。接下来，我想可能是因果报应造成了这种情况，所以我在

Karma.conf.js

中添加了一个排除规则

module.exports = function (config) {
  var _config = {
    basePath: '',
    frameworks: ['jasmine'],
    files: [
      { pattern: './karma-shim.js', watched: false }
    ],
    exclude: [
      'bootstrap',
      'dist',
      'ngfactory',     // <--- here's where that file lives
      'node_modules',
      'prebuild'
    ],
...
...

这是我的

tsconfig.json

：

{
  "compilerOptions": {
    "target": "es5",
    "module": "es2015",
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "sourceMap": true,
    "noEmitHelpers": false,
    "noUnusedLocals": false,
    "noUnusedParameters": false,
    "outDir": "./prebuild",
    "lib": [
      "es2015",
      "dom"
    ],
    "types": [
      "jasmine",
      "node"
    ]
  },
  "compileOnSave": false,
  "buildOnSave": false,
  "awesomeTypescriptLoaderOptions": {
    "forkChecker": true,
    "useWebpackText": true
  },
  "angularCompilerOptions": {
    "genDir": "./ngfactory",
    "entryModule": "src/app/app.module#AppModule"
  }
}

为了更好地衡量，这里还有我的

karma.conf.js

：

var webpackConfig = require('./webpack.config')

module.exports = function (config) {
  var _config = {
    basePath: '',
    frameworks: ['jasmine'],
    files: [
      { pattern: './karma-shim.js', watched: false }
    ],
    exclude: [
      'bootstrap',
      'dist',
      'ngfactory',
      'node_modules',
      'prebuild'
    ],
    preprocessors: {
      './karma-shim.js': ['webpack']
    },
    webpack: webpackConfig,
    webpackMiddleware: {
      stats: 'errors-only'
    },
    webpackServer: {
      noInfo: true
    },
    progress: ['progress'],
    port: 9876,
    color: true,
    logLevel: config.LOG_ERROR,
    browsers: ['Chrome']
  }
  config.set(_config)
}

---

尽管我无法停止编译工件，但无论何时，我都能够让它停止失败。加载程序有一个名为

transpileOnly

的布尔设置。将此设置为

true

可防止加载程序执行类型检查。我将它添加到

awesomeTypescriptLoaderOptions

部分的

tsconfig.json

这并不理想，但我（目前）对

awesome typescript loader

不在测试端强制执行类型检查没问题。。。我想。。。只要

ngc

在生产代码上强制执行它

这是我的

tsconfig.json

{
  "compilerOptions": {
    "target": "es5",
    "module": "es2015",
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "sourceMap": true,
    "noEmitHelpers": false,
    "noUnusedLocals": false,
    "noUnusedParameters": false,
    "outDir": "./prebuild",
    "lib": [
      "es2015",
      "dom"
    ],
    "types": [
      "jasmine",
      "node"
    ]
  },
  "compileOnSave": false,
  "buildOnSave": false,
  "awesomeTypescriptLoaderOptions": {
    "forkChecker": true,
    "useWebpackText": true,
    "transpileOnly": true
  },
  "angularCompilerOptions": {
    "genDir": "./ngfactory",
    "entryModule": "src/app/app.module#AppModule"
  }
}

var webpackConfig = require('./webpack.config')

module.exports = function (config) {
  var _config = {
    basePath: '',
    frameworks: ['jasmine'],
    files: [
      { pattern: './karma-shim.js', watched: false }
    ],
    exclude: [
      'bootstrap',
      'dist',
      'ngfactory',
      'node_modules',
      'prebuild'
    ],
    preprocessors: {
      './karma-shim.js': ['webpack']
    },
    webpack: webpackConfig,
    webpackMiddleware: {
      stats: 'errors-only'
    },
    webpackServer: {
      noInfo: true
    },
    progress: ['progress'],
    port: 9876,
    color: true,
    logLevel: config.LOG_ERROR,
    browsers: ['Chrome']
  }
  config.set(_config)
}

{
  "compilerOptions": {
    "target": "es5",
    "module": "es2015",
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "sourceMap": true,
    "noEmitHelpers": false,
    "noUnusedLocals": false,
    "noUnusedParameters": false,
    "outDir": "./prebuild",
    "lib": [
      "es2015",
      "dom"
    ],
    "types": [
      "jasmine",
      "node"
    ]
  },
  "compileOnSave": false,
  "buildOnSave": false,
  "awesomeTypescriptLoaderOptions": {
    "forkChecker": true,
    "useWebpackText": true,
    "transpileOnly": true
  },
  "angularCompilerOptions": {
    "genDir": "./ngfactory",
    "entryModule": "src/app/app.module#AppModule"
  }
}