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?

Solution 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.

Solution 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]:

Comments

[Jota.Toledo]

Notice that MatDialog isnt a component, is a service. Thats why the error is related to a provider message, as the MatDialog provider wasnt found. Please rephrase your answer, as this error has nothing to do with components.

[vince]

Good catch, a bit sloppy on my part -- fixed.

[Antoniossss]

This error is so bad as it says nothing about what you did wrong - and that is basicly configuration issue. IMHO good candidate for static code analisys - if you inject @Injectable class, and its module has no providers - push error.