Angular2材质'md-icon'在Karma/Jasmine中不是已知元素 [英] Angular2 material 'md-icon' is not a known element with Karma / Jasmine

问题描述

我正在使用Angular2应用程序 @角度/材质2.0.0-alpha.11-3 角cli 1.0.0-beta.19-3 业力1.2.0 业力茉莉1.0.2

I'm working on an Angular2 application using @angular/material 2.0.0-alpha.11-3 angular-cli 1.0.0-beta.19-3 karma 1.2.0 karma-jasmine 1.0.2

运行正常，但在其中模板带有带有md-icon的按钮的一些测试中，由于模板错误而失败:

Running it works fine but a couple of the tests where the template has a button with md-icon fail with template errors:

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:

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

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/material现在包含导入所需的唯一模块，即MaterialModule.我尝试从@ angular2-material/icon导入MdIconModule，但未成功.我究竟做错了什么 ? 预先感谢

As I understood it @angular/material now contains the only module needed to import, MaterialModule. I tried importing the MdIconModule from @angular2-material/icon with no success. What am i doing wrong ? Thanks in advance

推荐答案

按照yurzui的建议导入MaterialModule，并在返回承诺后创建组件，从而解决了该问题.谢谢你yurzui

Importing the MaterialModule as suggested by yurzui and creating the component after the promise is returned solved it. Thank you 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();
  });
});

这篇关于Angular2材质'md-icon'在Karma/Jasmine中不是已知元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！