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
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: {} }
]
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])
]
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();
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With