AngularFireAuthGuard don’t let Angular to redirect to another screen

I’m doing a web application using Angular 10 and angularfire. I’m also using AngularFire guards to protect my routes from unauthorized users.

When a user logs in, I try to redirect him to the Home:

this.authService.login('[email protected]', '123456')
      .then(() => this.router.navigateByUrl('/home'));

No redirection happens, the user stays on the Login page.

The same behavior happens when I try to do sign out:

this.afAuth.signOut().then(() => this.router.navigate(['login']));

Guards configuration:

import {AngularFireAuthGuard, redirectLoggedInTo, redirectUnauthorizedTo} from '@angular/fire/auth-guard';

// AngularFire guards
const redirectUnauthorizedToLogin = () => redirectUnauthorizedTo(['login']);
const redirectLoggedInToHome = () => redirectLoggedInTo(['home']);

const routes: Routes = [

  {
    path: '',
    redirectTo: 'home',
    pathMatch: 'full'
  },

  {
    path: '',
    component: AuthLayoutComponent,
    canActivate: [AngularFireAuthGuard],
    data: {authGuardPipe: redirectLoggedInToHome},
    children: [
      {
        path: 'login',
        component: Login
      }
    ]
  },

  {
    path: '',
    component: AdminLayoutComponent,
    canActivate: [AngularFireAuthGuard],
    data: {authGuardPipe: redirectUnauthorizedToLogin},
    children: [
      {
        path: 'home',
        component: HomeComponent
      },
    ]
  },

];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule {
}

The interesting part is if I remove the canActivate and data, the redirection works perfect. Example:

  {
    path: '',
    component: AdminLayoutComponent,
    children: [
      {
        path: 'home',
        component: HomeComponent
      },
    ]
  },

But this way my routes are not protected.

I have tried to use NgZone without luck:

this.afAuth.signOut().then(() => {
  this.ngZone.run(() => {
    this.router.navigate(['login']);
  });
});

Why the AngularFire Guards are blocking angular to do redirections?

My goal is:

  1. If the user is logged in, let him to go to Home.
  2. If the user is not logged in and is trying to go to Home, redirect him to Login.

Source: Angular Questions