Angular使用jsPDF导出PDF时报No provider for MatDialogRef错误如何修复

这个NullInjectorError: No provider for MatDialogRef报错的核心是MatDialogRef是Angular Material弹窗组件运行时的动态注入依赖，仅当组件通过MatDialog.open()方法作为弹窗打开时才会自动注入，你遇到这个问题是以下几种常见配置错误导致的：

1. 修正根模块(AppModule)配置 #

不要手动把MatDialogRef、MAT_DIALOG_DATA加到根模块的providers数组中，仅需要确保导入了MatDialogModule和动画依赖模块即可，示例配置如下：

// app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MatDialogModule } from '@angular/material/dialog';
import { AppComponent } from './app.component';
import { AuthLayoutComponent } from './auth-layout/auth-layout.component';
import { ServicesComponent } from './services/services.component';

@NgModule({
  declarations: [
    AppComponent,
    AuthLayoutComponent,
    ServicesComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    MatDialogModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

2. 移除弹窗组件的直接路由配置 #

AuthLayoutComponent是弹窗专用组件，不能直接配置为路由页面，如果你在路由表中添加了该组件的访问路径，直接删除即可，直接通过路由访问该组件时没有弹窗上下文，无法注入MatDialogRef。

3. 修正PDF导出逻辑（解决导出空白/弹窗提前关闭问题） #

你当前的代码存在两个导出相关的问题：一是确认按钮绑定了matDialogClose，点击后弹窗会立即销毁，导出时拿不到DOM元素；二是doc.html方法对部分Angular样式兼容性差，建议替换为你已经引入的html2canvas实现：

第一步修改auth.component.html的确认按钮，移除自动关闭属性： #

<!-- 删掉matDialogClose="confirm"，改为代码中手动关闭弹窗 -->
<button mat-raised-button color="accent" (click)="openPDF()">Confirm order</button>

第二步替换auth-layout.component.ts的openPDF方法： #

openPDF() {
  const data = this.output.nativeElement;
  // 使用html2canvas生成高清截图
  html2canvas(data, { scale: 2, useCORS: true }).then(canvas => {
    const imgWidth = 208; // A4纸宽度单位mm
    const imgHeight = canvas.height * imgWidth / canvas.width;
    const pdf = new jsPDF('p', 'mm', 'a4');
    pdf.addImage(canvas.toDataURL('image/png'), 'PNG', 0, 0, imgWidth, imgHeight);
    // 导出PDF
    pdf.save(`invoice_${new Date().getTime()}.pdf`);
    // 导出完成后手动关闭弹窗
    this.dialogRef.close('confirm');
  });
}

另外你弹窗内容的div上重复声明了两次id="output"，删掉其中一个即可，不影响功能但不符合HTML规范。

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