0

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"
            ]
        }
    }
]

enter image description here

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

1 Answer 1

0

Seems issue is with your route setup...please try the route like below

export const routes: Routes = [
  {
    path: '',
    loadComponent: () => import('src/app/pages/chat/chat.component'),
    children: [
      {
        path: ':applicationId',
        children: [
          {
            path: '',
            loadComponent: () =>
              import('src/app/features/chat/components/offer-list/chat-offer-list.component'),
          },
          {
            path: ':offerId',
            outlet: 'chat',
            loadComponent: () =>
              import('src/app/features/chat/components/window/chat-window.component'),
          },
        ],
      },
      {
        path: '',
        loadComponent: () =>
          import('src/app/features/chat/components/list/chat-list.component'),
      },
    ],
  },
];
Sign up to request clarification or add additional context in comments.

1 Comment

Yes, that works, but i want show chat-offer-list.component inside router-outlet in chat-list.component, not instead of, how i can do that?

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.