Angular13引入MatCardModule后mat-card组件未识别编译报错

常见触发原因及修复步骤 #

按优先级依次排查以下问题：

• 模块作用域配置错误
  Angular 模块的导入作用域相互隔离，若LoginComponent不是声明在AppModule中，而是声明在独立的特性模块（如登录模块、权限模块、懒加载业务模块）中，仅在AppModule导入Material模块不会对特性模块下的组件生效。
  修复方式：找到声明LoginComponent的模块文件，确认该文件的declarations数组包含LoginComponent后，将组件用到的所有Material模块添加到该模块的imports数组中。

• 缺失必要模块导入
  你目前仅导入了卡片、公共模块、涟漪模块，模板中用到的其他Material组件、表单相关模块都未导入，这是全量Material组件报错的核心原因，需要补充导入以下模块：

  // mat-form-field、mat-error 依赖
  import { MatFormFieldModule } from '@angular/material/form-field';
  // matInput 指令依赖
  import { MatInputModule } from '@angular/material/input';
  // mat-raised-button 依赖
  import { MatButtonModule } from '@angular/material/button';
  // [formGroup] 响应式表单指令依赖
  import { ReactiveFormsModule } from '@angular/forms';
  

  将上述模块和你已写的MatCardModule一同放到对应模块的imports数组中。

• 编译缓存异常
  配置修改完成后如果仍报错，终止当前运行的ng serve进程，删除项目根目录下的.angular缓存文件夹，重新执行启动命令即可，多数偶发的模块识别错误都是缓存导致的。

额外配置检查（非本次报错原因，建议同步确认） #

确认你执行过ng add @angular/material完成依赖初始化，并且在angular.json的构建配置styles数组中引入了Material预构建主题（如@angular/material/prebuilt-themes/indigo-pink.css），否则后续会出现组件无样式的问题。

内容的提问来源于stack exchange，提问作者bilpor