No provider for DialogRef InjectionToken

463 Views Asked by At

I am creating a directive that opens JavaScript's confirm or CDK Dialog based on condition, CDK dialog is optional, and when not used I want it to be tree shaken.

So I used InjectionToken to get the reference of CDK dialog and dialogRef.

/** sample.model.ts **/
export const APP_MAT_DIALOG = new InjectionToken('app-mat-dialog');
export const APP_MAT_DIALOG_REF = new InjectionToken('app-mat-dialog-ref');
/** Consumers module **/
import {Dialog, DialogModule, DialogRef} from '@angular/cdk/dialog';

imports: [DialogModule],
providers: [
  {provide: APP_MAT_DIALOG, useExisting: Dialog},
  {provide: APP_MAT_DIALOG_REF, useExisting: DialogRef},
],
/** sample-dialog.directive.ts **/
constructor(@Optional() @Inject(APP_MAT_DIALOG) private dialog: any) {}

open() {
  //I got the CDK's dialog reference from the consumer's module, this works fine until here, 
  const dialogRef = this.dialog.open(MyDialogComponent, {});
 
  dialogRef.closed.subscribe((confirmed: any) => {
    //handle result
  });
}
export class MyDialogComponent {
  //I don't get CDK's dialogRef, got an error instead
  constructor(@Optional() @Inject(APP_MAT_DIALOG_REF) public dialogRef: any) {}
}

CDK's dialogRef is created dynamically when the dialog is open and the consumer can't pass that?, How do I get a reference to dialogRef?

When consumer pass from module, I get below error

ERROR NullInjectorError: R3InjectorError[InjectionToken app-mat-dialog-ref -> InjectionToken app-mat-dialog-ref -> DialogRef -> DialogRef -> DialogRef]: 
  NullInjectorError: No provider for DialogRef!
0

There are 0 best solutions below