Angular2 material 'md-icon', Karma/Jasmine ile bilinen bir öğe değildir

Question

Angular2 uygulamasında @ açısal/malzeme kullanarak çalışıyor 2.0.0-alpha.11-3 angular-cli 1.0.0- beta.19-3 karma 1.2.0 karma-yasemin 1.0.2

sorunsuz çalışıyor ama şablon md-simgeli bir düğme vardır testlerin birkaç şablon hatalarla başarısız Running:

ERROR: 'Unhandled Promise rejection:', 'Template parse errors: 
'md-icon' is not a known element: 
1. If 'md-icon' is an Angular component, then verify that it is part of this module.         
2. If 'md-icon' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message 

Benim app.module.ts:

import { MaterialModule } from '@angular/material'; 

@NgModule({ 
    declarations: [ 
    AppComponent, 
    LinearProgressIndicatorComponent, 
    MyNewDirectiveDirective, 
    MyNewServiceDirective, 
    HeaderComponent, 
    MenuComponent, 
    WatchpanelComponent, 
    InputComponent 
    ], 
    imports: [ 
    BrowserModule, 
    FormsModule, 
    HttpModule, 
    NgbModule.forRoot(), 
    MaterialModule.forRoot(), 
    ], 
    exports: [ MaterialModule ], 
    providers: [LocalStorage], 
    bootstrap: [AppComponent] 
}) 
export class AppModule { } 

watchpanel.component.spec.ts: I açısal/malzeme @ olarak anlaşılacağı gibi

import { async, ComponentFixture, TestBed } from '@angular/core/testing'; 
import { By } from '@angular/platform-browser'; 
import { DebugElement } from '@angular/core'; 
import { WatchpanelComponent } from './watchpanel.component'; 

describe('WatchpanelComponent',() => { 
    let component: WatchpanelComponent; 
    let fixture: ComponentFixture<WatchpanelComponent>; 

    beforeEach(async(() => { 
    TestBed.configureTestingModule({ 
     declarations: [ WatchpanelComponent ] // declare the test component 
    }) 
    .compileComponents(); 

    fixture = TestBed.createComponent(WatchpanelComponent); 
    component = fixture.componentInstance; 
    fixture.detectChanges(); 

    })); 

    // beforeEach(() => { 
    // fixture = TestBed.createComponent(WatchpanelComponent); 
    // component = fixture.componentInstance; 
    // fixture.detectChanges(); 
    // }); 

    it('should create',() => { 
    expect(component).toBeTruthy(); 
    }); 
}); 

şimdi, MaterialModule aktarmak için gerekli tek modülü içerir. MdIconModule'i @ angular2-material/icon'dan hiç başarı ile almayı denedim. Neyi yanlış yapıyorum ? yurzui önerdiği ve söz döndürülür SONRA bileşeni oluşturma gibi MaterialModule İthalat peşin

Answer 1

yılında Teşekkür bunu çözdü. Teşekkürler yurzui

import { async, ComponentFixture, TestBed } from '@angular/core/testing'; 
import { By } from '@angular/platform-browser'; 
import { DebugElement } from '@angular/core'; 
import { WatchpanelComponent } from './watchpanel.component'; 
import { FormsModule } from '@angular/forms'; 
import { MaterialModule } from '@angular/material'; 

describe('WatchpanelComponent',() => { 
    let component: WatchpanelComponent; 
    let fixture: ComponentFixture<WatchpanelComponent>; 

    beforeEach(async(() => { 
    TestBed.configureTestingModule({ 
     imports: [ MaterialModule.forRoot() ], 
     // forRoot() deprecated 
     // in later versions ------^ 
     declarations: [ WatchpanelComponent ] // declare the test component 
    }) 
    .compileComponents().then(() => { 
     fixture = TestBed.createComponent(WatchpanelComponent); 
     component = fixture.componentInstance; 
     fixture.detectChanges(); 
    }); 

    })); 

    // beforeEach(() => { 
    // fixture = TestBed.createComponent(WatchpanelComponent); 
    // component = fixture.componentInstance; 
    // fixture.detectChanges(); 
    // }); 

    it('should create',() => { 
    expect(component).toBeTruthy(); 
    }); 
}); 

Answer 2

@ javahaxxor'un yanıtından bu yana Angular Material'un daha yeni sürümlerinde işler değişti. Ben AppModule olduğu gibi aynı modülleri ithal ile bu sorunu çözdüm (Ben de burada Formlar gerekir):

import { 
    MatButtonModule, 
    MatCardModule, 
    MatIconModule, 
    MatInputModule, 
    MatProgressSpinnerModule, 
    MatDialogModule, 
    MatCheckboxModule 
} from '@angular/material'; 

// ... not important 

beforeEach(async(() => { 
    TestBed.configureTestingModule({ 
     declarations: [ WelcomeComponent ], 
     imports: [ 
     NoopAnimationsModule, 
     FormsModule, 
     ReactiveFormsModule, 
     MatButtonModule, 
     MatCardModule, 
     MatIconModule, 
     MatInputModule, 
     MatProgressSpinnerModule, 
     MatDialogModule, 
     MatCheckboxModule 
     ], 
     providers: [ 
     // ... 
     ] 
    }) 
    .compileComponents(); 
    })); 

Answer 3

md-simge artık Açısal Malzemesinin son sürümlerinde kullanılabilir. Tüm etiketler/elemanlar şimdi "md" yerine "mat" ile ön tanımlıdır .. <mat-icon>