Angular CDK Dialog动态DialogRef注入报错：No provider for DialogRef求助

核心问题在于：DialogRef不是模块级可提前声明的依赖，它是Angular CDK在调用dialog.open()创建弹窗组件时，动态注入到弹窗组件专属注入器中的实例。你在模块里配置{provide: APP_MAT_DIALOG_REF, useExisting: DialogRef}完全无效——此时不存在任何DialogRef实例，自然触发空注入错误。

1. 移除模块中无效的APP_MAT_DIALOG_REF配置 #

删除消费者模块providers数组里的APP_MAT_DIALOG_REF相关配置，这个令牌不需要在模块级别提前提供：

// 消费者模块
import {Dialog, DialogModule} from '@angular/cdk/dialog';

imports: [DialogModule],
providers: [
  {provide: APP_MAT_DIALOG, useExisting: Dialog},
  // 移除该行：{provide: APP_MAT_DIALOG_REF, useExisting: DialogRef},
],

2. 在弹窗组件内部映射自定义令牌 #

因为DialogRef是弹窗创建时动态注入的，我们需要在MyDialogComponent的组件层级配置自定义令牌到DialogRef的映射，同时保留@Optional()确保未引入CDK时不会报错：

// MyDialogComponent
import { Component, Optional, Inject } from '@angular/core';
import { DialogRef } from '@angular/cdk/dialog';
import { APP_MAT_DIALOG_REF } from './sample.model';

@Component({
  selector: 'app-my-dialog',
  template: '...',
  providers: [
    // 在组件层级将自定义令牌映射到动态注入的DialogRef
    { provide: APP_MAT_DIALOG_REF, useExisting: DialogRef }
  ]
})
export class MyDialogComponent {
  constructor(
    @Optional() @Inject(APP_MAT_DIALOG_REF) public dialogRef: any
  ) {}

  // 示例：关闭弹窗并传递结果
  close(confirmed: boolean) {
    this.dialogRef?.close(confirmed);
  }
}

3. 验证Tree Shaking效果 #

当用户未引入@angular/cdk/dialog时：

• APP_MAT_DIALOG会因@Optional()注入null，你的指令可自动降级到原生confirm
• MyDialogComponent中的dialogRef同样会注入null，不会引发注入错误
• 所有CDK相关代码会被Tree Shaking移除，因为没有被实际引用

如果不需要自定义令牌，可直接简化弹窗组件的注入逻辑，直接使用原生DialogRef加@Optional()：

constructor(@Optional() public dialogRef: DialogRef<any>) {}

这种写法更简洁，同样能满足可选依赖的需求。

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