Angular 角度2材料'；md图标'；不是已知的因果报应/茉莉花元素

我正在使用 @角度/材料2.0.0-alpha.11-3 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();
  });
});

从'@angular/core/testing'导入{async，ComponentFixture，TestBed}；
从“@angular/platform browser”导入{By}”；
从“@angular/core”导入{DebugElement}；
从“./watchpanel.component”导入{WatchpanelComponent}；
描述（'WatchpanelComponent'，（）=>{
let组件：watchpanel组件；
let夹具：组件夹具；
beforeach（异步（（）=>{
TestBed.configureTestingModule({
声明：[WatchpanelComponent]//声明测试组件
})
.compileComponents（）；
fixture=TestBed.createComponent（WatchpanelComponent）；
组件=fixture.componentInstance；
fixture.detectChanges（）；
}));
//在每个之前（（）=>{
//fixture=TestBed.createComponent（WatchpanelComponent）；
//组件=fixture.componentInstance；
//fixture.detectChanges（）；
// });
它（'应该创建'，（）=>{
expect（component.toBeTruthy（）；
});
});

据我所知，@angular/material现在包含导入所需的唯一模块MaterialModule。我尝试从@angular2材质/图标导入MdIconModule，但没有成功。我做错了什么？

---

提前感谢

按照yurzui的建议导入MaterialModule，并在承诺返回后创建组件。谢谢你，尤瑞

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

从'@angular/core/testing'导入{async，ComponentFixture，TestBed}；
从“@angular/platform browser”导入{By}”；
从“@angular/core”导入{DebugElement}；
从“./watchpanel.component”导入{WatchpanelComponent}；
从'@angular/forms'导入{FormsModule}；
从“@angular/material”导入{MaterialModule}；
描述（'WatchpanelComponent'，（）=>{
let组件：watchpanel组件；
let夹具：组件夹具；
beforeach（异步（（）=>{
TestBed.configureTestingModule({
导入：[MaterialModule.forRoot（）]，
//forRoot（）已弃用
//在以后的版本中------^
声明：[WatchpanelComponent]//声明测试组件
})
.compileComponents（）。然后（（）=>{
fixture=TestBed.createComponent（WatchpanelComponent）；
组件=fixture.componentInstance；
fixture.detectChanges（）；
});
}));
//在每个之前（（）=>{
//fixture=TestBed.createComponent（WatchpanelComponent）；
//组件=fixture.componentInstance；
//fixture.detectChanges（）；
// });
它（'应该创建'，（）=>{
expect（component.toBeTruthy（）；
});
});

自从@javahaxxor的回答以来，在新版本的角度材质中，情况发生了变化。我已经通过导入与我在

AppModule

中相同的模块解决了这个问题（这里我还需要表单）：

md图标在最新版本的Angular Material中不再可用。所有标记/元素现在都以“mat”而不是“md”作为前缀。。因此，

。变成<代码>

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