0

I have an angular 6 SPA and I'm trying to navigate to a sibling child when the user clicks on a side menu, but after the click event, it throws an error. I'm just changing the shown component right in the inner outlet

Error: Cannot activate an already activated outlet

Here's my parent module

@NgModule({
schemas: [
imports: [
    CommonModule,
    HomeRoutingModule,
    MatDividerModule,
    MatListModule,
    MatSidenavModule,
    FooterModule,
    HeaderModule
],
providers: [],
declarations: [HomeComponent],
exports: [HomeComponent]
})

Parent's routes module:

const routes: Routes = [
  { path: '', component: HomeComponent, canActivateChild: [AuthGuardService], children: [
    { path: '', redirectTo: 'dashboard', pathMatch: 'full' },
    { path: 'dashboard', loadChildren: './dashboard/dashboard.module#DashboardModule' },
    { path: 'reports', loadChildren: './incident-reports/incident-reports.module#IncidentReportsModule' },
    { path: 'activities', loadChildren: './safety-activities/safety-activities.module#SafetyActivitiesModule' },
    { path: 'metrics', loadChildren: './monthly-metrics/monthly-metrics.module#MonthlyMetricsModule' }
  ]},
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule],
  providers: [AuthGuardService]
})

side nav with router link:

<mat-sidenav-container class="side-container">
  <mat-sidenav #sidenav opened="false">
    <mat-nav-list>
      <a mat-list-item routerLink="./dashboard" routerLinkActive="active-link"><i class="material-icons">dashboard</i>  Dashboard</a>
      <mat-divider></mat-divider>
      <a mat-list-item routerLink="./reports" routerLinkActive="active-link">Generate Incident Report</a>
      <mat-divider></mat-divider>
      <a mat-list-item routerLink="./activities" routerLinkActive="active-link">Safety Activities</a>
      <mat-divider></mat-divider>
      <a mat-list-item routerLink="./metrics" routerLinkActive="active-link">Monthly Metrics</a>
      <mat-divider></mat-divider>
      <a mat-list-item routerLink="./profile" routerLinkActive="active-link">Profile</a>
    </mat-nav-list>
  </mat-sidenav>

  <mat-sidenav-content>
    <router-outlet name="innerContainer"></router-outlet>
  </mat-sidenav-content>
</mat-sidenav-container>

And child's route module

const routes: Routes = [
  { path: '', component: IncidentReportsComponent, pathMatch: 'full', outlet: 'innerContainer' }
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
José Epifanio
  • 16
  • 2
  • Please provide the full error, sometimes routes errors not necessary related to routes but to something that failed to construct before – dAxx_ Jul 08 '18 at 23:31
  • Sure! Here's the full error ERROR Error: Uncaught (in promise): Error: Cannot activate an already activated outlet Error: Cannot activate an already activated outlet at RouterOutlet.push../node_modules/@angular/router/fesm5/router.js.RouterOutlet.activateWith (router.js:4615) at ActivateRoutes.push../node_modules/@angular/router/fesm5/router.js.ActivateRoutes.activateRoutes (router.js:3969) at router.js:3921 at Array.forEach () – José Epifanio Jul 09 '18 at 16:17
  • where is your .forRoot configuration? and also you have more than one outlet? cuz i see only one – dAxx_ Jul 09 '18 at 16:24
  • The forRoot config it’s the “parents route module” and it’s imported at the root levele of my app “app.module” and I do have two router outlets. The one you’re looking at it’s the child – José Epifanio Jul 09 '18 at 20:50

0 Answers0