Angular2材质'md-icon'与Karma/Jasmine不是已知元素

Question

我正在使用 @ angular /素材2.0.0-alpha.11-3处理Angular2应用程序。 angular-cli 1.0.0- beta.19-3 因缘1.2.0 卡玛 - 茉莉1.0.2

运行它工作正常，但一对夫妇在模板上有一个按钮与MD-图标测试失败与模板错误：

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 

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

正如我理解它@角/材料现在包含导入，MaterialModule唯一需要的模块。我试图从@ angular2-material/icon导入MdIconModule，但没有成功。我究竟做错了什么 ？ 在此先感谢

Answer 1

按照yurzui的建议导入MaterialModule并创建组件后，将返回promise来解决它。谢谢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的回答以来，新版本的Angular材料发生了变化。我已经解决了这个问题，进口，因为我在做AppModule相同的模块（我还需要在这里表格）：

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-图标不再角材料的最新版本。所有标记/元素现在都以“mat”作为前缀而不是“md”。所以<md-icon> ..becomes .. <mat-icon>