CODEWITHSUNDEEP
angular-material-6angular-material-7
Jonesie
Jonesie

Reputation: 7285

StaticInjectorError(AppModule)[MatDialogTitle -> MatDialogRef]

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)

Upvotes: 2

Views: 18993

Answers (4)

Risha Tiwari
Risha Tiwari

Reputation: 111

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

entryComponents: [DialogComponent, GetDialogContent],

Upvotes: 0

Morlo Mbakop
Morlo Mbakop

Reputation: 3756

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 {}

Upvotes: 0

lincolnadym
lincolnadym

Reputation: 1000

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

Upvotes: 22

Jay
Jay

Reputation: 125

in your MATERIAL.MODULE.TS

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

@NgModule({
providers: [MatDialogRef]
})

Upvotes: -1

Related Questions