NullInjectorError: No provider for MatDialog - trying to create a wrapper service for MatDialog

Question

I am new to coding and new to Angular so I thought I would ask for some help. This is my first question so please be patient with me.

I want to create a wrapper service for the Angular Material Dialog Service (I'm just trying to teach myself - this isn't for a production app) so I made a service in my app like so:

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);
    }
}

Now I try to add this to another angular component in my app like so: I import it, add it to the providers array, put it in the constructor and then place it in a method (I have removed some of the code for ease of reading)

@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'});
    }
}

When I load my app I see the following error in the console:

Unhandled Promise rejection: StaticInjectorError(AppModule)[ MatDialogWrapperService -> MatDialog]: StaticInjectorError(Platform: core)[ MatDialogWrapperService -> MatDialog]:

NullInjectorError: No provider for MatDialog! ; Zone: ; Task: Promise.then ; Value: Error: StaticInjectorError(AppModule)[ MatDialogWrapperService -> MatDialog]: StaticInjectorError(Platform: core)[ MatDialogWrapperService -> MatDialog]:

I thought I had injected the MatDialog correctly in my wrapper service? What am I doing wrong?

Thanks in advance.

Answer 1

This error means you haven't included the Material Dialog module in your application, so there is no provider.

In your app.module.ts, ensure you have added MatDialogModule to your imports.

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

For future reference, you need to include the module for any Material component you are using. Check the documentation for each to find out which module you need (although most are self explanatory)

Answer 2

For future reference: if someone stumbles upon this question while testing, add MatDialogModule to the test imports.

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