Angular2 Material ViewportRuler Einheit Testfehler

Question

Ich habe eine Angular2-Komponente, die eine Registerkarte Steuerelement von @angular/material enthält.

Ich versuche, meine Komponente zu testen (vereinfachte Code unten sehen - ich, dass es keinen Sinn, eine Komponente zu testen, die diese einfach ist), und bin den folgenden Fehler erhalten:

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

Meine Vermutung war zu versuchen, ViewportRuler (https://github.com/angular/material2/blob/master/src/lib/core/overlay/position/viewport-ruler.ts) als Anbieter einzuschließen. Als ich dies (siehe Kommentar gesetzt Linien unten) tun, Karma zurückgibt:

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

Welche, von ein bisschen googeln, legt nahe, dass sie an den Browser die .ts Datei geliefert wird, anstatt die kompilierte Js. Es ist möglich, dass ich es von der falschen Stelle aus referenziere.

Meine Frage ist: Wie mache ich meine Tests kompilieren?

Mein Code ist:

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); 
     });   
    }); 

Ich habe es versucht um so viele Informationen wie möglich einzubeziehen, aber ich bin neu in der gesamten Angular-Welt, also lass es mich wissen, wenn es noch etwas gibt, was ich anbieten kann.

Vielen Dank.

Answer 1

2.0.0-beta.3

MaterialModule ist veraltet. Entwickler können entweder einzelne Komponentenmodule und ihre Abhängigkeiten nach Bedarf verbrauchen (z. B. MdButtonModule) oder ein eigenes benutzerdefiniertes Modul erstellen.

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

Werkstoff Team entfernt .forRoot() dies kein Thema zu machen.

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() setzt die Anbieter auf, die Sie in einem Testmodul benötigen. Dies sollte Fehler wie Ihre und ähnliche wie No provider for MdIconRegistry! beheben.