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

它可能会发布一个新的，额外的声明：＆＃34;在另一个@NgModule部分下，从而打破了对这些组件的mat-cards等访问！只需将新添加的声明向下移动到其他声明，问题就会消失。

我测试了两次这似乎解决了问题，如果你得到错误：模板解析错误：＆＃39; mat-card＆＃39;不是上面的已知元素。

Answer 3

您可以尝试从其单独的入口点（又名<table width="100%" cellpadding="0" cellspacing="5"> <tbody> <tr> <td><p>SOCIETES</p></td> <td><p>CONTACT</p></td> <td><p>EMAIL NOMINATIF</p></td> <td><p>OPT OUT</p></td> <td><p>LIGNES DIRECTES/MOBILES</p></td> </tr> </tbody> </table>）导入MatCardModule吗？这对我有用。

如果您不提供任何代码，我无法帮助您。

Answer 4

我最终开始使用新应用......

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

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

npm install myComponent --save

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

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

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

4 个答案: