Angular secondary router-outlet not displaying anything?

Question

I had a working website, where only the main content changes with url, the others are "static". I did this with router-outlet, and in app-routing.module.ts I just specified the paths. After that I wanted to create a sidebar, which is looking the same in every page, but, when a user navigates through link, the sidebar's content (which links/menu items are displayed) should change. So I thought I should put the sidebar's outlet (the secondary outlet) into the layout, and only create components for when the links/menu items are different. Code:

<div class="rows">
  <div id="row_header">
    <app-header></app-header>
  </div>
  <div id="side_nav">
    <div class="side_nav_container">
      <router-outlet name="sidebar"></router-outlet> 
    </div> 
  </div>
  <div id="row_middle">
    <app-main-content></app-main-content>
  </div>
  <div id="row_footer">
    <app-footer></app-footer>
  </div>
</div>

This is app.component.ts, this is the layout for the website. You can see that there is no default router-outlet, only for the sidebar, because I put the primary outlet in the middle section, in app-main-content. main-content.component.html:

<!-- This is where all the content goes, even when the user navigates through menu links (NewsPage, Rules, Topics, Login) -->
<router-outlet></router-outlet>

This is my app-routing-module.ts:

const routes: Routes = [
  { path: '', redirectTo: '/topics', pathMatch: 'full'},
  { path: 'topics', component: TopicsPageComponent },
  { path: 'login', component: LoginPageComponent },
  {
    path: 'topics',
    component: SideNavTopicsComponent,
    outlet: 'sidebar'
  },

];

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

The primary outlet is working fine when navigating, but the side bar's secondary outlet does nothing. Can you see what I did wrong? Maybe the problem is I put the secondary outlet in the app compontent, and only after that there is the primary outlet?

Nikhil Chandu Nikhil Chandu · Accepted Answer · 2020-04-11T13:38:03

You need to specify all the outlets where you want the navigation to take place in your navigation link.

For example as per below code primary outlet will be routed to login component and sidebar outlet will be routed to topics component.

<a [routerLink]="[{ outlets: { primary: ['login'],sidebar: ['topics'] } }]">Topics</a>

Angular secondary router-outlet not displaying anything?

1 Answers