How to deal with a modal shown in a guard

I have a guard implemented like this:

@Injectable()
export class CustomerGuard implements CanActivate {
constructor(

private authService: AuthenticationService,

private dialog: MatDialog

) { }
canActivate(

next: ActivatedRouteSnapshot,

state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean {
if (this.authService.isCustomer) {
  return true;
}
const dialog = this.dialog.open(SigninModalComponent, {
  data: {
    errorMessage: this.authService.isLoggedIn ?
      'You don\t have access to this page, please use an appropriate account' :
      'Please authenticate to access this page'
  }
});

return dialog.afterClosed().pipe(
  map(() =&gt; {
    return this.authService.isCustomer;
  })
);

}

}

When I type an unauthorized route in my browser’s address bar, the server-side rendering shows an inert modal, then when the client-side takes over, another working modal is shown where I can successfully authenticate and access the requested route.

The problem is that the server-side rendered modal never disappears…

Is there a clean solution to this problem that wouldn’t imply not to show the modal on server side?

#angular #typescript