Angular2 with Webpack and Karma can't find module tags in template

Question

I have a Webpack configuration that's building a Typescript Angular2 app. I'm trying to integrate Jasmine/karma tests into it.

I have a simple Webpack test configuration like so:

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

This works fine, unless the component I'm testing tries to use another component in its template, for example if the template has something like <my-custom-component></my-custom-component> .

In that case, Karma gives template compiler errors, saying it can't find the tag my-custom-component .

I've also tried providing the needed component to the TestBed like so in the beforeEach step:

    TestBed.configureCompiler({
        providers: [
            {
                provide: MyComponent,
                useClass: MyComponent
            }, 
            {
                provide: ComponentBeingUsed,
                useClass: ComponentBeingUsed
            }

] });

but it still errors out when it tries to compile the template.

Answer 1

Components belong to module declarations not providers. You need to add it to the testbeds module configuration:

beforeEach(() => {
    TestBed.configureTestingModule({
        declarations: [
            MyComponent            
        ]
    });
});