Angular 4 error when navigating using secondary outlet

Question

I have an issue with navigation using a secondary outlet.

I have a LayoutComponent which is loaded into the primary router-outlet.
The LayoutComponent contains a secondary outlet named content-outlet

So far everything is fine and I am able to navigate to e.g. /accounts/1/overview and have the content-outlet load the correct component (OverviewComponent). But when I click the link in the sidebar to navigate to the /accounts/1/stats route I get an error:

Error: Cannot activate an already activated outlet

The same thing happens if I first navigate to /accounts/1/stats and then try to activate /accounts/1/overview.

The LayoutComponent:

<app-sidebar></app-sidebar>
<div class="topbar-content-wrapper">
  <app-topbar></app-topbar>
  <div class="content-wrapper">
    <router-outlet name="content-outlet"></router-outlet>
  </div>
</div>

The sidebar navigation:

<a href="#" [routerLink]="[ '/accounts', accountId, 'overview' ]">Overview</a>
<a href="#" [routerLink]="[ '/accounts', accountId, 'stats' ]">Stats</a>

The Routes:

{
path: 'accounts/:accountid',
component: LayoutComponent,
canActivate: [AuthService],
children: [
  {
    path: 'stats',
    children: [
      {
        path: '',
        component: StatsComponent,
        outlet: 'content-outlet'
      }
    ]
  },
  {
    path: 'overview',
    children: [
      {
        path: '',
        component: OverviewComponent,
        outlet: 'content-outlet'
      }
    ]
  }
]

Hamed Baatour Hamed Baatour · Accepted Answer · 2017-06-05T13:56:21

change your routes to the following

{
   path: 'accounts/:accountid',
   component: LayoutComponent,
   canActivate: [AuthService],
},
{
    path: 'stats',
    component: StatsComponent,
    outlet: 'content-outlet'
 },
{
    path: 'overview',
    component: OverviewComponent,
    outlet: 'content-outlet'
}

and your sidebar navigation links too:

<a [routerLink]="[{ outlets: { content-outlet: ['overview'] } }]">Overview</a>
<a [routerLink]="[{ outlets: { content-outlet: ['stats'] } }]">Stats</a>

Angular 4 error when navigating using secondary outlet

1 Answers