Error: Template parse errors: 'mat-card' is not a known element:

Question

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

Error: Template parse errors: 'mat-card' is not a known element: 1. If 'mat-card' is an Angular component, then verify that it is part of this module. 2. If 'mat-card' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.

我已经检查了安装，并相信我拥有最新的所有内容，但之前可以运行的代码现在失败了。这是 A5 的新要求，还是 material 软件包还没有准备好？

Answer 1

您可以尝试从其单独的入口点（又名 @angular/material/card）导入 MatCardModule 吗？这对我有用。

如果你不提供任何代码，否则我真的帮不了你。

Answer 2

我最终启动了一个新应用...

npm cache clean -f
npm install -g n
ng new myAppName

然后我将我的组件一次一个地复制到组件文件夹中。对于每个副本，我运行 ng 服务，并修复每个问题（例如将导入添加到 app.module.ts 文件等）。我只在当前好的代码需要时才安装 npm 组件。

npm install myComponent --save

在进行过程中，我发现了一些过时的 md-elements（例如 md-card）并将它们转换为它们的 mat-element 版本。有趣的是，显然在 Angular 4 中，他们同时支持相同组件的 mat 和 md 版本，但在 5 中他们似乎弃用了一些。

这是一个漫长的下午，但它帮助我清除了我尝试并放弃的所有 npm 模块，现在一切都好了。

Answer 3

哇！我运行再次陷入这个问题，并且真正深入研究了它。如果您遵循 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 部分下放置一个新的、额外的 "declarations:"，从而中断对这些组件的访问，例如卡片！只需将新添加的声明向下移动到其他声明，问题就会消失。

我对此进行了两次测试，如果您收到错误：模板解析错误：'mat-card' 不是上面的已知元素，它似乎可以解决问题。

Answer 4

在Angular 6

app.module.ts:

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

})

html:

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

Error: Template parse errors: 'mat-card' is not a known element:

Error: Template parse errors: 'mat-card' is not a known element:

angular-material

angular

angular5