Navigation ID is not equal to the current router navigation id 错误

Question

我在我的 Angularv5 应用程序中使用 @ngrx/router-store，我最近开始运行遇到一个错误：Navigation ID X is not equal to the current navigation id Y（其中 X 和 Y 是整数）。

当我从特定路线 B 导航到路线 A 时，这个问题一直发生。从任何其他路线导航到路线 A 似乎都可以正常工作。

我发现的唯一其他 S.O. issue related to this 提供了问题可能是由多次快速更新导航引起的可能性。为了测试这是否发生（不应该发生），我在我的根组件内订阅了路由器导航事件，在订阅内设置了一个断点，并打开了一个调试会话来逐步解决问题。这样做，我可以看到

假设当前导航ID为11，当我导航到问题路线时，路由器开始导航，成功执行了包括NavigationEnd在内的每个导航事件，然后立即@ngrx/router-store 抛出一个 'ROUTER_CANCEL' 动作说明：Navigation ID 12 is not equal to the current navigation id 13。据我所知，12 是正确的导航 ID（同样，导航 ID 11 完成并立即抛出 'ROUTER_CANCEL'，路由器不会发出任何进一步的导航事件）。此外，'ROUTER_CANCEL' 操作负载包含导致问题的路由器导航事件，以及导致问题时商店的状态。导致问题的事件 ID 为 12，当时商店中的路由器状态 ID 为 11。因此，12 似乎是正确的导航 ID，不应引发错误。
从问题路线导航到用户配置文件路线时，在@ngrx/router-store 取消导航之前不会出现其他导航。（即我不是快速更新导航路线）
除了 ngrx 调度 'ROUTER_CANCEL' 操作外，没有报告任何错误（也没有抛出任何错误）。

同样，遇到问题的路线工作正常，除非导航从特定路线 B 开始。据我所知，这条特定路线 B 没有什么不同或不寻常（问题路线 A 也不关心人们在哪里来自--这两条路线彼此没有关联）。

最后一件事：在调试会话之外触发错误似乎总是导致形式为 Navigation ID X is not equal to the current navigation id X+1 的错误，但是在调试会话中触发错误可能会导致 Navigation ID 11 is not equal to the current navigation id 15 或 [=19] =]，等等

有人知道发生了什么事吗？我对@ngrx/router-store 不够熟悉，无法真正猜测这是怎么发生的。我的假设是，当@ngrx/router-store 收到 NavigationEnd 事件时，商店中的导航 ID 值会同步增加，所以我什至不确定这些 ID 如何 ever[=54] =] 乱序---更不用说在这种情况下 ID 似乎是正确的。

非常感谢任何想法！

PS：我很乐意 post 编写代码，但是我的应用程序很大，我不知道这个错误是从哪里触发的。

Answer 1

我想通了！在 NavigationEnd 事件上调用 router.navigate() 的组件中有是代码。所以答案类似于this S.O. issue中的答案（快速改变路线）。

I got this error because I was calling router.navigate twice in quick succession, (1 to append queryParams, 1 to append a fragment) so had to refactor my code to only call navigate once.

Answer 2

请post回答一下，因为我运行遇到过类似的问题，但一直找不到原因。希望它能帮助其他人在这里结束...

出现此问题时，也可能是调用重置查询参数引起的。例如在 ngOnDestroy 方法调用中：

public ngOnDestroy(): void {
  // Removing query params on destroy:
  this.router.navigate([], {
    relativeTo: this.route,
    queryParams: {},
    queryParamsHandling: 'merge',
    replaceUrl: true,
  });
}

在该方法中，路由中存在的任何查询参数都在组件的 ngOnDestroy 方法中删除。由于这种方法，路线变化也很快，就像@John 在他的回答中提到的那样。它会导致同样的问题：NavigationCancel 事件被触发并显示以下消息：

NavigationCancel {id: x, url: "/parent/child", reason: "Navigation ID x is not equal to the current navigation id x+1"}
  id: x
  url: "/parent/child"
  reason: "Navigation ID x is not equal to the current navigation id x+1"

因此 NavigationEnd 永远不会触发。

注意： 您可以 enable tracing in your router config ExtraOptions 将参数 enableTracing 设置为 true 以便更轻松地调试此问题。

Answer 3

我遇到了同样的问题，卡了一个星期，直到我清理了我的浏览数据，一切正常。

Answer 4

我遇到了完全相同的问题，但找到了另一个原因来解释它。

TL;DR

所以这不起作用：

<a (click)="navigateTest()" href="#">click me</a>

而这行得通！

<a (click)="navigateTest()">click me</a>

详细解答

在我的模板中

<a (click)="navigateTest()" href="#">click me</a>

在我的组件中

public navigateTest(): void {
    this.router.navigate(['/my-destination']);
}

首先我激活了路由器调试跟踪（路由器forRoot定义中的enableTracing: true）

@NgModule({
  imports: [
    RouterModule.forRoot(routes, {useHash: true, enableTracing: true})
  ],
  exports: [RouterModule]
})
export class AppRoutingModule {
}

我看到我有一个 NavigationStart 事件 id: 2, url: '/my-destination' navigationTrigger: 'imperative'

然后我有另一个 NavigationStart 事件 id: 3, url: '/' navigationTrigger: 'popstate'

没想到这个！

有时（不总是），我也有一个 NavigationCancelled 事件 id:2 在他们之间，原因 Navigation ID 2 is not equal to the current navigation id 3

经过几个小时的调试后，我发现这是因为 HTML 上的 href="#" 我模板上的一个元素...

Answer 5

在我的例子中，我只是在组件的 constructor 内部导航。不要那样做。它取消当前导航，因为它尚未完成。在 ngOnInit 内部导航，因为导航已完成，您可以自由导航到其他地方。

Navigation ID is not equal to the current router navigation id 错误

Navigation ID is not equal to the current router navigation id error

typescript

ngrx

angular

angular-router

ngrx-router-store

TL;DR

详细解答