2

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)
Jonesie
  • 6,997
  • 10
  • 48
  • 66
  • Updated to v 7 - same problem. There doesn't seem to be a way to trace what is causing this. – Jonesie Oct 21 '18 at 03:34
  • 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 Oct 24 '18 at 17:09

4 Answers4

22

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

sevic
  • 879
  • 11
  • 36
lincolnadym
  • 909
  • 1
  • 12
  • 29
  • 1
    That does indeed remove the error message on startup, but now, and this is really funcky, I see a dialogs content as my home page - just not in a dialog. But then my startup is really funcky anyway as I dynamically change routes based on authentication. Thanks!! – Jonesie Oct 25 '18 at 00:57
  • This is not needed Angular will take care of that for you. Just make sure you have no refence to you Dialog on your HTML template and register your dialog with the `entryComponents` of the module using it. See my answer. – Morlo Mbakop Aug 05 '19 at 07:25
  • I have found that adding the dialog component to entryComponents is enough when the component inits, but if you do this.dialogRef.close(), and then try to oepn the dialog again, you need to also have the providers – Ioannis Tsiokos Feb 20 '20 at 10:48
0

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 {}
Morlo Mbakop
  • 3,518
  • 20
  • 21
  • Yes, after adding this it worked in chrome, edge and friefox. But in IE-11.2 the same error occurs and popup not opening. Did you check in IE? – VisheshRaju Aug 12 '19 at 07:09
  • @VisheshRaju, I think you need to change your target version in your `tsConfig.json` to `es5`, As Angular CLI 8.1, the defaut generated target is `es2015` which has low support in IE. No, i did check with IE. – Morlo Mbakop Aug 13 '19 at 03:39
0

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

entryComponents: [DialogComponent, GetDialogContent],
Risha Tiwari
  • 111
  • 4
  • Yes, after adding this it worked in chrome, edge and friefox. But in IE-11.2 the same error occurs and popup not opening. Did you check in IE? – VisheshRaju Aug 12 '19 at 07:11
-1

in your MATERIAL.MODULE.TS

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

@NgModule({
providers: [MatDialogRef]
})
Jay
  • 135
  • 8
  • 7
    ` Failed: Can't resolve all parameters for MatDialogRef: (?, ?, ?, ?).` – Michael McKenna Apr 11 '19 at 00:04
  • This is not needed Angular will take care of that for you. Just make sure you have no refence to you Dialog on your HTML template and register your dialog with the `entryComponents` of the module using it. See my answer. – Morlo Mbakop Aug 05 '19 at 07:25