Webpack にバンドルされている Angular 2 アプリケーションがあり、Karma-webpack を使用して Karma を介して 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 Readme で説明されている 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 が spec ファイルを正しく見つけていると思わせますが、awesome-ts-loader に渡されていないか、tsconfig.json をロードしていない可能性があります。(繰り返しますが、開発時にはすべて正常にロードされます)。