Angular11使用mat-table报NG8001:'mat-table'不是已知元素如何解决

排查思路 #

• 确认使用<mat-table>的组件所属的业务模块，是否正确导入了存放MatTableModule的共享模块。共享模块仅导出模块、业务侧未引入的情况下，组件无法识别mat-table标签。
• 核对Angular Material、CDK版本与Angular 11的匹配性。Angular主包和Material大版本必须一致，版本不兼容会导致模块导出失效，可执行ng version查看全量依赖版本确认。
• 检查导入路径与模板拼写是否正确：Angular 11中MatTableModule必须从@angular/material/table导入，模板标签必须严格写为<mat-table>，大小写或拼写错误都会触发该报错。
• 排查模块是否存在循环依赖。共享模块与业务模块的循环引用会导致模块导入逻辑异常，可执行ng build --prod查看是否有循环依赖告警。

解决方案 #

• 业务模块未导入共享模块的场景：在使用mat-table的组件所属NgModule的imports数组中引入共享模块即可：

import { SharedModule } from './shared/shared.module';
@NgModule({
  imports: [
    SharedModule,
    // 其余业务依赖
  ],
  declarations: [YourTableComponent]
})
export class YourBusinessModule {}

• 版本不兼容的场景：卸载当前不匹配的Material/CDK包，安装对应11.x版本：

npm uninstall @angular/material @angular/cdk
npm install @angular/material@11 @angular/cdk@11

• 存在拼写/路径错误的场景：统一修正所有MatTableModule的导入路径，检查模板标签拼写无误即可。
• 以上操作均无效时，清空缓存重启本地服务：

rm -rf node_modules package-lock.json
npm install
ng serve

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