Angular 10 Child Routes with Named Outlet

Question

I'm having trouble with routing. I have a standard top nav that is routing properly (settings). But I can't seem to get the child routes in my side nav to display inside a sub outlet rather than the main outlet.

The error I see is:

core.js:4197 ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'settings/custom-song-properties'

  {
    path: 'settings', component: SettingsComponent, canActivate: [AuthGuard],
    children: [
      {
        path: 'custom-song-properties', component: CustomSongPropertiesComponent,
        canActivate: [AuthGuard],
        outlet:'settings-outlet'
      }
    ]
  }

<mat-sidenav-container class="settings-container">
  <mat-sidenav class="settings-side-nav" opened mode="side">
    <mat-list>
      <a [routerLink]="'account'" mat-list-item>Account</a>
      <a [routerLink]="'theme'" mat-list-item>Theme</a>
      <a [routerLink]="['custom-song-properties']" mat-list-item>Custom Song Properties</a>
    </mat-list>
  </mat-sidenav>
  <mat-sidenav-content class="settings-content">
    <router-outlet name="settings-outlet"></router-outlet>
  </mat-sidenav-content>
</mat-sidenav-container>

What am I missing, here?

Answer 1

You'll have to replace [routerLink]="['custom-song-properties']" with [routerLink]="[{ outlets:{ 'settings-outlet': 'custom-song-properties' } }]", since the route configuration object for custom-song-properties defined a named outlet, other than primary, which is the default.