1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.
  2. Anuncie Aqui
    Anuncie aqui você Também: fdantas@4each.com.br

Angular throws error on auxilary routing with lazy loading and params navigation

Discussão em 'Angular' iniciado por Alex Smykov, Novembro 27, 2025.

  1. Alex Smykov

    Alex Smykov Guest

    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 :eek:fferId 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: ':eek:fferId',
    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"
    ]
    }
    }
    ]


    [​IMG]

    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

    Continue reading...

Compartilhe esta Página