I have some modules that I use for different sections of a cargo tracking system. Some of them are: scheduleModule, equipmentsModule, driverModule etc. Each of these modules have its own routes that are lazy loaded, and each one have its own different paths relative to the root.

  {
    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)
  },

and each of the modules has its own child routes for the entity details and actions like editing and listing.

I'm opening the main listing pages on a main router-outlet and the navigation of every item details are also opened inside the main outlet. Now I'm changing it to be opened on a different named router-outlet for things like details page inside a drawer like sidebar.

For things directly related to the module that is rendered in the main router-outlet, but there are some things that are out of the main scope but have access points from within the details page of the main entity.

Now with the sub outlet I have something like this:

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

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

As an example, I have a schedule list on a route /schedule/list and then for me to view the details of it from the list, I have a button that takes me to the /schedule/details/:id.

On those routes I did move the rendering of the details page to the drawer outlet with something like:

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

And also from within the details drawer outlet I can navigate to /schedule/edit/:id without closing it, and without losing the list page behind the drawer.

The problem now is that I need to navigate the user also inside the drawer to a diffrent module page like /drive/details/:id.

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

As it doesn't share the same base path with the schedules module I got an error of a not found route.

How would I allow the user to navigate to a different module's route keeping the main router rendered page as is. Something like an independant navigation on the main and the secondary named router-outlet.

PS. Both the main and the named router-outlets are in the main app.component.html outside the child modules, inside the main app.module.ts.

PS2. I'm using Angular v12.

PS3. I actually created a github repo with a sample of how it should work, but it also didn't

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