StaticInjectorError(AppModule)[MatDialogTitle -> MatDialogRef]

2
votes

Im familiar with this error but I only started seeing this after updating to Angular Material 6.4.7.

All my modules refer to my own MaterialModule which exports MatDialogModule. I dont have any provider setup for MatDialogRef - havent needed to before.

And whats the deal with [MatDialogTitle -> MatDialogRef]? What does that mean?

Everything seems to be working fine in dev and prod builds. I cant figure out what is causing this.

Is there a way to trace this back to something??

Thanks

core.js:1673 ERROR Error: Uncaught (in promise): Error: StaticInjectorError(AppModule)[MatDialogTitle -> MatDialogRef]: 
  StaticInjectorError(Platform: core)[MatDialogTitle -> MatDialogRef]: 
    NullInjectorError: No provider for MatDialogRef!
Error: StaticInjectorError(AppModule)[MatDialogTitle -> MatDialogRef]: 
  StaticInjectorError(Platform: core)[MatDialogTitle -> MatDialogRef]: 
    NullInjectorError: No provider for MatDialogRef!
at NullInjector.push../node_modules/@angular/core/fesm5/core.js.NullInjector.get (core.js:1062)
at resolveToken (core.js:1300)
at tryResolveToken (core.js:1244)
at StaticInjector.push../node_modules/@angular/core/fesm5/core.js.StaticInjector.get (core.js:1141)
at resolveToken (core.js:1300)
at tryResolveToken (core.js:1244)
at StaticInjector.push../node_modules/@angular/core/fesm5/core.js.StaticInjector.get (core.js:1141)
at resolveNgModuleDep (core.js:8369)
at NgModuleRef_.push../node_modules/@angular/core/fesm5/core.js.NgModuleRef_.get (core.js:9057)
at resolveDep (core.js:9422)
at NullInjector.push../node_modules/@angular/core/fesm5/core.js.NullInjector.get (core.js:1062)
at resolveToken (core.js:1300)
at tryResolveToken (core.js:1244)
at StaticInjector.push../node_modules/@angular/core/fesm5/core.js.StaticInjector.get (core.js:1141)
at resolveToken (core.js:1300)
at tryResolveToken (core.js:1244)
at StaticInjector.push../node_modules/@angular/core/fesm5/core.js.StaticInjector.get (core.js:1141)
at resolveNgModuleDep (core.js:8369)
at NgModuleRef_.push../node_modules/@angular/core/fesm5/core.js.NgModuleRef_.get (core.js:9057)
at resolveDep (core.js:9422)
at resolvePromise (zone.js:814)
at resolvePromise (zone.js:771)
at zone.js:873
at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:421)
at Object.onInvokeTask (core.js:3811)
at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:420)
at Zone.push../node_modules/zone.js/dist/zone.js.Zone.runTask (zone.js:188)
at drainMicroTaskQueue (zone.js:595)
at ZoneTask.push../node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask [as invoke] (zone.js:500)
at invokeTask (zone.js:1540)
4
angular-material-6angular-material-7
Updated to v 7 - same problem. There doesn't seem to be a way to trace what is causing this. – Jonesie
Yes, same issue, I have ^6.4.7. I have one MatDialog that works fine. When I try and bring up the other, I get this error. – lincolnadym

4 Answers

22
votes

Update: So for my issue, I was able to solve it using providers from this Bug issue [https://github.com/angular/material2/issues/8419]. I added the following 2 lines to my app.module providers list: 

{ provide: MatDialogRef, useValue: {} },
{ provide: MAT_DIALOG_DATA, useValue: [] },

The bug refers to issues with testing, but for me I had one MatDialog working, but the other would throw the error.

Hope this helps, adym

0
votes

You are having this issue because you added a reference to your dialog on your html layout. Please remove that reference and make sure your add your dialog on the entryComponents property on the module using it. See angular material docs here. Your module declaration should look like this.

@NgModule({
  imports: [
    // ...
    MatDialogModule
  ],

  declarations: [
    AppComponent,
    ExampleDialogComponent
  ],

  entryComponents: [
    ExampleDialogComponent // THE MAGIC HAPPENDS HERE
  ],

  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {}
0
votes

Yes, you have to write in entryComponents in your @NgModule, same as below

entryComponents: [DialogComponent, GetDialogContent],
-1
votes

in your MATERIAL.MODULE.TS

    import {MatDialogRef} from '@angular/material';

@NgModule({
providers: [MatDialogRef]
})