Angular2 material 'md-icon' 不是已知元素
Angular2 material 'md-icon' is not a known element
我有一个使用 @angular2-material 2.0.0-alpha.8-2 版本的 angular2 应用程序。一切正常。
现在我决定将 material 版本升级到最新版本,即 2.0.0-alpha.9-3。我遵循了 GETTING_STARTED 中提到的步骤。
早些时候我已经导入了如下各个模块:
@NgModule({
imports: [
BrowserModule,
FormsModule,
HttpModule,
RouterModule,
MdIconModule,
MdButtonModule,
MdCardModule,
MdCheckboxModule,
....
....
但是 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."
所以我删除了显式导入的 material 模块并将其更改为:
@NgModule({
imports: [
BrowserModule,
FormsModule,
HttpModule,
RouterModule,
MaterialModule.forRoot(),
....
....
此更改后出现以下错误
'md-icon' 不是已知元素:
- 如果 'md-icon' 是一个 Angular 组件,则验证它是该模块的一部分。
- 如果 'md-icon' 是 Web 组件,则将 "CUSTOM_ELEMENTS_SCHEMA" 添加到此组件的“@NgModule.schemas”以禁止显示此消息。
我是否需要显式导入单个模块,或者如更改日志中所述,MaterialModule 包含所有组件,我不应该显式导入单个模块?如果我不应该导入单个模块,那么错误的来源是什么?
export
部分呢?你在那里提供了MaterialModule
吗?
@NgModule({
imports: [
MaterialModule.forRoot()
],
exports: [
MaterialModule
]
})
记得在 index.html:
中提供图标样式
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
之后您应该可以在视图中使用图标了:
<md-icon>delete</md-icon>
如果您像这样加载子模块:
{path: 'childModule', loadChildren: 'app/child/child.module#childModule'}
然后在子模块中,您必须再次导入 MaterialModule。
例如
@NgModule({
imports: [
sharedModules,
childRouting,
MaterialModule.forRoot()
],
declarations: [
],
providers: []
})
export class childModule {
}
添加
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
到index.html
和 <i class="material-icons">delete</i>
而不是 <md-icon>delete</md-icon>
您需要在 app.module.ts 中导入 MatIconModule 并将其添加到同一文件中的导入数组中。
例如这样:
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 { }
添加这个
到 index.html:
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
并添加到 app.module.ts 文件中:
import {
MatIconModule
} from '@angular/material';
imports: [MatIconModule]
解决方案是添加 md-icon、md-input 等模块和样式 sheet。
您还需要在 app.module.ts 中添加 CUSTOM_ELEMENTS_SCHEMA:
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
然后添加
providers: [],
bootstrap: [AppComponent],
schemas: [CUSTOM_ELEMENTS_SCHEMA]
使用mat-icon的两个步骤:
将其插入 index.html 文件。
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet">
将此行插入 app.module.ts 文件。如果执行延迟加载则包含它
在该模块或 sharedModule 中。
import { MatIconModule } from '@angular/material/icon';
我有一个使用 @angular2-material 2.0.0-alpha.8-2 版本的 angular2 应用程序。一切正常。 现在我决定将 material 版本升级到最新版本,即 2.0.0-alpha.9-3。我遵循了 GETTING_STARTED 中提到的步骤。 早些时候我已经导入了如下各个模块:
@NgModule({
imports: [
BrowserModule,
FormsModule,
HttpModule,
RouterModule,
MdIconModule,
MdButtonModule,
MdCardModule,
MdCheckboxModule,
....
....
但是 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."
所以我删除了显式导入的 material 模块并将其更改为:
@NgModule({
imports: [
BrowserModule,
FormsModule,
HttpModule,
RouterModule,
MaterialModule.forRoot(),
....
....
此更改后出现以下错误
'md-icon' 不是已知元素:
- 如果 'md-icon' 是一个 Angular 组件,则验证它是该模块的一部分。
- 如果 'md-icon' 是 Web 组件,则将 "CUSTOM_ELEMENTS_SCHEMA" 添加到此组件的“@NgModule.schemas”以禁止显示此消息。
我是否需要显式导入单个模块,或者如更改日志中所述,MaterialModule 包含所有组件,我不应该显式导入单个模块?如果我不应该导入单个模块,那么错误的来源是什么?
export
部分呢?你在那里提供了MaterialModule
吗?
@NgModule({
imports: [
MaterialModule.forRoot()
],
exports: [
MaterialModule
]
})
记得在 index.html:
中提供图标样式<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
之后您应该可以在视图中使用图标了:
<md-icon>delete</md-icon>
如果您像这样加载子模块:
{path: 'childModule', loadChildren: 'app/child/child.module#childModule'}
然后在子模块中,您必须再次导入 MaterialModule。 例如
@NgModule({
imports: [
sharedModules,
childRouting,
MaterialModule.forRoot()
],
declarations: [
],
providers: []
})
export class childModule {
}
添加
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
到index.html
和 <i class="material-icons">delete</i>
而不是 <md-icon>delete</md-icon>
您需要在 app.module.ts 中导入 MatIconModule 并将其添加到同一文件中的导入数组中。
例如这样:
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 { }
添加这个 到 index.html:
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
并添加到 app.module.ts 文件中:
import {
MatIconModule
} from '@angular/material';
imports: [MatIconModule]
解决方案是添加 md-icon、md-input 等模块和样式 sheet。
您还需要在 app.module.ts 中添加 CUSTOM_ELEMENTS_SCHEMA:
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
然后添加
providers: [],
bootstrap: [AppComponent],
schemas: [CUSTOM_ELEMENTS_SCHEMA]
使用mat-icon的两个步骤:
将其插入 index.html 文件。
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
将此行插入 app.module.ts 文件。如果执行延迟加载则包含它 在该模块或 sharedModule 中。
import { MatIconModule } from '@angular/material/icon';