Angular 4路由器错误:无法激活已激活的插座
发布时间:2020-12-17 17:09:32 所属栏目:安全 来源:网络整理
导读:我已将我的应用程序从Angular2升级到Angular 4.在此之前,包括路由在内的一切都运行得很好.但是现在升级后,路由已经停止,每当我点击任何链接时,重定向都会失败,并且会出错: Error: Uncaught (in promise): Error: Cannot activate an already activated outl
我已将我的应用程序从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', “在SystemJS中解决警告问题,与路由器插座相关的错误也解决了. (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |