14

大约两个月前，我开始了一个 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的新要求，还是材料包还没准备好？

4

4 回答 4

16

在角 6

app.module.ts：

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

})

html:

<mat-card>
    <p>
    it works!
    </p>
</mat-card>
于 2018-10-09T16:51:53.093 回答
5

哇！我再次遇到了这个问题，并真正深入研究它。如果您遵循 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-cards 之类的访问！只需将新添加的声明移至其他声明，问题就会消失。

我对此进行了两次测试，如果出现错误：模板解析错误：'mat-card' is not a known element above，它似乎可以解决问题。

于 2018-06-12T16:32:05.660 回答
3

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

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

于 2017-11-09T10:34:53.477 回答
0

我最终开始了一个新的应用程序......

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

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

npm install myComponent --save

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

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

于 2018-02-08T20:38:18.273 回答