Angular组件注入MatDialogRef遇NullInjectorError：无提供者问题解决

错误原因 #

你的TaskFormComponent同时支持两种使用场景：

• 直接作为组件渲染（<app-task-form>）
• 作为MatDialog的内容打开
  当组件被直接渲染时，Angular无法提供MatDialogRef实例——这个服务仅在组件通过MatDialog.open()打开时才会由Angular自动注入，因此触发了NullInjectorError。

修复步骤 #

1. 将MatDialogRef改为可选注入 #

在task-form.component.ts的构造函数中，给dialogRef添加@Optional()装饰器，让Angular在没有提供者时注入null而非报错：

constructor(
  @Optional() private dialogRef: MatDialogRef<TaskFormComponent>,
  private taskService: TaskService,
  @Optional()
  @Inject(MAT_DIALOG_DATA)
  public data: { fromPopup: boolean }
) {}

2. 增加空值检查避免运行时错误 #

修改onSubmit方法，确保调用dialogRef.close()前先检查dialogRef是否存在：

public onSubmit() {
  if (this.fromPopup && this.dialogRef) {
    this.dialogRef.close(this.taskForm.getRawValue());
  } else {
    this.taskService.createTask(this.taskForm.getRawValue());
  }
}

3. 确保组件依赖的模块已导入 #

由于TaskFormComponent使用了响应式表单，需要在组件的imports数组中添加ReactiveFormsModule；同时要确保MatDialog的依赖已正确提供：

• 在task-form.component.ts的组件元数据中添加：

@Component({
  selector: 'app-task-form',
  standalone: true,
  imports: [ReactiveFormsModule],
  // 其余模板、样式等元数据
})

• 在main.ts的bootstrap配置中提供MatDialog的依赖：

bootstrapApplication(App, {
  providers: [
    TaskDialogService,
    TaskService,
    importProvidersFrom(MatDialogModule)
  ]
});

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