关于angular：错误：模板解析错误：’mat-card’不是一个已知元素：

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

大约两个月前，我启动了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的新要求，还是材料package尚未准备就绪？

相关讨论

在Angular 6中

app.module.ts：

1
2
3
4
5
6
7
8
9
10
11
12

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

})

html：

1
2
3
4
5

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

哇！我再次遇到了这个问题，并且真的很想办法解决这个问题。如果您遵循某些文档(例如Material Side-Nav模块)之类的内容，则可能会导致您在app.module.ts中拆分@NgModule声明，以将导出与其他导出分开，例如...

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

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

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

在这种情况下，将它们拆分后，以后再使用...添加更多自定义组件时。

1	ng g component components/myNewModule

它可能会在另一个@NgModule部分下添加一个新的附加"声明："，从而破坏了对这些组件的垫卡之类的访问！只需将新添加的声明移至其他声明，问题就会消失。

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

相关讨论

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

1
2
3

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

然后我一次将一个组件复制到components文件夹中。对于每个副本，我都会提供服务，并修复每个问题(例如将导入添加到app.module.ts文件等)。我只在当前良好的代码需要它们时才安装npm组件。

1	npm install myComponent --save

在我前进的过程中，我发现了一些过时的md元素(例如md卡)，并将其转换为其mat-element版本。有趣的是，显然在Angular 4中，它们支持相同组件的mat和md版本，但是在5中，它们似乎已弃用了某些版本。

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