错误：模板解析错误：“ mat-card”不是已知元素：

Question

我大约两个月前开始了Angular 4 Material项目，当时安装了所有当前的npm，并且正在使用material.angular.io中的大多数组件。从那时起，Angular 5.0.0已经推出。我通过项目在新的更新上进行了重建，并且控制台出现以下错误。

错误：模板解析错误：'mat-card'不是已知元素：1.如果'mat-card'是Angular组件，则请验证它是否属于此模块。2.如果“ mat-card”是Web组件，则将“ CUSTOM_ELEMENTS_SCHEMA”添加到该组件的“ @ NgModule.schemas”以禁止显示此消息。

我已经检查了安装，并相信我已经拥有了所有当前功能，但是以前可以运行的代码现在失败了。这是A5的新要求，还是材料包装尚未准备就绪？

Answer 1

在Angular 6中

app.module.ts：

import { MatCardModule } from '@angular/material';
...
@NgModule({
    declarations: [
    AppComponent,...
],
imports: [
...
MatCardModule,
....
]
...

}）

的HTML：

<mat-card>
    <p>
    it works!
    </p>
</mat-card>

Answer 2

哇！我又遇到了这个问题，并认真地研究了一下。如果您遵循某些文档（例如 Material Side-Nav 模块），您可能会被引导在 app.module.ts 中拆分 @NgModule 声明，以将导出与其余部分分开，如下所示...

@NgModule({
   exports: [
      myModule,
      anotherModule
   ],
})
export class MaterialModule {}

@NgModule({
   imports: [
      ... all the rest of your stuff]
   declarations: [
      ... all your custom Components
})
export class AppModule {}

在这种情况下，在拆分它们之后，当您稍后使用...添加更多自定义组件时

ng g component components/myNewModule

它可能会在其他 @NgModule 部分下放置一个新的附加“声明：”，从而破坏对这些组件的垫卡等内容的访问！只需将新添加的声明移至其他声明，问题就会消失。

我测试了两次，如果出现错误：模板解析错误：“mat-card”不是上面的已知元素，它似乎可以解决问题。