[英]Angular2 material 'md-icon' is not a known element with Karma / Jasmine
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我正在使用 @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 开发 Angular2 应用程序
Running it works fine but a couple of the tests where the template has a button with md-icon fail with template errors:运行它工作正常,但模板有一个带有 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
My app.module.ts:我的 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();
});
});
As I understood it @angular/material now contains the only module needed to import, MaterialModule.据我了解,@angular/material 现在包含唯一需要导入的模块 MaterialModule。 I tried importing the MdIconModule from @angular2-material/icon with no success.
我尝试从 @angular2-material/icon 导入 MdIconModule,但没有成功。 What am i doing wrong ?
我究竟做错了什么 ? Thanks in advance
提前致谢
Importing the MaterialModule as suggested by yurzui and creating the component after the promise is returned solved it.按照 yurzui 的建议导入 MaterialModule 并在返回承诺后创建组件解决了它。 Thank you yurzui
谢谢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();
});
});
Things've changed in newer versions of Angular Material since @javahaxxor's answer.自@javahaxxor 的回答以来,较新版本的 Angular Material 发生了变化。 I've resolved this problem with importing same modules as I do in
AppModule
(I also need Forms here):我已经通过导入与
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();
}));
md-icon is no longer available in the latest versions of Angular Material. md-icon在最新版本的 Angular Material 中不再可用。 All tags/elements are now prefixed with "mat" instead of "md".. So
<md-icon>
..becomes.. <mat-icon>
所有标签/元素现在都以“mat”而不是“md”为前缀..所以
<md-icon>
..becomes.. <mat-icon>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.