[英]Angular2 material 'md-icon' is not a known element
I have angular2 application which is using @angular2-material 2.0.0-alpha.8-2 version.我有使用@angular2-material 2.0.0-alpha.8-2 版本的angular2 应用程序。 Everything works fine.一切正常。 Now I decided to upgrade material version to latest ie 2.0.0-alpha.9-3.现在我决定将材料版本升级到最新版本,即 2.0.0-alpha.9-3。 I followed steps mentioned in GETTING_STARTED .我按照GETTING_STARTED 中提到的步骤进行操作。 Earlier I had imported individual modules as below:早些时候,我导入了以下单个模块:
@NgModule({
imports: [
BrowserModule,
FormsModule,
HttpModule,
RouterModule,
MdIconModule,
MdButtonModule,
MdCardModule,
MdCheckboxModule,
....
....
However change log of 2.0.0-alpha.9-3 version says:但是 2.0.0-alpha.9-3 版本的更改日志说:
"Angular Material has changed from @angular2-material/... packages to a single package under @angular/material . Along with this change, there is a new NgModule, MaterialModule , that contains all of the components." “Angular Material 已从 @angular2-material/... 包更改为 @angular/material 下的单个包。伴随此更改,还有一个新的 NgModule MaterialModule ,它包含所有组件。”
So I removed explicitly imported material modules and changed it to:所以我删除了明确导入的材料模块并将其更改为:
@NgModule({
imports: [
BrowserModule,
FormsModule,
HttpModule,
RouterModule,
MaterialModule.forRoot(),
....
....
After this change I am getting following error在此更改后,我收到以下错误
'md-icon' is not a known element: 'md-icon' 不是已知元素:
Do I need to import individual modules explicitly or as mentioned in change log MaterialModule contains all components and I should not explicitly import individual modules?我是否需要显式导入单个模块或如更改日志中提到的那样 MaterialModule 包含所有组件,我不应该显式导入单个模块? If I shouldn't import individual modules then what could be source of error?如果我不应该导入单个模块,那么错误的根源是什么?
What about the export
section? export
部分呢? Did you provide MaterialModule
there?你在那里提供MaterialModule
吗?
@NgModule({
imports: [
MaterialModule.forRoot()
],
exports: [
MaterialModule
]
})
Remember to provide icon styles in your index.html:请记住在 index.html 中提供图标样式:
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
After that you should be able to use icons in your views:之后,您应该能够在视图中使用图标:
<md-icon>delete</md-icon>
You need to import MatIconModule in app.module.ts and add it to your imports array in the same file.您需要在app.module.ts中导入MatIconModule并将其添加到同一文件中的导入数组中。
Like this for example:像这样例如:
import { BrowserModule } from "@angular/platform-browser";
import { NgModule } from "@angular/core";
import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
import { TreeModule } from "angular-tree-component";
import { HttpClientModule } from "@angular/common/http";
import { MatButtonModule } from "@angular/material/button";
import { MatIconModule } from "@angular/material/icon"; // <----- Here
import { EclassService } from "./services/eclass.service";
import { AppComponent } from "./app.component";
import { FormsModule } from "@angular/forms";
import { AsyncTreeComponent } from "./components/async-tree/async-tree.component";
@NgModule({
declarations: [
AppComponent,
AsyncTreeComponent
],
imports: [
BrowserModule, BrowserAnimationsModule, FormsModule, TreeModule, HttpClientModule, MatButtonModule, MatIconModule // <--- HERE
],
providers: [EclassService],
bootstrap: [AppComponent]
})
export class AppModule { }
if you load a child module like this:如果您加载这样的子模块:
{path: 'childModule', loadChildren: 'app/child/child.module#childModule'}
then in child module, you have to import MaterialModule again.然后在子模块中,您必须再次导入 MaterialModule。 eg例如
@NgModule({
imports: [
sharedModules,
childRouting,
MaterialModule.forRoot()
],
declarations: [
],
providers: []
})
export class childModule {
}
Add添加
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
to index.html
到index.html
and <i class="material-icons">delete</i>
instead of <md-icon>delete</md-icon>
和<i class="material-icons">delete</i>
而不是<md-icon>delete</md-icon>
Two steps to use mat-icon:使用 mat-icon 的两个步骤:
insert this into index.html file.将此插入到 index.html 文件中。
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
insert this line into app.module.ts file.将此行插入 app.module.ts 文件中。 If performing lazy loading then include it in that module or in sharedModule.如果执行延迟加载,则将其包含在该模块或 sharedModule 中。
import { MatIconModule } from '@angular/material/icon';
The solution is adding md-icon, md-input, etc modules and style sheet.解决方案是添加 md-icon、md-input 等模块和样式表。
You would also need to add CUSTOM_ELEMENTS_SCHEMA as below in app.module.ts:您还需要在 app.module.ts 中添加 CUSTOM_ELEMENTS_SCHEMA,如下所示:
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
then add然后添加
providers: [],
bootstrap: [AppComponent],
schemas: [CUSTOM_ELEMENTS_SCHEMA]
Add this to index.html:将此添加到 index.html:
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
and add to app.module.ts file this:并添加到 app.module.ts 文件中:
import {
MatIconModule
} from '@angular/material';
imports: [MatIconModule]
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.