Angular Material and Jasmine : " No provider for InjectionToken MdDialogData! "

Question

I have a component which is meant to be used in an Angular Material MdDialog :

@Component({
  ...
})
export class MyComponent {

  constructor(@Inject(MAT_DIALOG_DATA) public data: any, public dialogRef: 
MdDialogRef<MyComponent>) {
...
  }


}

I am trying to Unit Test it with Jasmine :

describe('MyComponent', () => {
  let component: MyComponent;
  let fixture: ComponentFixture<MyComponent>;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      imports: [
        SharedTestingModule,
      ],
      declarations: [
        MyComponent,
      ],
    })
    .compileComponents();
  }));

  ...
  
});

Unfortunately, I am getting the following error :

Error: No provider for InjectionToken MdDialogData!

SharedTestingModule imports and exports my custom Angular Material module, which itself imports and exports MdDialogModule.

How can I get rid of this error?

Thank you very much!

Angular 4.2.4
Angular Material 2.0.0-beta.7
Jasmine 2.5.3

You always is going to get a error of this type if the injectable, in this case MdDialogData, is null or not defined (JS) or one of the components of MatDialog is null and then it can not be created. Example: `let dialogRef = this.dialog.open(DeleteDialogComponent, { data: row.name //<-if here you put i.e 4 value you get Error: No provider for InjectionToken MatDialogData, in this case DeleteDialogComponent inherits from MatDialogRef and MatDialogRef has MAT_DIALOG_DATA as injectable! });` — Aly González, Dec 08 '22 at 01:53

score 168 · Accepted Answer · edited Jun 14 '22 at 12:04

168

I added this :

providers: [
    { provide: MAT_DIALOG_DATA, useValue: {} },
    // { provide: MdDialogRef, useValue: {} }, --> deprecated
    { provide: MatDialogRef, useValue: {} } ---> now
]

And it works :)

Thanks for your help @methgaard!

edited Jun 14 '22 at 12:04

Sefat Anam

142
4
14

answered Jun 29 '17 at 15:02

Wenneguen

3,196
3
13
23

My pleasure, glad i could help! :) – kodeaben Jun 30 '17 at 06:06
9

`MD_DIALOG_DATA` got renamed to `MAT_DIALOG_DATA` in more recent Angulars. – Yuri Apr 29 '20 at 15:47
1

you added this, where? – Shawn Mercado Apr 29 '20 at 15:51
@ShawnMercado In `TestBed.configureTestingModule({...})` – Wenneguen Apr 30 '20 at 16:26
I am going to put this here, just i case some poor soul encounters the same issue as me. I was getting the error `cannot read property of undefined` due to using `userClass` instead of `useValue` for `MAT_DIALOG_DATA`. – banksdev Jun 09 '20 at 11:51
1

`MdDialogRef` is now `MatDialogRef` – smoq Jun 24 '21 at 20:48
This answer is outdated, see other comments – O-9 Sep 06 '21 at 07:28
It works perfect! Thanks. Can you please explain why it solve the problem? – barper Jun 04 '22 at 07:48

score 101 · Answer 2 · edited Jan 15 '19 at 07:25

101

For Angular 5 with latest Material Component

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

and

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

edited Jan 15 '19 at 07:25

Yuri

4,254
1
29
46

answered Jan 13 '18 at 02:25

Kamruzzaman

1,423
1
12
14

Worked perfectly for me.. couldn't figure out how to import `MAT_DIALOG_DATA` from `@angular/Material` – Rinktacular May 16 '18 at 18:23
This works perfectly to. I'm using `@Inject(MAT_DIALOG_DATA) public data: any` in my DialogRef component. I forgot to declare this in my spec. Thanks! – XenoX Dec 27 '18 at 09:13

score 15 · Answer 3 · answered Jun 29 '17 at 13:37

try this

beforeEach(async(() => {
 TestBed.configureTestingModule({
   imports: [
     SharedTestingModule,
   ],
   declarations: [
     MyComponent,
   ],
   providers: [ <-- here
    {
     provide: MdDialogData,
     useValue: {},
    }
   ] <-- to here 
 })
 .compileComponents();
}));

let me know how it goes

score 13 · Answer 4 · answered Oct 16 '17 at 22:35

13

as an update, this is also replicated for those who use the tags with the prefix "Mat"

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

answered Oct 16 '17 at 22:35

mehs2690

131
1
4

Mustafa Omran · Answer 5 · 2020-08-24T12:20:05.250

6

You can use Angular Optional decorator, I faced this problem before so

if the component is not used as a popup try this snippet

constructor(
  @Optional() public dialogRef: MatDialogRef<PopupComponent>,
  @Optional() @Inject(MAT_DIALOG_DATA) public data: any
) {}

edited Aug 24 '20 at 12:20

answered Aug 24 '20 at 12:12

Mustafa Omran

354
5
7

Worked for me!!! Had a component that I was loading in normal way and also loading the same as a dialog sometimes. So the *@Inject(MAT_DIALOG_DATA) public data: any * was null in normal loading and it would not work. – Luke Matafi Dec 02 '22 at 15:24

score 4 · Answer 6 · answered Jun 18 '19 at 12:27

4

you can inject MAT_DIALOG_DATA / MAT_BOTTOM_SHEET_DATA in jasmine tests without specifying a provider. you must simply ensure that the value being injected is non-null. if it is null, the compiler mistakes the null value for a non-existing provider and you get the provider not found error.

answered Jun 18 '19 at 12:27

Bob

41
1

This was exactly my problem (using Angular 8.x) – Pianoman Jan 02 '20 at 19:18

score 1 · Answer 7 · answered Mar 17 '21 at 13:45

1

try add in your <x>.component.spec.ts under providers:

{ provide: MatDialog, useValue: {} }

in some cases you need also:

{ provide: MatDialogRef, useValue: {} }

(this way working in my angular 11 project)

answered Mar 17 '21 at 13:45

ofir_aghai

3,017
1
37
43

score 0 · Answer 8 · answered Feb 05 '22 at 02:49

No provider for InjectionToken MatDialogData!, This error will occur when we run test cases, When we use matdialog reference with @Inject(MAT_DIALOG_DATA) public value: string, in the respected component.

Add below code in spec.ts file

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

Angular Material and Jasmine : " No provider for InjectionToken MdDialogData! "

8 Answers8

Linked