각도 2 재질 뷰포트 단위 단위 테스트 오류

Question

@angular/material의 탭 컨트롤이 포함 된 Angular2 구성 요소가 있습니다.

내 구성 요소를 테스트 (단순화 된 코드 아래 참조 - 나는 아무 소용이 간단의 구성 요소를 테스트하는이 없다는 것을 얻을)하기 위해 노력하고있어, 다음과 같은 오류가 점점 오전 :

Error: Error in ./MdTabHeader class MdTabHeader - inline template:0:0 caused by: No provider for ViewportRuler! 
Error: No provider for ViewportRuler! 

내 가정이되었다 시도하고 공급자로 ViewportRuler (https://github.com/angular/material2/blob/master/src/lib/core/overlay/position/viewport-ruler.ts)를 포함하십시오. 나는이 (아래 라인을 주석 참조) 할 때, 카르마는 반환

Uncaught SyntaxError: Unexpected token import 
at http://localhost:9876/context.html:10 

어떤, 인터넷 검색의 비트에서, .TS 오히려 컴파일의 .js보다, 브라우저에 파일을 제공하는 것 제안합니다. 내가 잘못된 곳에서 그것을 참조 할 수 있습니다.

내 질문 : 테스트를 어떻게 컴파일합니까?

내 코드는 다음과 같습니다

my.component.ts :

@Component({ 
    selector: 'test', 
    template: require('./test.component.html') 
}) 
export class TestComponent { 

    items: any[]; 

    constructor() { 
     this.items = [{ title: 'test 1', description: 'description 1' }, { title: 'test 2', description: 'description 2' }]; 
    } 
} 

my.component.html :

<md-tab-group> 
    <md-tab *ngFor="let link of items"> 
     <template md-tab-label> 
      <h4>{{link.title}}</h4> 
     </template> 
     {{link.description}} 
    </md-tab> 
</md-tab-group>  

my.component.spec.ts :

import { TestBed } from '@angular/core/testing'; 
import { Component} from '@angular/core'; 
import { MaterialModule } from '@angular/material'; 
import { ViewportRuler} from '@angular/material/core/overlay/position/viewport-ruler' 
import { TestComponent } from './test.component'; 

describe("TestComponent", 
    () => { 
     let fixture, component; 

     beforeEach(() => { 

      TestBed.configureTestingModule({ 
       imports: [MaterialModule], 
       declarations: [TestComponent], 
       providers: [ 
        //{ provide: ViewportRuler }  
       ] 
      }); 

      fixture = TestBed.createComponent(TestComponent); 
      component = fixture.componentInstance; 
     }); 

     it('true = true',() => { 
      expect(true).toBe(true); 
     });   
    }); 

시도해 보았습니다. 가능한 한 많은 정보를 포함 시키겠다. 그러나 나는 Angular의 세계 전체를 처음 보았으므로, 내가 제공 할 수있는 것이 있다면 알려주게.

감사합니다.

Answer 1

2.0.0-beta.3

MaterialModule이되지 않습니다. 개발자는 필요에 따라 개별 구성 요소 모듈과 해당 종속성을 사용하거나 (예 : MdButtonModule) 자체 맞춤 모듈을 만들 수 있습니다.

https://github.com/angular/material2/releases/tag/2.0.0-beta.3

MaterialModule

• MaterialModule (and MaterialRootModule) have been marked as deprecated.

We've found that, with the current state of tree-shaking in the world, that using an aggregate NgModule like MaterialModule leads to tools not being able to eliminate code for components that aren't used.

In order to ensure that users end up with the smallest code size possible, we're deprecating MaterialModule, to be removed in the a subsequent release.

To replace MaterialModule, users can create their own "Material" modul within their application (e.g., GmailMaterialModule) that imports only the set of components actually used in the application.

는

---

2.0.0-beta.2

재료 팀이 아닌 문제 만들기 .forRoot()를 제거했습니다.

@NgModule({ 
    imports: [ 
     ... 
     MaterialModule, 
     ... 
    ] 
... 
}); 

https://github.com/angular/material2/releases/tag/2.0.0-beta.2

---

MaterialModule.forRoot() 세트까지 당신이 테스트 모듈이 필요합니다 공급자를

The use of Module forRoot has been deprecated and will be removed in the next release. Instead, just simply import MaterialModule directly:

. 이렇게하면 너와 비슷한 오류 (예 : No provider for MdIconRegistry!)가 해결됩니다.