Angular2材料‘md-图标’不是已知的元素。

Question

我有angular2应用程序，它使用@angular2-资料2.0.0-字母表-2版本。一切都很好。现在，我决定将材料版本升级到最新版本，即2.0.0-字母表9-3。我遵循了STARTED中提到的步骤。之前，我导入了各个模块，如下所示：

@NgModule({
imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    RouterModule,

    MdIconModule,
    MdButtonModule,
    MdCardModule,
    MdCheckboxModule,

    ....
    ....  

然而，2.0.0-字母表-3版本的更改日志上写着：

角材料已从@angular2- Material /. package改为在@转角/材质下的单个包装。随着这一变化，出现了一种新的NgModule，MaterialModule，它包含所有组件。

因此，我删除了显式导入的材料模块，并将其更改为：

@NgModule({
imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    RouterModule,

    MaterialModule.forRoot(),
    ....
    ....

在此更改之后，我将得到以下错误

‘’md图标‘不是已知的元素：

1. 如果‘md-图标’是一个角组件，然后验证它是该模块的一部分。
2. 如果‘md-图标’是一个Web组件，那么将"CUSTOM_ELEMENTS_SCHEMA“添加到该组件的'@NgModule.schemas‘中，以抑制此消息。

我需要显式地导入各个模块还是如变更日志中提到的那样，MaterialModule包含所有组件，我不应该显式地导入各个模块？如果我不应该导入单独的模块，那么什么可能是错误的来源？

Answer 1

那么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>

Answer 2

您需要在MatIconModule中导入app.module.ts，并将其添加到同一文件中的imports数组中。

例如，就像这样：

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 { }

Answer 3

如果像这样加载子模块：

{path: 'childModule', loadChildren: 'app/child/child.module#childModule'}

然后，在子模块中，您必须再次导入MaterialModule。例如：

@NgModule({
    imports: [
        sharedModules,
        childRouting,
        MaterialModule.forRoot()
    ],
    declarations: [
    ],
    providers: []
})
export class childModule {
}