Named Router Outlet- I need to active the both multiple outlets Using angularv17.0^.0^(main outlet + 2 named Outlets)

Question

Problem : - The second named router outlet(chat Area) in the router module is not rendering but the URL works fine.

The UI idea is inspired from the vscode.

which is : - the icons from the left side is the main nav bar based on the link the user click, assume the user click on the file Explore icon the aside which next to the icon nav bar renders the files and this step is working fine for me in the user path when it's under the children of main route, after that the use click on any file the file would open/render in the editor area (which is here as chatArea).

if I give the route like this the url would be some thin like this localhost:4200/(aside:users/(chatArea:chat/234562345634560987452745820404529487) Above URL is the example of the url.

JYI : I'm not using the SSR or common routing like just using the router outlet, because I learning angular so I need to know these stuffs.

This below code snippet is my router Module

import { Component, Inject, NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { AppHomeComponent } from './pages/main/app-main.component';
import { UserListComponent } from './components/user-list/user-list.component';
// import { UserGroupListComponent } from './components/user-group-list/user-group-list.component';
import { UserGroupListComponent } from '../app/components/user-group-list/user-group-list.component';
import { ChatMessagesComponent } from './components/chat-messages/chat-messages.component';
import { SignupComponent } from './pages/signup/signup.component';
import { LoginComponent } from './pages/login/login.component';
import { SignupService } from './pages/signup/signup.service';
import { authGuard, singupLoginGuard } from './auth-guard.guard';
import { ChatAreaComponent } from './components/chat-area/chat-area.component';

const routes: Routes = [
  {

    path: '',
    component: AppHomeComponent,
    children: [
      {
        path: 'users',
        component: UserListComponent,
        outlet: "aside",
      },
      {
        path: 'groups',
        component: UserGroupListComponent,
        outlet: "aside",

      },

    ],
    canActivate: [authGuard]
  },
  {
    path: "chat/:userKey",
    component: ChatAreaComponent,
    outlet: "chatArea"
  },
  {
    path: 'signup',
    component: SignupComponent,
    canActivate: [singupLoginGuard] // if the user reached the root path then they should not access the signup page or login page using the can active guard by a variable called userCurrentlyLoggedin = false then swtich it t the true after user logged in
  },
  {
    path: 'login',
    component: LoginComponent,
    canActivate: [singupLoginGuard]
  },
  {
    path: '**',
    redirectTo: "/",
    pathMatch: "full"
  },


];

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

This is the userList Component which is rendered in the aside tag and outlet

<div class="flex flex-col w-full h-full gap-2 md:w-full">

  <div
    class="usercardlist   w-full h-auto rounded-md cursor-pointer select-none  text-white  p-[0.2rem] hover:bg-gray-700
      hover:bg-opacity-50 flex justify-start gap-1 items-center "
    *ngFor="let user of userList;index as i">
    <!-- Group Profile pic -->

    <app-userprofile [name]="user.fullName"></app-userprofile>
    <a
    [routerLink]="[{outlets:{chatArea:['chat',user.userKey]}}]">
    <!-- (click)="establishSocket(user.userKey)" -->
    {{user.userName}}
    </a>

  </div>
</div>
<!-- bg-gray-700 text-white hover:text-black p-[0.2rem] hover:bg-sky-100  -->

This is my main layout

<div id="mainlayout" class="grid w-screen h-screen overflow-hidden">

  <app-action-center class="w-12"></app-action-center>

  <aside
    class="flex flex-col justify-start w-screen h-screen p-2 overflow-y-auto bg-background-200 md:w-auto lg:w-auto">
    <app-search></app-search>
    <router-outlet name="aside"></router-outlet>
  </aside>

  <main
    class="relative hidden overflow-auto lg:block md:block bg-background-100">
    <!-- <app-chat-area></app-chat-area> -->
    <router-outlet name="chatArea"></router-outlet>
  </main>
</div>

I need an solution to solve this component not rendering, I think the issue cause by the main/primary router outlet because the outlet's are active a single link at a time? or maybe I think so? .

I need help on this, kindly consider this as valid doubt/confusion.

Thanks in advance.