Angular2-Material 'md-icon' ist kein bekanntes Element mit Karma/Jasmin

Question

Ich arbeite an einer Angular2-Anwendung mit @ angular/Material 2.0.0-alpha.11-3 angular-cli 1.0.0- beta.19-3 Karma 1.2.0 Karma-Jasmin 1.0.2

Lauf es funktioniert gut, aber ein paar von den Tests, bei denen die Vorlage eine Schaltfläche mit md-Symbol hat nicht mit Template-Fehler:

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 

Meine 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:

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

Wie ich es @ Winkel/Material verstanden, enthält nun das einzige Modul importiert werden benötigt, MaterialModule. Ich habe versucht, das MdIconModule von @ angular2-material/icon ohne Erfolg zu importieren. Was mache ich falsch ? Vielen Dank im Voraus

Answer 1

Das Importieren des MaterialModules wie von yurzui vorgeschlagen und das Erstellen der Komponente, nachdem das Versprechen zurückgegeben wurde, löste es. Danke yurzui

Answer 2

Die Dinge haben sich in neueren Versionen von Angular Material seit javahaxxors Antwort geändert. Ich dieses Problem gelöst habe mit dem Import gleiche Module wie ich in AppModule tun (ich brauche auch Formulare hier):

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-Symbol nicht mehr in den neuesten Versionen von Angular-Material zur Verfügung steht. Alle Tags/Elemente haben nun das Präfix "mat" anstelle von "md". So <md-icon> .. wird .. <mat-icon>