Угловая маршрутизация не работает после обновления (угловой маршрут имеет то же имя, что и маршрут сервера)

У меня особая проблема с Angular (версия 5), в которой у меня есть несколько маршрутов, настроенных в angular, например:

{path: 'calendar',  canActivate: [AuthGuard], component: ProjectsComponent }
{path: 'map',  canActivate: [AuthGuard], component: MapComponent }

Затем в заголовке моей веб-страницы есть кнопки, которые активируют эти маршруты.

<li routerLinkActive = "active"><a [routerLink] = "['/calendar']">Kalender</a></li>
<li routerLinkActive = "active"><a [routerLink] = "['/map']">Kaart</a></li>

Для / calendar все хорошо, но для / map есть проблема. При первом нажатии кнопки / карта загружает компонент, который затем отправляет запрос на получение на сервер api для некоторых данных с токеном, отправленным для аутентификации, не беспокойтесь.

Когда я обновляюсь (или вручную набираю localhost: 3000 / map), приложение angular не выбирает маршрут, и вместо этого на сервер отправляется пустой запрос GET, минуя маршрутизацию angular. Итак, yes / map - это угловой маршрут, но он также доступен как запрос на получение на сервере. Этого не происходит, когда я меняю имя маршрута на стороне сервера на другое, поэтому это как-то связано с тем же именем. Я предположил, что сходство имен не должно быть проблемой, поскольку angular должен сначала выбирать эти URL-запросы? Или нет?

пустой запрос на получение:

AuthGuard (чисто проверяет, вошел ли пользователь в систему на стороне клиента, бэкэнд защищен аутентификацией с каждым запросом):

export class AuthGuard implements CanActivate {

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

  canActivate(route: ActivatedRouteSnapshot,
              state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean {

     if (this.authService.isLoggedIn()) {
       return true;
     } else {
        this.router.navigate(['auth', 'login']);
        return false;
     }
  }

}