Error: Cannot match any routes. URL Segment: 'builder' while having nested routing-outlets

Question

Error: Cannot match any routes. URL Segment: 'builder' when having nested router-outlets

Angular 8 trying to create nested router-outlet routing

______________________________________________
Routing:
const routes: Routes = [
  {
    path: '', canActivate: [AuthGardGuard], component: HomeComponent , children: [
      {path: 'builder', component: ViewBuilderComponent, outlet: 'builder'},
      {path: 'settings', component: SettingsComponent, outlet: 'builder'},
    ]
  },
  {path: 'login', component: LoginComponent}
];
_________________________________________________
Main outlet 
<router-outlet></router-outlet>
________________________________________________
HomeComponent:
<div>
<a [routerLink]="['settings']"
         routerLinkActive="active-link"><mat-icon svgIcon="tune"></mat-icon> <span class="">settings</span></a>
<a [routerLink]="['builder']"
         routerLinkActive="active-link"><mat-icon svgIcon="tune"></mat-icon> <span class="">builder</span></a>
<div class="router">
    <router-outlet name="builder"></router-outlet>
  </div>
</div>

Result is  Cannot match any routes. URL Segment: 'builder'
or Cannot match any routes. URL Segment: 'settings'

LppEdd LppEdd · Accepted Answer · 2019-08-21T12:51:15

You need to explicitly specify the secondary outlet name in the routerLink directive. So

[routerLink]="[{ outlets: { builder: ['settings'] }}]"
[routerLink]="[{ outlets: { builder: ['builder'] }}]"

Or, if that doesn't match your needs or doesn't work as expected

[routerLink]="['', { outlets: { builder: ['settings'] }}]"
[routerLink]="['', { outlets: { builder: ['builder'] }}]"

Error: Cannot match any routes. URL Segment: 'builder' while having nested routing-outlets

1 Answers