What is An Auxiliary Route?

A component has one primary route and zero or more auxiliary routes.. Auxiliary routes allow you to use and navigate multiple routes. To define an auxiliary route you need a named router outlet where the component of the auxiliary route will be rendered.

The name that we're giving to the second outlet suggests that the outlet will be used as a sidebar for the app.

--------

Each component has one primary route and zero or more auxiliary outlets. Auxiliary outlets must have unique name within a component.

To define the auxiliary route we must first add a named router outlet where contents for the auxiliary route are to be rendered.

Here's an example:

import {Component} from '@angular/core';

@Component({
  selector: 'app',
  template: `
    <nav>
      <a [routerLink]="['/component-one']">Component One</a>
      <a [routerLink]="['/component-two']">Component Two</a>
      <a [routerLink]="[{ outlets: { 'sidebar': ['component-aux'] } }]">Component Aux</a>
    </nav>

    <div style="color: green; margin-top: 1rem;">Outlet:</div>
    <div style="border: 2px solid green; padding: 1rem;">
      <router-outlet></router-outlet>
    </div>

    <div style="color: green; margin-top: 1rem;">Sidebar Outlet:</div>
    <div style="border: 2px solid blue; padding: 1rem;">
      <router-outlet name="sidebar"></router-outlet>
    </div>
  `
})
export class AppComponent {

}

Next we must define the link to the auxiliary route for the application to navigate and render the contents.

<a [routerLink]="[{ outlets: { 'sidebar': ['component-aux'] } }]">
  Component Aux
</a>

View Example

Each auxiliary route is an independent route which can have:

• its own child routes

• its own auxiliary routes

• its own route-params

• its own history stack

https://www.techiediaries.com/angular-router-multiple-outlets/

Source : https://angular-2-training-book.rangle.io/routing/aux-routes#:~:text=Angular%20supports%20the%20concept%20of,or%20dialog%2C%20using%20the%20URL.