升级至Angular 14.2.12后Angular Material组件识别失败求助

核心问题定位 #

你遇到的mat-tab-group、mat-tab报NG8001错误，本质是对应的Angular Material模块未被导入到当前组件所属的NgModule中。从你提供的app.module.ts导入代码来看，完全没有引入MatTabsModule——而mat-tab-group和mat-tab正是这个模块下的组件。

分步解决 #

1. 导入并声明MatTabsModule #

找到PersoninfoComponent所属的NgModule（如果是在SharedModule里，就修改SharedModule；如果直接在AppModule里，就修改AppModule），添加以下导入：

import { MatTabsModule } from '@angular/material/tabs';

然后在模块的imports数组中加入MatTabsModule：

@NgModule({
  imports: [
    // 其他已导入的模块...
    MatTabsModule
  ],
  // 其他配置...
})
export class YourModuleName { }

2. 检查共享模块的导出（如果有使用共享模块） #

如果你的项目是通过SharedModule统一管理Material组件，确保MatTabsModule不仅被导入，还被添加到exports数组中，这样其他引用SharedModule的模块才能使用这些组件：

@NgModule({
  imports: [MatTabsModule],
  exports: [MatTabsModule]
})
export class SharedModule { }

3. 修复Typescript版本冲突 #

你的package.json中同时在dependencies和devDependencies里声明了不同版本的Typescript：

• dependencies里是"typescript": "^3.5.3"
• devDependencies里是"typescript": "~4.6.2"

Angular 14.2.x要求使用Typescript 4.6.x版本，低版本的Typescript会导致模块解析异常。删除dependencies中的Typescript依赖，只保留devDependencies里的版本，然后重新执行：

rm -rf node_modules package-lock.json
npm cache clean --force
npm install

4. 验证模块层级（针对懒加载或特性模块） #

如果PersoninfoComponent属于某个懒加载的特性模块，务必确保该特性模块直接导入了MatTabsModule，或者导入了包含MatTabsModule的SharedModule。Angular模块不会自动继承父模块的导入，特性模块需要单独声明所需的依赖模块。

5. 移除不必要的CUSTOM_ELEMENTS_SCHEMA #

CUSTOM_ELEMENTS_SCHEMA是用于Web Components的，Angular Material组件属于Angular组件，添加这个schema不仅不能解决问题，还可能掩盖其他潜在错误，建议从模块中移除该配置。

内容的提问来源于stack exchange，提问作者Peter The Angular Dude