Angular: Configure a named router outlet

Question

I am currently creating an Angular application that contains different pages. These pages are displayed using the Router module.

One of the things I would like to implement is the RouterOutlet to be able to display different components (views) on a main page. To give you an idea, it's a configuration page that contains 3 tabs and depending on the tab you have selected, it will show one component or another (global, area or item).

Currently, I have implemented the code in such a way that the default page of the outlet is shown but when I try to redirect to another screen (by pressing the tab), it is not shown and I get an error in the console:

main.js:197150 ERROR Error: Uncaught (in promise): Error: NG04002: Cannot match any routes. URL Segment: 'config/area'

The router configuration is as follows: I have two files, one for the global routing of the application and one for this screen (at the configuration screen level).

ROOT
 | - src
      |- app.router.ts
      | - views
            |- config
                 |- config.component.ts
                 |- config.router.ts
                      |- sections
                             |- global
                             |- area
                             |- item

The configuration of config.routing.ts is imported directly into app.routing.ts.

app.router.ts

import { configRoutes } from '../views/config/config.router';


const routes: Routes = [
  {
    path: '',
    redirectTo: 'login',
    pathMatch: 'full'
  },
  {
    path: '',
    component: SideMenuLayoutComponent,
    children: [
      ...
      {
        path: 'config',
        component: ConfigComponent,
        canLoad: [PermissionsGuard],
        children: [
          ...configRoutes
        ]
      }
    ]
  },
...
  {
    path: '**',
    pathMatch: 'full',
    redirectTo: 'login'
  }
];

config.router

export const configRoutes: Routes = [
  {
    canActivate: [PermissionsGuard],
    path: '',
    pathMatch: 'full',
    component: GlobalComponent,
    outlet: 'config'
  },
  {
    canActivate: [PermissionsGuard],
    path: 'global',
    component: GlobalComponent,
    outlet: 'config',
  },
  {
    canActivate: [PermissionsGuard],
    path: 'area',
    component: AreaConfigComponent,
    outlet: 'config',
  }
];

The ConfigComponent component (which is the component containing the tabs and the router-outlet with the named) is:

Typescript

@Component({
  selector: 'app-config',
  templateUrl: './config.component.html',
  styleUrls: ['./config.component.scss']
})
export class ConfigComponent implements OnInit {

  constructor(
    private readonly _translate: TranslateService,
    private readonly router: Router) { }

  ngOnInit() {
    // default view
  }

  tabChange(index: number): void {

    switch (index) {
      case 0:
        this.router.navigate([{ outlets: { config: [ 'config','global' ] }}]);
        break;
      case 1:
        this.router.navigate([{ outlets: { config: [ 'config','area' ] }}]);
        break;
      case 2:
        this.router.navigate([{ outlets: { config: [ 'config','item' ] }}]);
        break;
    }
  }

  getTranslation(key: string): string {
    return this._translate.instant(key);
  }
}

and the HTML (config.component.html) is:

<div class="d-flex flex-column h-100">
  <div class="d-flex flex-row">
    <div class="title mat-ripple mat-tab-label mat-focus-indicator mat-tab-label-active">
      <h6 class="mat-tab-label-content m-0">{{'Configuration' | translate}}</h6>
    </div>
    <div class="triangle"></div>
    <mat-tab-group (selectedTabChange)="tabChange($event.index)" animationDuration="0ms">
      <mat-tab [label]="getTranslation('Global')">
      </mat-tab>
      <mat-tab [label]="getTranslation('Area')">
      </mat-tab>
      <mat-tab [label]="getTranslation('Item')">
      </mat-tab>
    </mat-tab-group>
  </div>
  <div class="flex-grow-1 overflow-auto">
    Works!
    <router-outlet name="config"></router-outlet>
  </div>
</div>

The main problem I see is that when I access the screen, it loads the default component in the outlet (the one in "" in the config.router) but when I try to use another route, I get the above error.

Debugging the Router service I have seen that the configuration is correct, there is no difference between the "" and the global or the area.

Honestly, I've been trying different configurations for 3 days now and I can't find the problem. Does anyone know how to solve it or where is the problem?

Regards!!!!!!!

Solve the problem or provide an answer that can guide me to a possible solution to the problem.

UPDATE (21/08/2023) Solved. Note that there will always be an outlet called "primary". The others are in the form of a tree in the ActivedRoute service.

To edit the router value is to directly overwrite it.

In the following PoC it is created. If you click on the Config button you will see that different options will be displayed, but the important thing is to see the URL. It is mapped with outlets.

https://github.com/jserra91/angular-routing-outlet/tree/main/angular-routing-outlet