Angular 8 - AuthGuard запрещает доступ к routerLinks с помощью кликов

Question

Я использую AuthGuard с firebase, и все работает нормально с ограничением доступа к выбранным маршрутам, за исключением того, что сами routerLinks отключаются щелчками даже при аутентификации. НО когда я получаю доступ к ним по URL-адресу напрямую, я могу получить доступ к маршрутам. Кто-нибудь может мне помочь с этим?

auth.guard.ts

import { Injectable } from '@angular/core';
import { CanActivate, Router, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router'
import { AuthService } from '../services/auth.service'
import { AngularFireAuth } from 'angularfire2/auth'
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';

@Injectable({
  providedIn: 'root'
})

export class AuthGuard implements CanActivate {

  constructor(
    private router: Router,
    private auth: AuthService,
    private afAuth: AngularFireAuth,
    private authService: AuthService
  ) { }

  canActivate(): Observable<boolean> {
    return this.afAuth.authState.pipe(map(auth => {
      if(!auth) {
        this.router.navigate(['/login']);
        return false;
      } else {
        return true;
      }
    }));
  }
}

app-routing.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

// Components
import { DashboardComponent } from './components/dashboard/dashboard.component';
import { LoginComponent } from './components/login/login.component';
import { RegisterComponent } from './components/register/register.component';
import { AddClientComponent } from './components/add-client/add-client.component';
import { EditClientComponent } from './components/edit-client/edit-client.component';
import { ClientDetailsComponent } from './components/client-details/client-details.component';
import { SettingsComponent } from './components/settings/settings.component';
import { NotFoundComponent } from './components/not-found/not-found.component';

import { AuthGuard } from './guards/auth.guard';

const routes: Routes = [
  {path: '', component: DashboardComponent, canActivate:[AuthGuard]},
  {path: 'login', component: LoginComponent},
  {path: 'register', component: RegisterComponent},
  {path: 'client/add', component: AddClientComponent, canActivate:[AuthGuard]},
  {path: 'client/edit/:id', component: EditClientComponent, canActivate:[AuthGuard]},
  {path: 'client/:id', component: ClientDetailsComponent, canActivate:[AuthGuard]},
  {path: 'settings', component: SettingsComponent, canActivate:[AuthGuard]},
  {path: '**', component: NotFoundComponent},
];

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

login.component.ts

  onSubmit() {
    this.authService.login(this.email, this.password)
      .then(res => {
        this.flashMessage.show('You are now logged in', {
          cssClass: 'alert-success text-center', timeout: 4000
        });
        this.router.navigate(['/']);
      })
      .catch(err => {
        this.flashMessage.show(err.message, {
          cssClass: 'alert-danger text-center', timeout: 4000
        });
      })
  }

Также обратите внимание, что this.router.navigate(['/']); иногда не работает, что действительно странно и заставляет меня думать, что это какая-то ошибка.

и вот navbar.component. html для примера routerLinks

      <ul class="navbar-nav ml-auto">
        <li *ngIf="!isLoggedIn" class="nav-item">
          <a routerLink="/register" class="nav-link">Register</a>
        </li>
        <li *ngIf="!isLoggedIn" class="nav-item">
          <a routerLink="/login/" class="nav-link">Login</a>
        </li>
        <li *ngIf="isLoggedIn" class="nav-item">
          <a href="#" class="nav-link">{{ loggedInUser }}</a>
        </li>
        <li *ngIf="isLoggedIn" class="nav-item">
          <a routerLink="/settings" class="nav-link">Settings</a>
        </li>
        <li *ngIf="isLoggedIn" class="nav-item">
          <a href="#" (click)="onLogoutClick()" class="nav-link">Logout</a>
        </li>
      </ul>

События маршрутизатора при нажатии