Angular can't find the routing path for auxiliary `router-outlet`

Question

I am experimenting with routing in angular to better understand the concept. I am getting an exception NG04002: Cannot match any routes. URL Segment: 'about' when I click on About link which is routing to an auxiliary router-outlet called outlet1. Routing to the primary router-outlet works fine. I don't understand why it does not want to route to auxiliary router-outlet?  Here is my app.component.html

<div style="text-align:center">
  <h1>
    Welcome to {{title}}!!
  </h1>
  <nav>
    <div class="container">
      <div class="row">
        <div class="col-2">
          <a routerLink="home" routerLinkActive="active"><button type="button" class="btn btn-primary">
              Home</button></a>
        </div>
        <div class="col-2">
          <a routerLink="about"><button type="button" class="btn btn-primary">
              About</button></a>
        </div>

        <div class="col-1">
          <a routerLink="dashboard"><button type="button" class="btn btn-primary">
              Dashboard</button></a>
        </div>
      </div>
    </div>
</nav>
  <router-outlet></router-outlet>
  <div >
    <button type="button" class="btn btn-primary">Primary</button>
    <button type="button" class="btn btn-secondary">Secondary</button>
    <button type="button" class="btn btn-success">Success</button>
    <button type="button" class="btn btn-danger">Danger</button>
    <button type="button" class="btn btn-warning">Warning</button>
    <button type="button" class="btn btn-info">Info</button>
    <button type="button" class="btn btn-light">Light</button>
    <button type="button" class="btn btn-dark">Dark</button>

    <button type="button" class="btn btn-link">Link</button>
  </div>
</div>
<router-outlet name="outlet1"></router-outlet>

And here is my app-routing.module.ts

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HomeComponent } from './components/home/home.component';
import { AboutComponent } from './components/about/about.component';
import { DashboardComponent } from './components/dashboard/dashboard.component';
import { AuthGuard } from './auth.gard';

const routes: Routes = [
  { path: 'home',
    component: HomeComponent
  },
  {
    path: 'about', canActivate: [AuthGuard],
    component: AboutComponent, outlet:"outlet1",
  },
  { path: 'dashboard',
    component: DashboardComponent
  }];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

Answer 1

The routerLink must have the outlet specified, with a different syntax

When you normally navigate, it will always navigate to the primary routing/primary router-outlet (<router-outlet></router-outlet>)

Since we need to access the secondary routing/secondary router-outlet (<router-outlet name="outlet1"></router-outlet>)

We must define it a different way!

[routerLink]="['', { outlets: { outlet1: ['about'] } }]" 1 2 3 4

1. primary route - we are not navigating anywhere so we set it to '' (same route)

2. outlets - the outlets object where we specify the outlet navigations needed

3. outlet1 - the name of our secondary outlet where we want to navigate

4. outlet navigation path - named routing path, so we want to navigate to 'about'

Docs for Reference:

1. Router Link

2. Display multiple routes in named outlets

3. Router Outlet

Before:

<a routerLink="about"><button type="button" class="btn btn-primary">
          About</button></a>

Before:

<a [routerLink]="['', { outlets: { outlet1: ['about'] } }]"><button type="button" class="btn btn-primary">
          About</button></a>