У меня есть библиотека 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 });
}