Angular Material Dialog not closing after navigation

I had this problem and I just fixed it now.

you need to subscribe router events after creating the dialogRef object. you can check the code

const dialogRef = this.dialog.open(MyComponent, {
  width: '380px',
  height: '320px',
});
this.router.events
 .subscribe(() => {
   dialogRef.close();
 });

When you navigate using [routerLink] directive or router.navigate() method of Angular's Router service within the MatDialog, the actual navigation happens. So we can just listen for router's changes and close the dialog.

In your EntityDialogComponent implement ngOnInit as following:

ngOnInit() {
   this._routerSubscription = this._router.events
     .pipe(
       filter((event: RouterEvent) => event instanceof NavigationStart),
       filter(() => !!this.dialogRef)
     )
     .subscribe(() => {
       this.dialogRef.close();
     });
}

The code above closes a dialogRef when NavigationStart event is fired and there is an instance of the dialogRef.

P.S. Make sure that the _routerSubscription is unsunscribed.