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

2019年7月28日 520次阅读

我已将我的应用程序从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)

这是我的代码

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>

最佳答案 实际上,问题出在其他地方.我添加了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中解决警告问题,与路由器插座相关的错误也解决了.

点赞