MatDialog not opening in IE 11

Question

All of that dialogs in my project are not opening in IE11 for my deployed code but work fine on my local running in IE. All of them follow the same code.

component.html

<button mat-raised-button color="accent" class="accent" type="button" (click)="openNewCaseModal()" [disabled]="disableSubmit">{{ 'CASES.createCase' | translate }}</button>

component.ts

  openNewCaseModal(row) 

const dialogRef = this.dialog.open(CaseComponent, {
  width: '75%',
  data: this.caseData
});
dialogRef.afterClosed().subscribe(result => {
  if (result === 'submitted') {
    this.caseCreated.emit();
    this.snackbar.open('Case Created', '', { duration: 2000, verticalPosition: 'top' } );
  } else if (result === 'error submitted') {
    this.snackbar.open('Error Creating Case. Please Try Again.', '', { duration: 2000, verticalPosition: 'top' });
  }
});

}

dialog.component.ts

constructor(
 private caseService: CasesService,
 private sidebarService: SidebarService,
 private dialog: MatDialogRef<CaseComponent>,
 private fb: FormBuilder,
 private snackbar: MatSnackBar,
 @Inject(MAT_DIALOG_DATA) public data: any) {
}

My Error in IE console when I try to open the Dialog.

Error: StaticInjectorError[e -> function(){this.role="dialog",this.panelClass="",this.hasBackdrop=!0,this.backdropClass="",this.disableClose=!1,this.width="",this.height="",this.maxWidth="80vw",this.data=null,this.ariaDescribedBy=null,this.ariaLabel=null,this.autoFocus=!0,this.restoreFocus=!0,this.closeOnNavigation=!0}]:

StaticInjectorError(Platform: core)[e -> function(){this.role="dialog",this.panelClass="",this.hasBackdrop=!0,this.backdropClass="",this.disableClose=!1,this.width="",this.height="",this.maxWidth="80vw",this.data=null,this.ariaDescribedBy=null,this.ariaLabel=null,this.autoFocus=!0,this.restoreFocus=!0,this.closeOnNavigation=!0}]:

NullInjectorError: No provider for function(){this.role="dialog",this.panelClass="",this.hasBackdrop=!0,this.backdropClass="",this.disableClose=!1,this.width="",this.height="",this.maxWidth="80vw",this.data=null,this.ariaDescribedBy=null,this.ariaLabel=null,this.autoFocus=!0,this.restoreFocus=!0,this.closeOnNavigation=!0}!

It looks like these errors are referring to the this.dialog.open() function I am calling to open the dialog. Also the fact that I can only reproduce it in my deployed code is make it difficult to debug.

Any help/suggestions would be much appreciated.

Answer 1

The issue was missing pollyfils in the pollyfills.ts file.

I was missing the below pollyfill imports:

• import 'core-js/es6/weak-map';
• import 'core-js/es7/reflect';

My guess is that in the error:

StaticInjectorError(Platform: core)[e -> function(){this.role="dialog",this.panelClass="",this.hasBackdrop=!0,this.backdropClass="",this.disableClose=!1,this.width="",this.height="",this.maxWidth="80vw",this.data=null,this.ariaDescribedBy=null,this.ariaLabel=null,this.autoFocus=!0,this.restoreFocus=!0,this.closeOnNavigation=!0}]:

The (Platform: core) pieces is referring to core-js. No other indication that this is correct but the dialogs are working now.

Thank you @yurzui for the suggestions in troubleshooting the error.