帶有Webpack和Karma的Angular2在模板中找不到模塊標簽

Question

我有一個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
            }

]}）;

但是在嘗試編譯模板時仍然會出錯。

Answer 1

組件屬於模塊聲明而不是提供程序。 您需要將其添加到測試平台模塊配置中：

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