angular - Încarcă rutele din diferite module într-un router-outlet cu nume

Am câteva module pe care le folosesc pentru diferite secțiuni ale unui sistem de urmărire a mărfurilor. Unele dintre ele sunt: scheduleModule, equipmentsModule, driverModule etc. Fiecare dintre aceste module are propriile căi care sunt încărcate leneș, și fiecare are propriile căi diferite relative la rădăcină.

  {
    path: 'equipamentos',
    loadChildren: () => import('./modules/equipments/equipments.module').then(m => m.EquipmentsModule)
  },
  {
    path: 'schedules',
    loadChildren: () => import('./modules/schedules/schedules.module').then(m => m.SchedulesModule)
  },
  {
    path: 'drivers',
    loadChildren: () => import('./modules/drivers/drivers.module').then(m => m.DriversModule)
  },

și fiecare dintre module are propriile rute copil pentru detaliile entității și acțiuni precum editarea și listarea.

Deschid paginile principale de listare pe un router-outlet principal și navigarea către detaliile fiecărui element se deschide de asemenea în interiorul outlet-ului principal. Acum îl schimb pentru a se deschide pe un router-outlet cu nume diferit pentru lucruri precum pagina de detalii în interiorul unui sertar asemeni unei bare laterale.

Pentru lucrurile direct legate de modulul care este redat în router-outlet principal, dar există unele lucruri care sunt în afara domeniului principal, dar au puncte de acces din interiorul paginii de detalii a entității principale.

Acum, cu ieșirea pentru subwoofer, am ceva de genul acesta:

<div class='mainPage'>
   <router-outlet></router-outlet>
</div>

<sidebar-drawer>
   <router-outlet name="drawer"></router-outlet>
</sidebar-drawer>

Ca exemplu, am o listă de programări pe ruta /schedule/list și apoi, pentru a vedea detaliile acesteia din listă, am un buton care mă duce la /schedule/details/:id.

Pe acele rute am mutat redarea paginii de detalii în conectorul drawer cu ceva de genul:

   this.router.navigate(['schedules', {outlets: {drawer: ['details', schedule.id]}}], {relativeTo: this.route.root});

Și de asemenea, din interiorul sertarului de detalii pot naviga către /schedule/edit/:id fără a-l închide și fără a pierde pagina cu lista din spatele sertarului.

Problema acum este că trebuie să navighez utilizatorul și în interiorul sertarului către o pagină de modul diferită, cum ar fi /drive/details/:id.

 this.router.navigate([{outlets: {drawer: ['/', 'driver', 'details', selectedDriverId]}}], {relativeTo: this.route.root});

Deoarece nu împărtășește aceeași cale de bază cu modulul de programe, am primit o eroare de rută negăsită.

Cum aș putea permite utilizatorului să navigheze către ruta unui alt modul păstrând pagina redată de router-ul principal neschimbată. Ceva de genul unei navigări independente pe router-ul principal și cel secundar denumit router-outlet.

PS. Atât router-outlets principale, cât și cele denumite sunt în app.component.html principal, în afara modulelor copil, în interiorul app.module.ts principal.

PS2. Folosesc Angular v12.

PS3. De fapt, am creat un depozit GitHub cu un exemplu de cum ar trebui să funcționeze, dar nici acesta nu a funcționat

https://github.com/BarretoDiego/router-test