Angular Material Tab Groups导入报错求助：NG2011错误解决

错误原因 #

NG2011错误的核心原因是：MatTab和MatTabGroup不是独立组件，不能直接添加到NgModule的imports数组中，必须导入它们所属的MatTabsModule模块才能正常使用。

解决方案 #

1. 修改导入语句：将直接导入组件的代码替换为导入对应的模块
2. 更新NgModule的imports数组：移除MatTab和MatTabGroup，添加MatTabsModule

修改后的app.module.ts代码 #

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { MatCardModule } from '@angular/material/card';
import { MatButtonModule } from '@angular/material/button'
// 替换为导入MatTabsModule
import { MatTabsModule } from '@angular/material/tabs'

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MainCardComponent } from './panel/main-card/main-card/main-card.component';
import { PanelHeaderComponent } from './panel/panel-header/panel-header.component';
import { PanelTabsComponent } from './panel/panel-tabs/panel-tabs/panel-tabs.component';


@NgModule({
  declarations: [
    AppComponent,
    MainCardComponent,
    PanelHeaderComponent,
    PanelTabsComponent,
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    BrowserAnimationsModule,
    MatCardModule,
    MatButtonModule,
    // 移除MatTab和MatTabGroup，添加MatTabsModule
    MatTabsModule
    
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

原理说明 #

Angular Material的组件采用模块化封装，所有与标签页相关的组件（MatTab、MatTabGroup）、指令都被包含在MatTabsModule中。只有导入这个模块，Angular才能识别模板中的<mat-tab-group>和<mat-tab>标签，同时避免非独立组件直接导入的NG2011错误。

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