today I'm trying to create a simple chat page with chat list and chat window.
I tryed to implement it with auxilary routes, but some weird error stopped me.
CONTEXT: I have an application - folder with chat (it has applicationId), then, i have an offer - chat related entity. Application has many offers and chat identificator = applicationId + offerId.
I tried to create chat-list component with parent list of applications and offer-list on child url-segment, then, with :offerId in auxilary route display window part.
My Routes, that lazy loading:
export const routes: Routes = [
{
path: '',
loadComponent: () => import('src/app/pages/chat/chat.component'),
children: [
{
path: '',
loadComponent: () => import('src/app/features/chat/components/list/chat-list.component'),
children: [
{
path: ':applicationId',
loadComponent: () =>
import('src/app/features/chat/components/offer-list/chat-offer-list.component'),
},
],
},
{
path: ':offerId',
loadComponent: () =>
import('src/app/features/chat/components/window/chat-window.component'),
outlet: 'chat',
},
],
},
];
My router links:
export function getChatApplicationLink(applicationId: string): string[] {
return ['/', 'main', 'chat', applicationId];
}
export function getChatLink(applicationId: string, offerId: string): unknown[] {
return [...getChatApplicationLink(applicationId), { outlets: { chat: [offerId] } }];
}
chat.component.ts with router-outlets
<app-page-layout headerTitle="Chats">
<div class="chat-list">
<router-outlet />
</div>
<div class="chat-window">
<router-outlet name="chat" />
</div>
</app-page-layout>
When i get an error, i'm on route http://localhost:4212/main/chat/awd, and i go to route
[
"/",
"main",
"chat",
"awd",
{
"outlets": {
"chat": [
"rty"
]
}
}
]
Why am i get this error, while i am already in this route (it can recognize, that this route exist) and there is no about auxilary part in error?
Relative navigation doesn't change anything.
Angular v20.2.0
