IntelliJ IDEA提示Unknown html tag mat-card标签检测问题求助

项目端配置排查 #

• 先确认项目已安装Angular Material相关依赖，可在项目根目录执行以下命令安装：
  npm install @angular/material @angular/cdk @angular/animations
• 确认在使用mat-card的对应模块中已导入MatCardModule，可参考以下配置（通常在AppModule或业务模块、共享模块的ts文件中修改）：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { MatCardModule } from '@angular/material/card'; // 导入卡片组件对应模块

import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    MatCardModule // 加入导入列表
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

注意：Angular Material 9及以上版本已废弃全局导入Material模块的用法，必须按需单独导入每个组件对应的模块，未导入MatCardModule会导致组件无法识别，同时IDE也会抛出标签未知提示

IDE端配置排查 #

如果确认项目配置无误仍有提示，按以下步骤操作：

• 打开IDEA设置，依次进入语言和框架 > Angular，确认已开启Angular支持，且勾选了启用Angular语言服务选项
• 右键点击项目根目录，选择重新加载从 > Gradle/Maven（根据项目使用的构建工具选择），刷新项目索引
• 若仍未解决，点击顶部菜单文件 > 无效缓存并重启，清除IDE缓存后重新加载项目
• 特殊场景下可以进入设置 > 编辑器 > 检查 > HTML > 未知HTML标签，将mat-card加入自定义标签白名单即可消除提示

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