Angular2：无限路由循环，浏览器崩溃答案

【问题标题】：Angular2: Infinite route loop, browser crashingAngular2：无限路由循环，浏览器崩溃
【发布时间】：2017-08-15 22:16:22
【问题描述】：

当我退出我的应用程序时，在路由到我的登录页面期间似乎存在无限循环。直到几天前，一切似乎都运行良好。这可能是由于 Angular 或 WebPack 的错误造成的吗？

下面是一些代码示例：

app.routing.ts 中的路由：

 { path: 'login', component: LoginComponent },

路由到登录组件的组件函数

logout() {
    this.authGuard.logout();
    this.portalsService.announceLoggedIn("");
    this.router.navigate(['/login']);
}

一切似乎都运行良好，直到最后一行 logout() 路由到我的登录页面 (router.navigate)。很确定这不是我的服务的问题。所有其他路线也都工作得很好，这个问题似乎只在注销时出现。

这是另一个thread on Github，用户遇到了类似的问题。但是他正在使用 canActivate() 而我不是，所以我不确定这是否是相同的原因。他提供了浏览器崩溃的 Plunker，因此检查它可能很有用，因为它与我在浏览器上的体验完全相同。小心点，你的浏览器真的会崩溃哈哈。

到目前为止，我已经在 Chrome 和 Edge 上进行了测试，两者都在注销时崩溃。大多数时候我必须使用任务管理器来关闭它们。尚未在 Mozilla 上测试，因为我的 vendor.js 包编译有问题，可能是相关问题。但它在 chrome 和 edge 上运行良好。

我不确定到底是什么问题，因为在 route.navigation 功能被击中后浏览器崩溃，因此很难调试。可能是 webpack/angular-cli 编译问题。就在上周，这条路线运行得非常好。

附加信息：在 VS2017 和 IIS express 上运行

非常感谢您提供类似经验的任何意见或分享。

【问题讨论】：

崩溃是什么意思？就像浏览器本身停止工作并退出一样？
是的，大多数时候选项卡本身会冻结，我无法退出它，但其他选项卡正在工作。我必须去任务管理器并关闭整个浏览器才能阻止选项卡运行。其他时候整个浏览器本身冻结，我什至无法切换到其他标签
你有没有评论前两行，看看哪一行在循环？
@Vega 嗨对不起，我不确定你的意思。你的意思是我应该注释掉前两行？
是的，我的意思是，对不起

标签： angular webpack routing angular2-routing webpack-dev-server

【解决方案1】：

我遇到了类似的情况，在我的情况下是：this.router.navigate(['/login'])
导致重新创建另一个组件，在组件的 ngOnInit 钩子内是对调用 this.router.navigate(['/login']) 的服务的调用，以防 401 服务器错误，导致无限循环和浏览器崩溃. 我希望这会对你有所帮助。

【讨论】：

【解决方案2】：

我也有类似的问题。

设置了一个守卫，当不满足条件时重定向到另一个页面。它也有相同的保护，因此设置循环和浏览器崩溃。

【讨论】：

【解决方案3】：

你在这里传递了一个错误的参数：

this.router.navigate(  ['/login']  );

这应该是：

this.router.navigate(  ['login']  );

或者如果你想通过 URL 导航，直接告诉它：

this.router.navigateByUrl(  '/login'  );

【讨论】：