Angular router hangs on direct URL access to guarded route

The page hangs and load indefinitely and never actually loads.

import { inject, PLATFORM_ID } from '@angular/core';
import { CanActivateFn, Router } from '@angular/router';
import { of, take, map, tap } from 'rxjs';
import { AuthServiceService } from '../../services/authentication- a uthorization/auth-service.service';

export const controlPanelGuardGuard: CanActivateFn = (route, state) => {

const authService = inject(AuthServiceService);
const router = inject(Router);

return authService.isAuthenticated$.pipe(
take(1),
map(isLoggedIn => {
if (!isLoggedIn) {
router.navigate(['/iniciar-sesion']);
return false;
}
return true;
})


);

return true;

}

Continue reading...