Webpack 및 Karma가있는 Angular2는 템플릿에 모듈 태그를 찾을 수 없습니다.

Question

Typescript Angular2 app을 구축하고있는 Webpack 구성이 있습니다. Jasmine/karma 테스트를 통합하려고합니다.

나는 간단한 웹팩 테스트 구성과 같이 있습니다

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> 같은이있는 경우, 예를 들어, 그 템플릿에 다른 구성 요소를 사용하려고 테스트를하고있어, 잘 작동 .

그런 경우 카르마는 서식 파일 컴파일러 오류를 제공하여 my-custom-component 태그를 찾을 수 없다고 말합니다.

I 또한 beforeEach 스텝과 같이 테스트 베드에 필요한 성분을 제공 시도한

:

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

] });

그러나 템플릿을 컴파일하려고하면 오류가 발생합니다.

Answer 1

구성 요소는 공급자가 아닌 모듈 선언에 속합니다. 테스트 베드 모듈 구성에 추가해야합니다 :

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