Angular 4路由器错误：无法激活已经激活的插座

Question

我已将应用程序从Angular2升级到Angular 4。在此之前，包括路由在内的所有功能都可以正常运行，但是现在升级之后，路由已停止，并且每当我单击任何链接时，重定向都会失败并出现错误：

 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)

这是我的代码

应用程序路由

 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

事实上，问题出在别的地方。我添加了 BrowserAnimationModule 和“

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

“ 在 SystemJS 中，但是有一个动画警告（最初我忽略了）并集中在这个路由器出口错误上。但是当我添加“

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

” 在 SystemJS 中解决警告时，与 router-outlet 相关的错误也得到解决。