Angular应用遇NullInjectorError: R3InjectorError(AppModule)[MatDialogConfig]求助

问题原因 #

你在AppModule的providers中全局配置了MatDialogRef和MAT_DIALOG_DATA的空对象提供者，这是错误的做法。这两个依赖是Angular Material在打开对话框时动态注入的，全局硬编码空值会破坏MatDialog的内部依赖注入链，导致MatDialogConfig无法被正确解析，从而抛出NullInjectorError。

修复步骤 #

1. 移除全局的MatDialogRef和MAT_DIALOG_DATA提供者 #

打开app.module.ts，删除providers数组中的以下两项：

{
    provide: MatDialogRef,
    useValue: {}
},
{provide: MAT_DIALOG_DATA, useValue: {}},

2. 确保对话框组件的模块配置正确 #

• 如果对话框组件属于某个功能模块（比如AdminDashboardModule），要在该模块中：
  • 导入MatDialogModule
  • 将对话框组件添加到declarations数组中（如果需要在其他模块使用，还要加到exports）
• 不要在根模块直接声明对话框组件，除非它是全局复用的基础组件

3. 检查对话框的打开方式 #

确保你是通过MatDialog.open()方法正确打开对话框，示例代码如下：

import { MatDialog } from '@angular/material/dialog';
import { EditRowDialogComponent } from './path/to/edit-row-dialog.component';

// 在组件的构造函数中注入MatDialog
constructor(private dialog: MatDialog) {}

// 打开对话框的方法
openEditRowDialog() {
  const dialogRef = this.dialog.open(EditRowDialogComponent, {
    width: '400px',
    data: { /* 这里传入你需要传递给对话框的数据 */ }
  });

  dialogRef.afterClosed().subscribe(result => {
    console.log('对话框已关闭', result);
  });
}

额外检查点 #

• 确认你的Angular Material版本与Angular核心版本兼容
• 对话框组件中的MatFormFieldControl提供者配置是否必要？如果你的组件不是自定义表单控件，建议移除这部分配置，避免不必要的依赖冲突：

  // 移除组件装饰器中的这部分
  providers: [
      {provide: MatFormFieldControl, useExisting: EditRowDialogComponent}
  ]
  

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