Angular material StaticInjectorError: No provider for MatDialog

Question

I am getting below error in my browser console when I launch my Angular 5 page in browser.

ERROR Error: StaticInjectorError(AppModule)[AppComponent -> MatDialog]: StaticInjectorError(Platform: core)[AppComponent -> MatDialog]: NullInjectorError: No provider for MatDialog! at _NullInjector.webpackJsonp.../../../core/esm5/core.js._NullInjector.get

What am I missing?

Answer 1

This error usually occurs when the service you are trying to use has not been provided in your @NgModule.

To use the MatDialog service, you will need to go to your module file and add MatDialogModule to the array of imports:

import {MatDialogModule} from '@angular/material/dialog';

@NgModule({
  imports: [MatDialogModule]
})
export class MyModule {}

You can find the import along with more information on how to use the dialog here: https://material.angular.io/components/dialog/api.

Answer 2

Sometimes the following error also come when you want to hit API and at that time you need to check whether the api is right or wrong, check spaces as well when you set API.

Uncaught (in promise): Error: StaticInjectorError(AppModule)[LoginDialogComponent -> InjectionToken MatDialogData]:

Answer 3

Throwing an error, if no data is supplied with @Inject(MAT_DIALOG_DATA) data: any. Try to provide a default data. Also The dialog component name should be in entryComponents in respective Module.

Answer 4

try to declare outside the Constructor and initialize inside constructor

my code like this My Interface is below

export interface DoctorDetails
    {
        UserId:number,
        DoctorId:number,
        FirstName:string,
        LastName:string, 
        Speciality:string,
        EmailId:string,
        PhoneNumber1:string,
        PhoneNumber2:string,
        CountryName:string,
        StateName:string,
        city:string,
        AddressLine1:string,
        HospitalName:string,
        PrimaryMark:number
    }

My Declaration and Initialization is like below

export class DoctorDetailsComponent implements OnInit {
  url:string="http://hospitalapi.com/api/doctor/GetDoctor/";
  doctor:DoctorDetails[];//Declare
  constructor(private route:ActivatedRoute,
    private http:HttpService
    ) { 
      const id =route.snapshot.paramMap.get("id");
      console.log(id);
      this.url = this.url+id;  
      this.doctor = new Array<DoctorDetails>();//Initialize
    
    }