How to configure webpack for Angular2 tests?

Question

How to configure webpack for Angular2 tests?

I set up a webpack based configuration to test Angular2 npm package. In any case, I keep getting errors, for example:

Error: this test module uses the PaginationComponent component, which uses "templateUrl", but they have never been compiled. Before testing, call "TestBed.compileComponents". in karma-test-shim.js (line 9952)

And, in my opinion, I did everything right, and it should work. File htmland scssmust be loaded webpack.

If you want to check out the full configuration, I upgraded it to GitHub . You can find out there webpack.test.js, karma.conf.js, package.jsontogether with the project source. It is small - one component project.

For complete error messages, you can go to Travis CI

Here is my configuration 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

The problem was TypeScript configuration.

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

An option "declaration": truethat triggers the generation of * .d.ts caption files that allow the Intellisense IDE bites the web package to throw errors during tests.

I solved this by commenting out this line while testing and uncommenting at startup build.