Materiał "md-icon" Angular2 nie jest znanym elementem z karmą/jaśminem

Question

Pracuję nad aplikacją Angular2 przy użyciu @ kątowa/materiał 2.0.0-alpha.11-3 kątowa-cli 1.0.0- beta.19-3 karma 1.2.0 karma-jaśmin 1.0.2

Running to działa dobrze, ale kilka prób, jeśli szablon ma przycisk z ikoną MD-nie z błędami szablon:

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 

Moja aplikacja.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:

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

Jak rozumie to @ kątową/materiału już zawiera tylko moduł potrzebne do importu MaterialModule. Próbowałem zaimportować MdIconModule z @ angleular2-material/icon bez powodzenia. Co ja robię źle ? Z góry dziękuję

Answer 1

Importowanie modułu materiału zgodnie z sugestią yurzui i tworzenie komponentu po powrocie obietnicy rozwiązało go. Dziękujemy 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

Rzeczy zmieniono w nowszych wersjach materiału kątowego od czasu odpowiedzi @ javahaxxor. Mam rozwiązany ten problem z importem same moduły, jak ja w AppModule (również potrzebne formularze tutaj):

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-ikona nie jest już dostępna w najnowszych wersjach kątowych materiału. Wszystkie tagi/elementy są teraz poprzedzone "matą" zamiast "md". Tak więc <md-icon> ..zamknięcia .. <mat-icon>