自定义Angular Material模块后报无导出成员错误如何解决？

报错原因 #

对应报错信息：

Module '"@angular/material"' has no exported member "...."

本质是 Angular Material v9及以上版本不再支持从@angular/material根路径统一导入所有组件模块，所有组件模块需要从各自独立的子包路径单独导入。

修复步骤 #

• 第一步：修改material.module.ts中的导入语句，替换为各组件对应的子路径导入，修改后的完整代码如下：

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

// 各组件从独立子路径导入
import { MatButtonModule } from '@angular/material/button';
import { MatToolbarModule } from '@angular/material/toolbar';
import { MatIconModule } from '@angular/material/icon';
import { MatBadgeModule } from '@angular/material/badge';
import { MatSidenavModule } from '@angular/material/sidenav';
import { MatListModule } from '@angular/material/list';
import { MatGridListModule } from '@angular/material/grid-list';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatInputModule } from '@angular/material/input';
import { MatSelectModule } from '@angular/material/select';
import { MatRadioModule } from '@angular/material/radio';
import { MatDatepickerModule } from '@angular/material/datepicker';
import { MatNativeDateModule } from '@angular/material/core';
import { MatChipsModule } from '@angular/material/chips';
import { MatTooltipModule } from '@angular/material/tooltip';
import { MatTableModule } from '@angular/material/table';
import { MatPaginatorModule } from '@angular/material/paginator';

@NgModule({
  imports: [
    CommonModule,
    MatButtonModule,
    MatToolbarModule,
    MatIconModule,
    MatSidenavModule,
    MatBadgeModule,
    MatListModule,
    MatGridListModule,
    MatFormFieldModule,
    MatInputModule,
    MatSelectModule,
    MatRadioModule,
    MatDatepickerModule,
    MatNativeDateModule,
    MatChipsModule,
    MatTooltipModule,
    MatTableModule,
    MatPaginatorModule
  ],
  exports: [
    MatButtonModule,
    MatToolbarModule,
    MatIconModule,
    MatSidenavModule,
    MatBadgeModule,
    MatListModule,
    MatGridListModule,
    MatInputModule,
    MatFormFieldModule,
    MatSelectModule,
    MatRadioModule,
    MatDatepickerModule,
    MatChipsModule,
    MatTooltipModule,
    MatTableModule,
    MatPaginatorModule
  ],
  providers: [
    MatDatepickerModule
  ]
})
export class AngularMaterialModule { }

• 第二步：如果此前未完成Angular Material初始化配置，先运行ng add @angular/material完成主题、浏览器动画、字体样式的基础配置。
• 第三步：保存文件后重新执行ng serve启动项目，报错即可消除。

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