Angular2テスト用にwebpackを設定するにはどうすればよいですか？

Question

Angular2テストでwebpackを設定するにはどうすればよいですか？

Angular2 npmパッケージをテストするためにwebpackベースの設定をセットアップしました。 とにかく私のようなエラーを得続ける：

Error: This test module uses the component PaginationComponent which is using a "templateUrl", but they were never compiled. Please call "TestBed.compileComponents" before your test. in karma-test-shim.js (line 9952)

をそして、私の意見では、私は右のすべてをした、それが動作するはずです。 htmlとscssファイルはwebpackによって読み込まれます。

完全な設定を確認する場合は、GitHubに変更してください。プロジェクトのソースとともに、webpack.test.js、karma.conf.js、package.jsonがあります。それは小さい - 1つのコンポーネントプロジェクトです。あなたがここにTravis CI

に行くことができ、完全なエラーメッセージについては

私webpack構成です：

var path = require('path'); 
var _root = path.resolve(__dirname, '..'); 

module.exports = { 
    devtool: 'inline-source-map', 

    resolve: { 
     extensions: ['', '.ts', '.js', '.json', '.css', '.scss', '.html'] 
    }, 

    module: { 
     loaders: [ 
      { 
       test: /\.ts$/, 
       loaders: ['awesome-typescript-loader', 'angular2-template-loader'] 
      }, 
      { 
       test: /\.html$/, 
       loader: 'html' 
      }, 
      { 
       test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/, 
       loader: 'null' 
      }, 
      { 
       test: /\.json$/, 
       loader: 'json' 
      }, 
      { 
       test: /\.css$/, 
       exclude: root('src'), 
       loader: 'null' 
      }, 
      { 
       test: /\.css$/, 
       include: root('src'), 
       loader: 'raw' 
      }, 
      { 
       test: /\.scss$/, 
       exclude: root('src'), 
       loader: 'null' 
      }, 
      { 
       test: /\.scss$/, 
       include: root('src'), 
       loader: 'raw!postcss!sass' 
      } 
     ] 
    } 
}; 

function root(args) { 
    args = Array.prototype.slice.call(arguments, 0); 
    return path.join.apply(path, [_root].concat(args)); 
} 

Answer 1

問題は活字体構成としました。

tsconfig.json：

{ 
    "compilerOptions": { 
    "target": "es5", 
    "module": "commonjs", 
    "moduleResolution": "node", 
    "sourceMap": true, 
    "emitDecoratorMetadata": true, 
    "experimentalDecorators": true, 
    "removeComments": false, 
    "noImplicitAny": true, 
    "suppressImplicitAnyIndexErrors": true, 
    "declaration": true, 
    "outDir": "./lib", 
    "noEmitHelpers": false, 
    "isolatedModules": false 
    }, 
    "compileOnSave": false, 
    "buildOnSave": false, 
    "exclude": [ 
    "components.d.ts", 
    "typings/browser.d.ts", 
    "typings/browser", 
    "node_modules", 
    "examples" 
    ] 
} 

IDEインテリセンスがテスト中にエラーをスローするようにWebPACKのをcousingた可能ファイルを、.d.ts *タイピングの生成をトリガwhihオプション"declaration": true。

buildを実行しているときにテストしてコメントを外すと、この行がコメントアウトされて解決しました。