NullInjectorError: No provider for MatDialog - 尝试为 MatDialog 创建包装服务答案

【问题标题】：NullInjectorError: No provider for MatDialog - trying to create a wrapper service for MatDialogNullInjectorError: No provider for MatDialog - 尝试为 MatDialog 创建包装服务
【发布时间】：2019-02-27 10:19:46
【问题描述】：

我是编码新手，也是 Angular 新手，所以我想我会寻求帮助。这是我的第一个问题，请耐心等待。

我想为 Angular Material Dialog Service 创建一个包装服务（我只是想自学 - 这不是用于生产应用程序）所以我在我的应用程序中创建了一个服务，如下所示：

import {Injectable} from '@angular/core';
import {MatDialog} from '@angular/material';
    
@Injectable({
    providedIn: 'root'
})
export class MatDialogWrapperService {
    
    constructor(private dialog: MatDialog) {
    }
    
    open(componentRef, config = {}) {
        this.dialog.open(componentRef, config);
    }
}

现在我尝试将它添加到我的应用程序中的另一个角度组件，如下所示：我导入它，将其添加到提供程序数组，将其放入构造函数中，然后将其放入方法中（我已经删除了一些代码为了阅读方便）

@Component({
    selector: 'app-intro-form',
    templateUrl: './intro-form.component.html',
    providers: [MatDialogWrapperService],
        styleUrls: ['./intro-form.component.scss']
})
export class IntroFormComponent {  
  
    constructor(private modalService: MatDialogWrapperService ) {
    }
    
    modalCall() {
        this.modalService.open(ModalFormComponent, {width: '500px'});
    }
}

当我加载我的应用程序时，我在控制台中看到以下错误：

未处理的承诺拒绝：StaticInjectorError(AppModule)[ MatDialogWrapperService -> MatDialog]：StaticInjectorError（平台：核心)[ MatDialogWrapperService -> MatDialog]:

NullInjectorError：没有 MatDialog 的提供者！ ;区域：;任务：承诺.then ;值：错误：StaticInjectorError（AppModule）[ MatDialogWrapperService -> MatDialog]：StaticInjectorError（平台：核心)[ MatDialogWrapperService -> MatDialog]:

我认为我在包装服务中正确注入了 MatDialog？我做错了什么？

提前致谢。

【问题讨论】：

您是否将MatDialogModule 添加到您的模块导入中？
@chiril.sarajiu - Facepalm....谢谢！那是我的错！

标签： angular angular-material

【解决方案1】：

此错误表示您的应用程序中没有包含 Material Dialog 模块，因此没有提供程序。

在您的 app.module.ts 中，确保您已将 MatDialogModule 添加到您的导入中。

@NgModule({
  declarations: [
    AppComponent,
    ...
  ],
  imports: [
    MatDialogModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})

为了将来参考，您需要为您正在使用的任何 Material 组件包含该模块。检查每个模块的文档以找出您需要的模块（尽管大多数模块都是不言自明的）

【讨论】：

【解决方案2】：

供将来参考：如果有人在测试时偶然发现这个问题，请将MatDialogModule 添加到测试导入中。

beforeEach(async () => {
  TestBed.configureTestingModule({
    imports: [
      MatDialogModule,
    ],
...

【讨论】：

老兄，你摇滚！作为工作中的角小菜鸟，这对我很有帮助！

【解决方案3】：

指定全局配置默认值可以通过在应用程序的根模块中为 MAT_DIALOG_DEFAULT_OPTIONS 提供 MatDialogConfig 实例来指定默认对话框选项。

@NgModule({
  providers: [
    {provide: MAT_DIALOG_DEFAULT_OPTIONS, useValue: {hasBackdrop: false}}
  ]
})

【讨论】：