NullInjectorError: No provider for InjectionToken MatDialogData

Question

I'm getting this error when running jasmine tests on my Angular app.

Error: StaticInjectorError(DynamicTestModule)[MyEditDialogComponent -> InjectionToken MatDialogData]: 
  StaticInjectorError(Platform: core)[MyEditDialogComponent -> InjectionToken MatDialogData]: 
    NullInjectorError: No provider for InjectionToken MatDialogData!
error properties: Object({ ngTempTokenPath: null, ngTokenPath: [ 'MyEditDialogComponent', InjectionToken MatDialogData ], ngDebugContext: DebugContext_({ view: Object({ def: Object({ factory: Function, nodeFlags: 33669121, rootNodeFlags: 33554433, nodeMatchedQueries: 0, flags: 0, nodes: [ Object({ nodeIndex: 0, parent: null, renderParent: null, bindingIndex: 0, outputIndex: 0, checkIndex: 0, flags: 33554433, childFlags: 114688, directChildFlags: 114688, childMatchedQueries: 0, matchedQueries: Object({  }), matchedQueryIds: 0, references: Object({  }), ngContentIndex: null, childCount: 1, bindings: [  ], bindingFlags: 0, outputs: [  ], element: Object({ ns: '', name: 'app-edit-ban-dialog', attrs: [  ], template: null, componentProvider: Object({ nodeIndex: 1, parent: <circular reference: Object>, renderParent: <circular reference: Object>, bindingIndex: 0, outputIndex: 0, checkIndex: 1, flags: 114688, childFlags: 0, directChildFlags: 0, childMatchedQueries: 0, matchedQueries: Object, matchedQueryIds: 0 ...
Error: StaticInjectorError(DynamicTestModule)[MyEditDialogComponent -> InjectionToken MatDialogData]: 
  StaticInjectorError(Platform: core)[MyEditDialogComponent -> InjectionToken MatDialogData]: 
    NullInjectorError: No provider for InjectionToken MatDialogData!

I am importing in my component:

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

In the component constructor I am Injecting data to the dialog:

 @Inject(MAT_DIALOG_DATA) public data: {
        myData : MyData
    }

In my karma jasmin spec for the component I am importing:

import {
    MatFormFieldModule,
    MatInputModule,
    MatDialogModule,
    MatDialogRef,
    MAT_DIALOG_DATA,
    MatButtonModule,
    MatRadioModule,
    MatSelectModule
} from '@angular/material';

In the karma/jasmine spec for the component, imports and providers in beforeEach:

 beforeEach(async(() => {
    TestBed.configureTestingModule({
        declarations: [ MyFormComponent ],
        imports: [
            MatFormFieldModule,
            MatInputModule,
            MatDialogModule,                               
        ],
        providers: [
            { provide: MatDialogRef, useValue: {} },
            { provide: MAT_DIALOG_DATA, useValue: { myData: MyData } }
        ]
    }).compileComponents();
}));

I've tried these answers but they don't fix the issue This This

score 51 · Answer 1 · edited Jun 18 '21 at 22:15

51

in my case, I imported the directives MatDialogModule, MAT_DIALOG_DATA and MatDialogRef

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

and then within beforeEatch():

imports: [ MatDialogModule],
providers: [
    { provide: MAT_DIALOG_DATA, useValue: {} },
    { provide: MatDialogRef, useValue: {} }
  ]

edited Jun 18 '21 at 22:15

LaCodeM

645
7
23

answered Apr 01 '20 at 18:13

Raphael Souza

717
6
5

why we need to do that? – Sh eldeeb Nov 02 '22 at 09:55

score 1 · Answer 2 · answered Sep 18 '19 at 16:46

1

Try removing MatDialogRef and MAT_DIALOG_DATA from the karma jasmin spec, and the component you need to be dialog import like this:

imports: [
    DynamicModule.withComponents([YOUR_DIALOG_COMPONENT])
]

answered Sep 18 '19 at 16:46

g4b0.88

1
9

score 1 · Accepted Answer · answered Sep 23 '19 at 15:52

1

In the edit dialog component I was passing the data object into the close method. I removed it and the error went away.

Changed this:

this.dialogRef.close(myData);

to this:

 this.dialogRef.close();

answered Sep 23 '19 at 15:52

Heinrich

1,711
5
28
61

score 0 · Answer 4 · answered Mar 03 '22 at 13:20

i tried this and worked ! do this in your components constructor

constructor(
    private injector: Injector,
  ) {
    super();
    this.dialogData = this.injector.get(MAT_DIALOG_DATA, null);
    if (this.dialogData) {
     // do your job here
    }

}

score 0 · Answer 5 · answered Aug 09 '22 at 17:49

0

If the other answers don't help, note that components that use the inject will throw an injection error if their selector is used like any other component.

This solved the same error on my project.

answered Aug 09 '22 at 17:49

Royer Adames

868
9
13

Amany Zohair · Answer 6 · 2022-10-30T14:03:33.097

0

In my case I addded MAT_DIALOG_DATA in the providers and it solved it for me

import { MatDialogRef, MAT_DIALOG_DATA,} from "@angular/material/dialog";



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

edited Oct 30 '22 at 14:03

answered Oct 30 '22 at 13:55

Amany Zohair

11
2

NullInjectorError: No provider for InjectionToken MatDialogData

6 Answers6