Angular 7升级至12时Angular Material模块导出报错如何解决

你遇到的报错是Angular Material版本迭代导致的导入规则变更：从v9版本开始，Angular Material不再支持从@angular/material根路径统一导入所有组件模块，所有组件的功能模块都需要从各自的独立子包路径导入，和Angular 7的写法完全不兼容。

• 第一步：版本一致性校验
  执行ng --version命令检查所有@angular前缀的依赖包版本，确保@angular/core、@angular/cli和@angular/material的大版本统一为v12.x，如果存在版本不一致的情况，先调整package.json中的版本号后重新安装依赖。
• 第二步：批量修改导入路径
  打开src/app/material.module.ts文件，把所有从@angular/material导入模块的写法，替换为对应组件的子包导入，规则为@angular/material/[组件小写名称]，举例如下：
  • 原MatAutocompleteModule改为从@angular/material/autocomplete导入
  • 原MatButtonModule改为从@angular/material/button导入
  • 原MatInputModule改为从@angular/material/input导入
  • 原MatDialogModule改为从@angular/material/dialog导入
  • 原MatNativeDateModule等通用模块改为从@angular/material/core导入
    其余组件全部按照同样的规则调整即可。
• 第三步：清理缓存重启项目
  修改完成后，删除项目根目录的node_modules文件夹、package-lock.json或yarn.lock锁文件，执行npm install重新安装依赖，之后启动项目即可解决报错。

// 旧写法（v7及更早版本支持，v9+版本废弃）
import { MatAutocompleteModule, MatButtonModule, MatInputModule, MatNativeDateModule } from '@angular/material';

// 新写法（v9+版本要求）
import { MatAutocompleteModule } from '@angular/material/autocomplete';
import { MatButtonModule } from '@angular/material/button';
import { MatInputModule } from '@angular/material/input';
import { MatNativeDateModule } from '@angular/material/core';

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