2

我有一个与 Webpack 捆绑在一起的 Angular 2 应用程序，并通过 Karma 和 karma-webpack 对 Jasmine 进行了测试。开发时，代码被正确捆绑和提供。测试时，awesome-ts-loader 在我的 .spec.ts 文件中抛出“模块解析失败”错误。

Module parse failed: /Users/kyleburke/angular2-app/app/main/app.component.spec.ts Unexpected token (10:8)
You may need an appropriate loader to handle this file type.
| ////////  SPECS  /////////////
| describe('AppComponent', function () {
|   let de: DebugElement;
|   let comp: AppComponent;
|   let fixture: ComponentFixture<AppComponent>;
@ ./app \.spec\.ts
@ ./karma-shim.js

我正在使用他们的 Github 自述文件中描述的 karma-webpack “替代方法”来加载我的所有 .spec 文件（在 karma-shim.js 中）：

var appContext = require.context('./app', true, /\.spec\.ts/);
appContext.keys().forEach(function(path) {
  try {
    appContext(path);
  }
  catch(err) {
    console.error('problem with'+ path);
    console.error(err);
  }
});

根据几个示例存储库，我的 karma.conf.js 的相关部分配置正确：

files: [
  { pattern: './karma-shim.js', watched: false }
],
preprocessors: {
  './karma-shim.js': ['webpack', 'sourcemap']
},
webpack: webpackConfig,

我的 Webpack 配置中的所有内容都排列整齐（部分示例）：

module.exports = () => {
  const TARGET = process.env.npm_lifecycle_event;

  const isTest = TARGET === 'test';

  let config = {};

  config.entry = isTest ? {} : './app/main.ts';

  config.output = isTest ? {} : {
    path: './dist',
    filename: 'bundle.js'
  };

  config.resolve = {
    extensions: ['.ts', '.js', '.json', '.html']
  };

  config.module = {
    rules: [
      {
        test: /\.ts$/,
        loaders: ['awesome-typescript-loader', 'angular2-template-loader' ],
        exclude: [isTest ? /\.(e2e)\.ts$/ : /\.(spec|e2e)\.ts$/, /node_modules\/(?!(ng2-.+))/]
      },
      {test: /\.json$/, loader: 'json-loader'},
      {test: /\.html$/, loader: 'raw-loader'}
    ]
  };

  ...
}

来自 tslint 的错误让我认为 Webpack 正确地找到了规范文件，但它可能没有被移交给 awesome-ts-loader，或者它没有加载 tsconfig.json。（同样，开发时一切正常）。

4

0 回答 0