Blinking components in angular 19.2.0 version

I am new to Angular. I am developing a simple page with a login and three components that are accessible once logged in. These three components share a navigation bar to navigate between them. To handle authentication and restrict access to those components, I created an auth service and an auth guard.

import { Injectable } from '@angular/core';
import { BehaviorSubject, Observable } from 'rxjs';

@Injectable({
providedIn: 'root'
})
export class AuthService {

private currentUserSubject: BehaviorSubject<string | null>;

constructor() {
let storedUser: string | null = null;

if (typeof window !== 'undefined' && window.localStorage) {
storedUser = localStorage.getItem('user');
}

this.currentUserSubject = new BehaviorSubject<string | null>(storedUser);
}

/**
* Sets the current user and stores it in localStorage.
* @param user The username or user ID.
*/
setUser(user: string): void {
this.currentUserSubject.next(user);

if (typeof window !== 'undefined' && window.localStorage) {
localStorage.setItem('user', user);
}
}

/**
* Returns the current user value.
*/
getUser(): string | null {
return this.currentUserSubject.value;
}

/**
* Checks if the user is logged in.
*/
isLoggedIn(): boolean {
return !!this.currentUserSubject.value;
}

/**
* Clears the current user and removes it from localStorage.
*/
logout(): void {
this.currentUserSubject.next(null);

if (typeof window !== 'undefined' && window.localStorage) {
localStorage.removeItem('user');
}
}

/**
* Returns an observable of the current user. Useful for components that want to react to login/logout.
*/
getCurrentUserObservable(): Observable<string | null> {
return this.currentUserSubject.asObservable();
}

/**
* Can be used to re-sync from localStorage in edge cases.
*/
restoreSession(): void {
if (typeof window !== 'undefined' && window.localStorage) {
const storedUser = localStorage.getItem('user');
if (storedUser) {
this.currentUserSubject.next(storedUser);
}
}
}
}



import { CanActivateFn, Router } from '@angular/router';
import { inject } from '@angular/core';
import { AuthService } from './auth.service';
import { of } from 'rxjs';
import { map } from 'rxjs/operators';

export const authGuard: CanActivateFn = (route, state) => {
const authService = inject(AuthService);
const router = inject(Router);

return of(authService.isLoggedIn()).pipe(
map(isLoggedIn => isLoggedIn ? true : router.createUrlTree(['']))
);
};


these are the lines in app.routes.ts that defines the components:

{path: 'profile', component: ProfileComponent, canActivate: [authGuard]},
{path: 'games', component: GamesComponent, canActivate: [authGuard]},
{path: 'home', component: PrincipalComponent, canActivate: [authGuard]},


The problem is that when I click on the components in the navbar, the login page appears for about half a second before the selected component is shown.

This is the html of the navbar:

<div class="navbar">
<a class="active" onclick="location.href='/home'">
App
</a>
<a class="partidas" onclick="location.href='/games'">Games</a>
<a class="login" onclick="location.href='/profile'">
<img src="user.svg" alt="User Profile">
</a>
</div>


I tried changing the auth service and auth guard in multiple ways, but without a positive result.

Continue reading...