title: Angular 4 router Error: Cannot activate an already activated outlet
body: <p>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:</p>
  
  <pre><code> 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)
  </code></pre>
  
  <p>Here is my code</p>
  
  <h1>app.routing.ts</h1>
  
  <pre><code> 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);
  </code></pre>
  
  <h1>app.module.ts</h1>
  
  <pre><code>@NgModule({
      imports: [routing,RouterModule,FormsModule,ReactiveFormsModule,HttpModule, BrowserModule],       
      declarations: [AppComponent],
      bootstrap: [AppComponent], 
      providers: [ appRoutingProviders})
      export class AppModule { 
           constructor(){
      }
      }
  </code></pre>
  
  <h1>Sidebar.component.html</h1>
  
  <pre><code>  &lt;li routerLink="/app/dashboard" routerLinkActive="active"  class="nav-item start "&gt;
                  &lt;a routerLink="/app/dashboard" routerLinkActive="active" class="nav-link nav-toggle"&gt;
                      &lt;i class="icon-home"&gt;&lt;/i&gt;
                      &lt;span class="title"&gt;Dashboard&lt;/span&gt;
                      &lt;span class="arrow"&gt;&lt;/span&gt;
                  &lt;/a&gt;
              &lt;/li&gt;
  </code></pre>
  
  <h1>app.html</h1>
  
  <pre><code> &lt;div&gt;
                  &lt;header-component *ngIf="!isLogin" &gt;&lt;/header-component&gt;
                  &lt;div class="clearfix"&gt; &lt;/div&gt;
                  &lt;div class="page-container" &gt;
                      &lt;div  *ngIf="isLogin ==false"&gt;
                          &lt;sidebar-component &gt;&lt;/sidebar-component&gt;
                      &lt;/div&gt;
                    &lt;div class="page-content-wrapper"&gt;
  
                      &lt;div class="page-content" &gt;
                           &lt;router-outlet &gt;&lt;/router-outlet&gt;
                      &lt;/div&gt;
                    &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div *ngIf="!isLogin" class="page-footer " id="footer"&gt; 
                    &lt;div class="page-footer-inner"&gt; 2016 &amp;copy; By
  
                    &lt;/div&gt;
                    &lt;div class="scroll-to-top"&gt;
                      &lt;i class="icon-arrow-up"&gt;&lt;/i&gt;
                  &lt;/div&gt;
                  &lt;/div&gt;
  
              &lt;/div&gt;
  </code></pre>