Can't navigate to child routes after returning to parent component from deeply nested link (Angular4)

I installed a panel to demonstrate the problem:

https://plnkr.co/edit/BSxXBkXUFy3FcJTOf84F?p=preview

Here is the navigation flow =>

• Click on 'Child2 Link' (which is inside child1 component)
• Click on "Parent Link" (top level)
• Click 'Child1 Link' (will not work)

For some reason, after following the steps above, I will no longer be able to navigate anywhere and the application will crash.

Here's the code you need:

PARENT

 <div *ngIf="router.url != '/parent/child2'">
      <ul>
        <li><a routerLinkActive="active" routerLink="child1">Child1</a></li>
      </ul>

      <router-outlet></router-outlet>

 </div>

 <div *ngIf="router.url == '/parent/child2'">
       <router-outlet></router-outlet>
 </div>

      

        
        
        
      

    

child1

  <div>
      <a routerLinkActive="active" routerLink="../child2">Child2</a>
  </div>

      

        
        
        
      

    

MILLING

const appRoutes: Routes = [
  {path: '', redirectTo: '/parent/child1', pathMatch: 'full'},
  {
    path: 'parent',
    component: ParentComponent,
    children: [
      {path: 'child1', component: Child1Component},
      {path: 'child2', component: Child2Component}
    ]
  }
];

      

        
        
        
      

    

When running this example locally (via the CLI), I get this error: (which for some reason does not appear in the panel)

ERROR Error: Uncaught (in promise): Error: Cannot activate an already activated outlet
Error: Cannot activate an already activated outlet
    at RouterOutlet.webpackJsonp.../../../router/@angular/router.es5.js.RouterOutlet.activateWith (router.es5.js:5430)
    at ActivateRoutes.webpackJsonp.../../../router/@angular/router.es5.js.ActivateRoutes.activateRoutes (router.es5.js:4578)
    at router.es5.js:4529
    at Array.forEach (<anonymous>)
    at ActivateRoutes.webpackJsonp.../../../router/@angular/router.es5.js.ActivateRoutes.activateChildRoutes (router.es5.js:4529)
    at ActivateRoutes.webpackJsonp.../../../router/@angular/router.es5.js.ActivateRoutes.activateRoutes (router.es5.js:4546)
    at router.es5.js:4529
    at Array.forEach (<anonymous>)
    at ActivateRoutes.webpackJsonp.../../../router/@angular/router.es5.js.ActivateRoutes.activateChildRoutes (router.es5.js:4529)
    at ActivateRoutes.webpackJsonp.../../../router/@angular/router.es5.js.ActivateRoutes.activate (router.es5.js:4422)
    at RouterOutlet.webpackJsonp.../../../router/@angular/router.es5.js.RouterOutlet.activateWith (router.es5.js:5430)
    at ActivateRoutes.webpackJsonp.../../../router/@angular/router.es5.js.ActivateRoutes.activateRoutes (router.es5.js:4578)
    at router.es5.js:4529
    at Array.forEach (<anonymous>)
    at ActivateRoutes.webpackJsonp.../../../router/@angular/router.es5.js.ActivateRoutes.activateChildRoutes (router.es5.js:4529)
    at ActivateRoutes.webpackJsonp.../../../router/@angular/router.es5.js.ActivateRoutes.activateRoutes (router.es5.js:4546)
    at router.es5.js:4529
    at Array.forEach (<anonymous>)
    at ActivateRoutes.webpackJsonp.../../../router/@angular/router.es5.js.ActivateRoutes.activateChildRoutes (router.es5.js:4529)
    at ActivateRoutes.webpackJsonp.../../../router/@angular/router.es5.js.ActivateRoutes.activate (router.es5.js:4422)
    at resolvePromise (zone.js:770)
    at resolvePromise (zone.js:741)
    at zone.js:818
    at ZoneDelegate.webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:424)
    at Object.onInvokeTask (core.es5.js:3924)
    at ZoneDelegate.webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:423)
    at Zone.webpackJsonp.../../../../zone.js/dist/zone.js.Zone.runTask (zone.js:191)
    at drainMicroTaskQueue (zone.js:584)
    at HTMLAnchorElement.ZoneTask.invoke (zone.js:490)

      

        
        
        
      

    

I'm not sure what is causing the crash?

I hope the problem is clear! Please let me know if you need more information.