Проблема с роутером?

Question

Я сталкиваюсь с ситуацией.У меня есть CanActivate охранник маршрутизатора.Использование сторожей вызывает нежелательную перезагрузку всей страницы.

Я реализовал две версии сторожа и выяснил, что я не понимаю.Кто-нибудь может объяснить поведение и предложить решение?Вот маршрутизация:

const routes: Routes = [{
  path: '',
  component: DashboardComponent,
  children: [{
      path: 'overview',
      component: OverviewComponent,
    },
    {
      path: 'profile',
      canActivate: [TestGuard],
      component: ProfileComponent,
    },
  ],
}, ];

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

Guard Version 1 (работает как положено):

import {
  Injectable
} from '@angular/core';
import {
  ActivatedRouteSnapshot,
  CanActivate,
  RouterStateSnapshot,
} from '@angular/router';
import {
  Observable,
  of
} from 'rxjs';

@Injectable({
  providedIn: 'root',
})
export class TestGuard implements CanActivate {
  constructor() {}

  canActivate(
    route: ActivatedRouteSnapshot,
    state: RouterStateSnapshot
  ): Observable < boolean > {
    return of(true);
  }
}

Guard Version 2 (перезагружает всю страницу):

import {
  Injectable
} from '@angular/core';
import {
  ActivatedRouteSnapshot,
  CanActivate,
  RouterStateSnapshot,
} from '@angular/router';
import {
  Observable,
  of
} from 'rxjs';
import {
  delay,
  map
} from 'rxjs/operators';

@Injectable({
  providedIn: 'root',
})
export class TestGuard implements CanActivate {
  constructor() {}

  canActivate(
    route: ActivatedRouteSnapshot,
    state: RouterStateSnapshot
  ): Observable < boolean > {
    return of(true).pipe(
      delay(5000),
      map(answer => answer)
    );
  }
}

Моя проблема в том, что мне нужно вызвать службу (запрос API).Это моделируется задержкой во втором примере.Но в этом случае это вызывает перезагрузку всей страницы.Что я не вижу?