Angular2 材質“md-icon”不是已知元素

Question

我有使用@angular2-material 2.0.0-alpha.8-2 版本的angular2 應用程序。 一切正常。 現在我決定將材料版本升級到最新版本，即 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 已從 @angular2-material/... 包更改為 @angular/material 下的單個包。伴隨此更改，還有一個新的 NgModule MaterialModule ，它包含所有組件。”

所以我刪除了明確導入的材料模塊並將其更改為：

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

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

在此更改后，我收到以下錯誤

'md-icon' 不是已知元素：

1. 如果 'md-icon' 是一個 Angular 組件，那么驗證它是否是這個模塊的一部分。
2. 如果 'md-icon' 是一個 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

您需要在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 { }

Answer 3

如果您加載這樣的子模塊：

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

然后在子模塊中，您必須再次導入 MaterialModule。 例如

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

Answer 4

添加

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

Answer 5

使用 mat-icon 的兩個步驟：

1. 將此插入到 index.html 文件中。

    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

2. 將此行插入 app.module.ts 文件中。 如果執行延遲加載，則將其包含在該模塊或 sharedModule 中。

    import { MatIconModule } from '@angular/material/icon';

Answer 6

解決方案是添加 md-icon、md-input 等模塊和樣式表。

您還需要在 app.module.ts 中添加 CUSTOM_ELEMENTS_SCHEMA，如下所示：

import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';

然后添加

providers: [],
bootstrap: [AppComponent],
schemas: [CUSTOM_ELEMENTS_SCHEMA]

Answer 7

將此添加到 index.html：

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

並添加到 app.module.ts 文件中：

import {
  MatIconModule
} from '@angular/material';

imports: [MatIconModule]