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

4 回答

• 0

  哇！我再次遇到这个问题，并且真正挖掘出来解决这个问题 . 如果您按照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'不是上面的已知元素 .

  回复于 2024-04-29T06:14:07+08:00
• 0

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

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

  回复于 2024-04-29T06:14:07+08:00
• 1

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

  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模块，现在一切都在做饭 .

  回复于 2024-04-29T06:14:07+08:00
• 0

  在Angular 6中

  app.module.ts：

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

  }）

  HTML：

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

  回复于 2024-04-29T06:14:07+08:00