Проблема с настройкой маршрутизации Angular

У меня есть библиотека Angular, которая включает в себя собственную маршрутизацию.

Ожидаемый сценарий:

• Пользователь нажимает кнопку «Добавить удаленный компонент».
• Компонент (библиотека) CurrentCasesComponent загружается, а затем перенаправляется на экран входа в систему.
• Пользователь нажимает «Аутентификация», компонент RemoteBComponent отображается внутри вкладки.

Наблюдаемое поведение:

• Пользователь нажимает кнопку «Добавить удаленный компонент» => ничего не отображается.
• Пользователь нажимает кнопку «Добавить удаленный компонент» во второй раз => CurrentCasesComponent загружается успешно.
• Пользователь нажимает «аутентифицировать» => экран удаленного доступа отображается успешно.

Я импортирую эту библиотеку в свое основное приложение во время выполнения с помощью SystemJS, и у меня есть некоторые проблемы с выяснением того, какой должна быть настройка маршрутизации Angular.

Маршрутизация библиотеки:

const routes: Routes = [
  {
    path: "current",
    component: CurrentCasesComponent
  },
  {
    path: "login",
    component: LoginComponent
  },
  { path: "**", redirectTo: "current", pathMatch: "full" },
];

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

Маршрутизация основного приложения:

const routes: Routes = [
  {
    path: "pi",
    component: PiComponent,
    children: [
      {
        path: "dynamic",
        component: DynamicPackComponent,
        children: [{ path: "", component: DynamicPackComponent }]
      },
      { path: "static", component: StaticComponent }
    ]
  },
  {
    path: "static",
    component: StaticComponent
  },
  { path: "**", redirectTo: "pi", pathMatch: "full" }
];

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

Я вставляю удаленную маршрутизацию по пути «пи» в основную маршрутизацию при загрузке удаленного компонента. С этим проблем нет: роутер выглядит так:

  export class CurrentCasesComponent implements OnInit, AfterViewInit {
  constructor(private router: Router, private route: ActivatedRoute) {}

  ngAfterViewInit(): void {
    this.router.navigate(["./remote/login"], { relativeTo: this.route });
  }

Я вижу, что выдается следующий вызов маршрутизации:

NavigationEnd {id: 2, url: "/pi/remote/login", urlAfterRedirects: "/pi/remote/login"}

Я что-то упускаю с настройкой маршрутизации, и любые советы приветствуются.

Вот ссылка на Stackblitz для демонстрации проблемы.stackblitz

Обратите внимание, что если вы закомментируете следующий вызов маршрутизации для входа в систему, «CurrentCaseComponent» успешно отобразится после нажатия кнопки «Добавить удаленный компонент».

export class CurrentCasesComponent implements OnInit, AfterViewInit {
  constructor(private router: Router, private route: ActivatedRoute) {}

  AfterViewInit(): void {
    //this.router.navigate(["../remote/login"], { relativeTo: this.route });
  }