Angular2 Malzeme ViewportRuler birim sınama hatası

Question

@angular/material'dan sekme denetimi içeren bir Angular2 bileşenim var.

benim bileşeni test (basitleştirilmiş kod aşağıya bakınız - Ben hiçbir nokta bu basit bir bileşen test var olduğunu olsun) çalışıyorum ve aşağıdaki hatayı alıyorum:

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

Benim varsayım oldu ViewportRuler'ı (https://github.com/angular/material2/blob/master/src/lib/core/overlay/position/viewport-ruler.ts) bir sağlayıcı olarak denemek ve dahil etmek. Bu (aşağıdaki satırları dışarı yorum bakınız) yaptığınızda, karma döndürür:

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

hangisi, Googling biraz dışında, ts yerine derlenmiş Js daha tarayıcıya dosya sunduğunu göstermektedir. Onu yanlış yerlere göndermem mümkün.

Soruma ilişkin soru: Testlerimi nasıl derlerim?

Benim kodudur:

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

Denedim Mümkün olduğu kadar çok bilgi içermek, ama tüm Açısal dünyaya yeni geldim, bu yüzden bana sağlayabileceğim başka bir şey varsa bana bildirin.

Çok teşekkürler.

Answer 1

2.0.0-beta.3

MaterialModule kaldırıldı. Geliştiriciler bireysel bileşen modüllerini ve bağımlılıklarını gerektiği gibi (örneğin, MdButtonModule) kullanabilir veya kendi özel modüllerini oluşturabilir.

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

Malzeme ekibi bu olmayan bir konu yapım .forRoot() kaldırıldı.

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

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

---

MaterialModule.forRoot() setleri yukarı bir test modülünde gerekir sağlayıcıları,

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

. Bu sizinki gibi ve No provider for MdIconRegistry! gibi benzer hataları çözmelidir.