Angular 4 router Error: Cannot activate an already activated outlet

Question

I have upgraded my application from Angular2 to Angular 4 . Before that everything including routing was working perfectly.But now after the upgrade, routing has stopped and whenever I click on any link, then the redirection fails and it gives error:

 Error: Uncaught (in promise): Error: Cannot activate an already activated outlet Error: Cannot activate an already activated outlet at k (http://localhost:3000/node_modules/zone.js/dist/zone.min.js:1:12455) at RouterOutlet.activateWith (http://localhost:3000/node_modules/@angular/router/bundles/router.umd.js:5368:19) at ActivateRoutes.placeComponentIntoOutlet (http://localhost:3000/node_modules/@angular/router/bundles/router.umd.js:4558:16) at ActivateRoutes.activateRoutes (http://localhost:3000/node_modules/@angular/router/bundles/router.umd.js:4539:26) at eval (http://localhost:3000/node_modules/@angular/router/bundles/router.umd.js:4475:58) at Array.forEach (native) at ActivateRoutes.activateChildRoutes (http://localhost:3000/node_modules/@angular/router/bundles/router.umd.js:4475:29) at ActivateRoutes.activate (http://localhost:3000/node_modules/@angular/router/bundles/router.umd.js:4449:14) at eval (http://localhost:3000/node_modules/@angular/router/bundles/router.umd.js:4066:22) at SafeSubscriber.eval [as _next] (http://localhost:3000/node_modules/rxjs/Observable.js:110:21) at SafeSubscriber.__tryOrSetError (http://localhost:3000/node_modules/rxjs/Subscriber.js:245:16) at SafeSubscriber.next (http://localhost:3000/node_modules/rxjs/Subscriber.js:187:27) at Subscriber._next (http://localhost:3000/node_modules/rxjs/Subscriber.js:125:26) at Subscriber.next (http://localhost:3000/node_modules/rxjs/Subscriber.js:89:18) at MapSubscriber._next (http://localhost:3000/node_modules/rxjs/operator/map.js:83:26) at k (http://localhost:3000/node_modules/zone.js/dist/zone.min.js:1:12455) at RouterOutlet.activateWith (http://localhost:3000/node_modules/@angular/router/bundles/router.umd.js:5368:19) at ActivateRoutes.placeComponentIntoOutlet (http://localhost:3000/node_modules/@angular/router/bundles/router.umd.js:4558:16) at ActivateRoutes.activateRoutes (http://localhost:3000/node_modules/@angular/router/bundles/router.umd.js:4539:26) at eval (http://localhost:3000/node_modules/@angular/router/bundles/router.umd.js:4475:58) at Array.forEach (native) at ActivateRoutes.activateChildRoutes (http://localhost:3000/node_modules/@angular/router/bundles/router.umd.js:4475:29) at ActivateRoutes.activate (http://localhost:3000/node_modules/@angular/router/bundles/router.umd.js:4449:14) at eval (http://localhost:3000/node_modules/@angular/router/bundles/router.umd.js:4066:22) at SafeSubscriber.eval [as _next] (http://localhost:3000/node_modules/rxjs/Observable.js:110:21) at SafeSubscriber.__tryOrSetError (http://localhost:3000/node_modules/rxjs/Subscriber.js:245:16) at SafeSubscriber.next (http://localhost:3000/node_modules/rxjs/Subscriber.js:187:27) at Subscriber._next (http://localhost:3000/node_modules/rxjs/Subscriber.js:125:26) at Subscriber.next (http://localhost:3000/node_modules/rxjs/Subscriber.js:89:18) at MapSubscriber._next (http://localhost:3000/node_modules/rxjs/operator/map.js:83:26) at k (http://localhost:3000/node_modules/zone.js/dist/zone.min.js:1:12455) at f (http://localhost:3000/node_modules/zone.js/dist/zone.min.js:1:11503) at f (http://localhost:3000/node_modules/zone.js/dist/zone.min.js:1:11189) at http://localhost:3000/node_modules/zone.js/dist/zone.min.js:1:12017 at e.invokeTask (http://localhost:3000/node_modules/zone.js/dist/zone.min.js:1:19923) at Object.onInvokeTask (http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:4123:37) at e.invokeTask (http://localhost:3000/node_modules/zone.js/dist/zone.min.js:1:19844) at n.runTask (http://localhost:3000/node_modules/zone.js/dist/zone.min.js:1:15612) at i (http://localhost:3000/node_modules/zone.js/dist/zone.min.js:1:10565) at HTMLAnchorElement.invoke (http://localhost:3000/node_modules/zone.js/dist/zone.min.js:1:20839)

Here is my code

app.routing.ts

 const routes: Routes = [
        { path: 'login', component: LoginComponent },
        { path: "", component: DashboardComponent, canActivate: [AuthGuard] },
        { path: 'app/dashboard', component: DashboardComponent, canActivate: [AuthGuard] },
        { path: 'app/dashboardMensuel', component: DashboardMensuelComponent, canActivate: [AuthGuard] },

    export const appRoutingProviders: any[] = [
    ];

    export const routing: ModuleWithProviders = RouterModule.forRoot(routes);

app.module.ts

@NgModule({
    imports: [routing,RouterModule,FormsModule,ReactiveFormsModule,HttpModule, BrowserModule],       
    declarations: [AppComponent],
    bootstrap: [AppComponent], 
    providers: [ appRoutingProviders})
    export class AppModule { 
         constructor(){
    }
    }

Sidebar.component.html

  <li routerLink="/app/dashboard" routerLinkActive="active"  class="nav-item start ">
                <a routerLink="/app/dashboard" routerLinkActive="active" class="nav-link nav-toggle">
                    <i class="icon-home"></i>
                    <span class="title">Dashboard</span>
                    <span class="arrow"></span>
                </a>
            </li>

app.html

 <div>
                <header-component *ngIf="!isLogin" ></header-component>
                <div class="clearfix"> </div>
                <div class="page-container" >
                    <div  *ngIf="isLogin ==false">
                        <sidebar-component ></sidebar-component>
                    </div>
                  <div class="page-content-wrapper">

                    <div class="page-content" >
                         <router-outlet ></router-outlet>
                    </div>
                  </div>
                </div>
                <div *ngIf="!isLogin" class="page-footer " id="footer"> 
                  <div class="page-footer-inner"> 2016 &copy; By

                  </div>
                  <div class="scroll-to-top">
                    <i class="icon-arrow-up"></i>
                </div>
                </div>

            </div>

Answer 1

Actually , the issue lies somewhere else . I have added BrowserAnimationModule and "

'@angular/platform-browser/animations': 'npm:@angular/platform-browser/bundles/platform-browser-animations.umd.js',

" in SystemJS , but there was a warning for animations (which initially I ignored) and concentrated on this router outlet error. But when I added "

'@angular/animations':'npm:@angular/animations/bundles/animations.umd.js',
'@angular/animations/browser': 'npm:@angular/animations/bundles/animations-browser.umd.js',

" in SystemJS for solving the warning , the error related to router-outlet also resolved.