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

Posted 2023-03-07

【中文标题】Angular2 材质“md-icon”不是已知元素

【英文标题】：Angular2 material 'md-icon' is not a known element

【发布时间】：2017-03-10 12:40:55

【问题描述】：

我有使用 @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' 不是已知元素：

如果“md-icon”是一个 Angular 组件，则验证它是否是该模块的一部分。 如果“md-icon”是 Web 组件，则将“CUSTOM_ELEMENTS_SCHEMA”添加到该组件的“@NgModule.schemas”以禁止显示此消息。

我是否需要显式导入单个模块或如更改日志中所述 MaterialModule 包含所有组件并且我不应该显式导入单个模块？如果我不应该导入单个模块，那么可能是什么错误来源？

【问题讨论】：

对我来说，这只发生在 Karma/Jasmine 测试中，带有“模板解析错误：‘md-icon’不是已知元素”

【参考方案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>

【讨论】：

是的。我有材料图标样式包括在内。但是我们需要导出材质模块吗？我相信这已经被 MaterialModule 导出了。如果我再次导出它，它不会被导出两次并显示歧义错误，因为它将被导出两次？

如果您的应用中有多个模块。例如，您正在使用“sharedModule”，您需要重新导出要在导入“sharedModule”的模块中使用的模块。当您拥有一个模块应用程序时，我不确定它是如何工作的。我相信您有不止一个模块，这就是您遇到material 问题的原因。

嗯，现在这不适用于 NG 4.3.5 和 NG-material 2.0.0-beta8

【参考方案2】：

如果你像这样加载一个子模块：

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

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

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

【参考方案3】：

添加

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

【参考方案4】：

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

【讨论】：

这应该是新材料版本的公认答案

我已经做到了。在 app.module.ts 中导入单独的材质组件并导出。但两者都没有解决。材料模块甚至 ngForm 的错误似乎相同。但是，它也可以正常导入。

如果它仍然不起作用，请检查 NgModule 中不相关的语法错误，例如尝试导入不存在/已删除的模块。

【参考方案5】：

添加这个 到 index.html：

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

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

import 
  MatIconModule
 from '@angular/material';

imports: [MatIconModule]

【参考方案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]

【参考方案7】：

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