带有Webpack和Karma的Angular2在模板中找不到模块标签答案

【问题标题】：Angular2 with Webpack and Karma can't find module tags in template带有Webpack和Karma的Angular2在模板中找不到模块标签
【发布时间】：2016-10-25 19:44:32
【问题描述】：

我有一个 Webpack 配置，它正在构建一个 Typescript Angular2 应用程序。我正在尝试将 Jasmine/karma 测试集成到其中。

我有一个简单的 Webpack 测试配置，如下所示：

    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']
        }
    ],

这很好用，除非我正在测试的组件尝试在其模板中使用另一个组件，例如，如果模板有类似 <my-custom-component></my-custom-component> 的内容。

在这种情况下，Karma 给出模板编译器错误，说它找不到标签my-custom-component。

我还尝试在 beforeEach 步骤中向 TestBed 提供所需的组件：

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

] });

但是当它尝试编译模板时仍然出错。

【问题讨论】：

标签： angular webpack karma-jasmine

【解决方案1】：

组件属于模块声明而不是提供者。您需要将其添加到 testbeds 模块配置中：

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

【讨论】：