我已将我的应用程序从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',{ path: 'app/dashboardMensuel',component: DashboardMensuelComponent,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 © 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',