Angular2 Material Viewportルーラユニットテストエラー

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 

グーグルのビットから、それはむしろ、コンパイルの.jsよりも、ブラウザに.TSファイルを提供していますことを示唆しています。私は間違った場所から参照している可能性があります。

私の質問は私のテストをコンパイルするには？

私のコードは次のとおりです。

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）、独自のカスタムモジュールを作成することができます。

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.

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

---

2.0.0-beta.2

材質チームは、この非問題作り.forRoot()を削除しました。

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

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

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

---

MaterialModule.forRoot()あなたは、テストモジュールに必要ですプロバイダを、設定します。これにより、あなたのようなエラーやNo provider for MdIconRegistry!のようなエラーが解決されます。