Angular2材料'md-icon'不是一个已知元素 [英] Angular2 material 'md-icon' is not a known element

问题描述

我有angular2应用程序，它使用的是@ angular2-material 2.0.0-alpha.8-2版本.一切正常. 现在，我决定将材料版本升级到最新版本，即2.0.0-alpha.9-3.我遵循了 GETTING_STARTED 中提到的步骤. 早些时候，我导入了以下单个模块:

I have angular2 application which is using @angular2-material 2.0.0-alpha.8-2 version. Everything works fine. Now I decided to upgrade material version to latest i.e. 2.0.0-alpha.9-3. I followed steps mentioned in GETTING_STARTED. Earlier I had imported individual modules as below:

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

    MdIconModule,
    MdButtonModule,
    MdCardModule,
    MdCheckboxModule,

    ....
    ....  

但是2.0.0-alpha.9-3版本的更改日志说:

However change log of 2.0.0-alpha.9-3 version says:

"Angular Material已从@ angular2-material/...包更改为@ angular/material下的单个包.伴随此更改，还有一个新的NgModule MaterialModule，其中包含所有组件."

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

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

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"不是已知元素:

'md-icon' is not a known element:

1. 如果"md-icon"是Angular组件，则请验证它是否属于此模块.
2. 如果"md-icon"是Web组件，则将"CUSTOM_ELEMENTS_SCHEMA"添加到该组件的"@ NgModule.schemas"以禁止显示此消息.

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

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? If I shouldn't import individual modules then what could be source of error?

推荐答案

export部分如何?您在那提供MaterialModule吗?

What about the export section? Did you provide MaterialModule there?

@NgModule({
  imports: [
    MaterialModule.forRoot()
  ],
  exports: [
    MaterialModule
  ]
})

请记住在index.html中提供图标样式:

Remember to provide icon styles in your 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>

这篇关于Angular2材料'md-icon'不是一个已知元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！