如何为 Angular2 测试配置 webpack？答案

【问题标题】：How to configure webpack for Angular2 tests?如何为 Angular2 测试配置 webpack？
【发布时间】：2017-02-11 04:08:57
【问题描述】：

如何为 Angular2 测试配置 webpack？

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

错误：此测试模块使用了使用“templateUrl”的组件 PaginationComponent，但它们从未被编译。请在测试前调用“TestBed.compileComponents”。在 karma-test-shim.js 中（第 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));
}

【问题讨论】：

看到的一个问题是_root。您正在通过'..' 向上解决。在 Angular 示例中，他们在 config 文件夹中有 helpers.js 文件。所以根将是一个级别。但是在您的情况下，您只是将帮助文件中的内容复制到您的配置文件中，该文件已经位于根目录中。所以你真的应该只使用一个点'.'。还没有真正弄清楚这完全符合问题。但是问题似乎是找不到模板文件，所以也许它是相关的。我不知道。我对 webpack 不太熟练
@peeskillet 你是对的，但这不是这个:(
所以我根据 Angular 文档创建了a repo。测试了它，它工作。因此，我将其剥离以更适合您的项目结构，并对其进行了测试，它仍然有效。我尝试了一些不同的方法来尝试破坏它，但找不到任何与你的真正不同的东西会导致它破坏。也许你可能会有更好的运气：-/
也许是因为我们有不同的tsconfig.json？

标签： angular webpack karma-jasmine

【解决方案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 选项触发了类型 *.d.ts 文件的生成，启用 IDE Intellisense 会导致 webpack 在测试期间抛出错误。

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

【讨论】：