Angular12执行ng build报错MAT_DIALOG_DATA不在@angular/material中如何解决

根本原因 #

Angular Material 9.0及以上版本已废弃从@angular/material根路径直接导入组件、注入令牌的写法，所有资源都需要从对应子包路径导入。你当前使用的12.x版本已经完全移除了根路径下的MAT_DIALOG_DATA导出，因此触发编译报错。

修复步骤 #

• 修正dialog相关导入路径
  将my.component.ts中的导入语句替换为：

  import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
  

  构造函数中@Inject(MAT_DIALOG_DATA)的使用逻辑无需改动。
• 排查其余同类型错误
  如果项目中还存在其他从@angular/material根路径直接导入的代码，需要同步修改为对应子包导入，示例：

  // 错误写法
  import { MatButton } from '@angular/material';
  // 正确写法
  import { MatButton } from '@angular/material/button';
  

• 清理缓存重装依赖（可选，修改导入后仍报错时执行）
  依次执行以下命令：

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

• 验证修复
  执行ng build检查编译是否恢复正常。

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