angular - 如何为 Angular2 测试配置 webpack？

Question

如何为 Angular2 测试配置 webpack？

我已经设置了基于 webpack 的配置来测试 Angular2 npm 包。 无论如何，我不断收到如下错误:

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 以及项目源代码。它很小 - 一个组件项目。

有关完整的错误消息，您可以转到 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

问题出在 TypeScript 配置上。

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"
  ]
}

选项 "declaration": true whih 触发了 typings *.d.ts 文件的生成，这使得 IDE Intellisense 与 webpack 在测试期间抛出错误有关。

我通过在测试时注释掉这一行并在运行 build 时取消注释来解决这个问题。