Angular Material 19注入MatDialogRef提示No provider错误求助

核心原因 #

当通过MatDialog.open()打开组件时，MatDialogRef是由弹窗的动态注入器提供的。如果你的BarComponent被提前声明在NgModule的declarations/imports中，Angular会使用模块注入器解析依赖，而模块注入器中没有MatDialogRef的提供者，从而触发报错。

具体解决步骤 #

1. 移除BarComponent的模块声明（独立组件模式） #

因为你的BarComponent是独立组件（包含imports数组），不要将它添加到任何NgModule的declarations或imports数组中。通过dialog.open()打开时，Angular会动态创建组件实例并自动提供MatDialogRef。

2. 优化注入逻辑（可选，适配组件复用场景） #

如果BarComponent可能被直接在页面中使用（而非仅作为弹窗），可以添加{ optional: true }配置避免非弹窗场景报错：

import { inject } from '@angular/core';
import { MatDialogRef } from '@angular/material/dialog';

@Component({
  standalone: true,
  imports: [CommonModule],
  // 补充template、selector等配置
})
export class BarComponent {
  private dialogRef = inject(MatDialogRef, { optional: true });

  closeDialog() {
    this.dialogRef?.close();
  }
}

3. 确认MatDialogModule的导入位置 #

仅在打开弹窗的FooComponent中导入MatDialogModule（独立组件的imports数组，或所在NgModule的imports数组），BarComponent无需导入该模块：

import { inject } from '@angular/core';
import { MatDialog, MatDialogModule } from '@angular/material/dialog';
import { BarComponent } from './bar.component';

@Component({
  standalone: true,
  imports: [MatDialogModule],
  // 补充template、selector等配置
})
export class FooComponent {
  private dialog = inject(MatDialog);

  openDialog(): void {
    const dialogRef = this.dialog.open<string>(BarComponent, {});
    dialogRef.closed.subscribe(result => {
      console.log('The dialog was closed');
    });
  }
}

额外注意 #

• 不要在BarComponent的providers数组中手动添加MatDialogRef，这会覆盖弹窗提供的实例，导致功能异常。
• 若使用NgModule模式（非独立组件），需确保模块导入MatDialogModule，且BarComponent无需添加到entryComponents（Angular 9+已自动处理）。

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