MatTabHeader._checkPaginationEnabled报错：mat-tab-group无法正常运行求助

问题描述 #

我直接使用Angular Material官网Tabs组件的示例代码，严格遵循步骤操作，但mat-tab-group仍无法正常运行——mat-tab虽能显示，但控制台立即抛出MatTabHeader._checkPaginationEnabled错误。已参考两份教程，自认为app.module.ts配置无误，但尝试多种方法仍无法消除该错误，恳请帮助。

排查与解决方法 #

• 检查版本兼容性
  这是最常见的触发原因，必须保证Angular核心版本与Angular Material、Angular CDK版本完全匹配（比如Angular 16要搭配@angular/material@16.x）。版本不匹配会导致组件内部方法调用异常。
  查看当前版本：

  ng version
  

  若版本不匹配，重新安装对应版本：

  npm uninstall @angular/material @angular/cdk
  npm install @angular/material@<你的Angular版本号> @angular/cdk@<你的Angular版本号>
  

• 确认模块导入完整性
  检查app.module.ts是否同时导入MatTabsModule和BrowserAnimationsModule（动画模块是Material组件正常运行的必要条件），并正确加入imports数组，示例：

  import { NgModule } from '@angular/core';
  import { BrowserModule } from '@angular/platform-browser';
  import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
  import { MatTabsModule } from '@angular/material/tabs';
  
  import { AppComponent } from './app.component';
  
  @NgModule({
    declarations: [AppComponent],
    imports: [BrowserModule, BrowserAnimationsModule, MatTabsModule],
    providers: [],
    bootstrap: [AppComponent]
  })
  export class AppModule { }
  

• 清除缓存并重建项目
  缓存残留可能导致旧代码干扰，执行以下命令彻底重建：

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

• 检查模板代码规范
  确保mat-tab-group结构正确，无非法嵌套（比如不要在mat-tab内嵌套mat-tab-group除非是官方允许的场景），基础正确结构示例：

  <mat-tab-group>
    <mat-tab label="First"> Content 1 </mat-tab>
    <mat-tab label="Second"> Content 2 </mat-tab>
    <mat-tab label="Third"> Content 3 </mat-tab>
  </mat-tab-group>
  

• 确认CDK依赖安装
  确保@angular/cdk已正确安装，Tabs组件的分页逻辑依赖CDK的核心功能，缺失会触发内部方法错误。

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