How to deal with a modal shown in a guard

How to deal with a modal shown in a guard

I have a guard implemented like this:

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

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

Install Angular - Angular Environment Setup Process

Install Angular in easy step by step process. Firstly Install Node.js & npm, then Install Angular CLI, Create workspace and Deploy your App.

Basics of Angular: Part-1

What is Angular? What it does? How we implement it in a project? So, here are some basics of angular to let you learn more about angular. Angular is a Typesc

Angular 8 Updates And Summary of New Features

Angular 8 Updates And Summary of New Features. Differential loading, web workers, Dynamic imports for lazy routes, CLI workflow improvements. Ivy and bazel.

TypeScript, Angular, Firebase & Angular Material Master class Tutorial

As the course progresses, you'll get familiar with: TypeScript, Angular Application Architecture, and Angular CLI. Angular Modules and Angular Components. Angular's Component LifeCycle Hooks....

Angular Tutorial: Create a CRUD App with Angular CLI and TypeScript

Angular Tutorial: Create a CRUD App with Angular CLI and TypeScript. This tutorial gets you off the ground with Angular. We are going to use the official CLI (command line) tool to generate boilerplate code.