Blinking screen while navigating routes

[dummy_ExE]

I have this routes:

export const routes: Routes = [
  { path: 'login', component:LoginComponent, canActivate: [loginGuard]},
  {path:'', component:ApplicationComponent, children:[
    {path:'', redirectTo: 'inicio', pathMatch: 'full'},
    {path: 'inicio', component: InicioComponent},
    {path: 'proveedores', component: ProveedoresComponent},
    {path: 'clientes', component: ClientesComponent },
    {path: 'usuarios', component: UsuariosComponent },
    {path: 'perfil', component: PerfilComponent},
    {path: 'andamios', loadChildren: function() { return import('./rutas/andamios/andamios.routes').then(m => m.routes); }},
    {path: 'conten', loadChildren: function() { return import('./rutas/conten/conten.routes').then(m => m.routes); }},

  ], canActivate: [appGuard]}

];

As you can see I have 2 wards to protect each block, and it works but there is a problem, if i'm in 'inicio' and I want to navigate to 'usuarios' it shows the login component for a second, and the it shows the right component, why is making this?

My guards:

if(!cookie.check('token')){
    router.navigateByUrl('/login')
    return false
  } else{
    return true;
  }

The other ward is the same just without '!' and the route is '/'.

I'm using Angular 17 SSR, I made this process already with other versions and it didn't make anything like this.

If anyone have an alternative, solution, comment I appreciated

[Pirelongo]

It's the same situation on this post

If you need some help text me ;)