Angular2材料'md-icon'不是Karma / Jasmine的已知元素

Posted 2023-03-15

【中文标题】Angular2材料\'md-icon\'不是Karma / Jasmine的已知元素

【英文标题】：Angular2 material 'md-icon' is not a known element with Karma / JasmineAngular2材料'md-icon'不是Karma / Jasmine的已知元素

【发布时间】：2017-05-03 00:50:37

【问题描述】：

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

运行它工作正常，但是模板具有带有 md-icon 的按钮的几个测试因模板错误而失败：

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/material 现在包含唯一需要导入的模块 MaterialModule。我尝试从 @angular2-material/icon 导入 MdIconModule 没有成功。我究竟做错了什么 ？ 在此先感谢

【参考方案1】：

按照 yurzui 的建议导入 MaterialModule 并在返回承诺后创建组件解决了它。谢谢你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();
  );
);

【参考方案2】：

自从@javahaxxor 的回答以来，新版本的 Angular Material 发生了变化。我已经通过导入与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();
  ));

【参考方案3】：

md-icon 在最新版本的 Angular Material 中不再可用。所有标签/元素现在都以“mat”而不是“md”为前缀。所以<md-icon> ..成为..<mat-icon>