typescript 导航ID不等于当前路由器导航ID错误

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

提问by John

I'm using @ngrx/router-storein my Angularv5 app and I recently started running into a an error: Navigation ID X is not equal to the current navigation id Y(where X and Y are integers).

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

This problem happens consistently when I navigate to route A from a specific route B. Navigating to route A from any other route seems to work fine.

当我从特定路线 B ​​导航到路线 A 时，此问题始终发生。从任何其他路线导航到路线 A 似乎工作正常。

The only other S.O. issue related to thiswhich I've found, offers up the possibility that the issue could be caused by rapidly updating the navigation multiple times. To test if this was happening (it shouldn't be), I subscribed to router navigation events inside my root component, set a breakpoint inside the subscription, and opened up a debug session to step through the problem. Doing this, I can see that

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

1. Say the current navigation ID is 11. When I navigate to the problem route, the router starts navigation, successfully executes every navigation event including NavigationEndand then immediately @ngrx/router-store throws an 'ROUTER_CANCEL'action stating that: Navigation ID 12 is not equal to the current navigation id 13. As far as I can tell, 12 is the correct navigation ID (again, navigation ID 11 completes and immediately 'ROUTER_CANCEL'is thrown without the router emitting any further navigation events). Furthermore, the 'ROUTER_CANCEL'action payload contains both the router navigation event that caused the problem, as well as the state of the store when the problem was caused. The event which caused the problem has an ID of 12, the router state in the store at the time had an ID of 11. So again, 12 seems to be the correct navigation ID and should not be throwing an error.

2. On navigation to the user profile route from a problem route, no other navigation occurs until @ngrx/router-store cancels navigation. (i.e. I am not rapidly updating the navigation route)

3. Other than ngrx dispatching a 'ROUTER_CANCEL'action, no errors are reported (and no errors are thrown).

1. 假设当前导航 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，不应引发错误。

2. 从问题路线导航到用户配置文件路线时，在@ngrx/router-store 取消导航之前不会发生其他导航。（即我没有快速更新导航路线）

3. 除了 ngrx 分派'ROUTER_CANCEL'动作外，不会报告任何错误（也不会抛出任何错误）。

Again, the route experiencing problems works fine unless navigation begins from a specific route B. As far as I can tell, there is nothing different or unusual about this specific route B (nor does the problem route A care where people are coming from--the two routes have no association with each other).

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

One last thing: triggering the bug outside of a debug session always seems to cause errors in the form Navigation ID X is not equal to the current navigation id X+1, however triggering the bug inside a debug session might cause Navigation ID 11 is not equal to the current navigation id 15or Navigation ID 13 is not equal to the current navigation id 20, etc.

最后一件事：在调试会话之外触发错误似乎总是会导致表单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或Navigation ID 13 is not equal to the current navigation id 20等。

Does anyone have any ideas what is going on? I'm not familiar enough with @ngrx/router-store to really guess how this might be happening. My assumption is that the navigation ID value in the store increases synchronously when NavigationEndevents are received by @ngrx/router-store, so I'm not even sure how the ids could everget out of order---let alone in this case where the ids appear to be correct.

有谁知道发生了什么？我对@ngrx/router-store 不够熟悉，无法真正猜测这可能是如何发生的。我的假设是，在同步商店增加导航ID值时，NavigationEnd通过@ NGRX /路由器店收到的事件，所以我甚至不确定的ID怎么可能永远走不出的顺序---更不用说在这种情况下ids 似乎是正确的。

Any thoughts are greatly appreciated!

任何想法都非常感谢！

PS: I'm happy to post code, but my app is large and I don't have any clues as to where this bug is being triggered from.

PS：我很高兴发布代码，但我的应用程序很大，我没有任何关于从何处触发此错误的线索。

回答by John

I figured it out! There wascode in a component that was calling router.navigate()on a NavigationEndevent. So the answer was similar to the answer in this S.O. issue(rapidly changing the route).

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

回答by Wilt

Will post an answer, because I ran into similar issue, but it was hard to find why it happened. Hope it will help others ending up here...

将发布答案，因为我遇到了类似的问题，但很难找到它发生的原因。希望它会帮助其他人结束这里......

When having this problem it can also be caused by a call to reset query params. For example in a ngOnDestroymethod call:

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

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

In the method any query params present in the route are removed in the ngOnDestroymethod of a component. Because of this method the route changes rapidly as well similar to @John mentions in his answer. It leads to the same problem: NavigationCancelevent is fired with following message:

在该方法中，路由中存在的任何查询参数都将在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"

And as a result NavigationEndwill never fire.

因此NavigationEnd永远不会火。

---

---

Note:You can enable tracing in your router config ExtraOptionswith the param enableTracingset to trueto make it easier to debug this issue.

注意：您可以在路由器配置中启用跟踪ExtraOptions，并将参数enableTracing设置为true，以便更轻松地调试此问题。

回答by Rennan wagner Zaniboni

i had the same problem, and i got stuck for a week, till i just clean my browsing data, and everything works just fine.

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

回答by TooLiPHoNe.NeT

I had the exact same problem, but found another cause to explain it.

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

---

---

TL;DR

TL; 博士

So this DOES NO WORK :

所以这不起作用：

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

Whereas THIS WORKS!

而这行得通！

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

---

---

Detailed answer

详细解答

In my template

在我的模板中

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

In my Component

在我的组件中

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

First I activated the router debug tracing (enableTracing: truein router forRootdefinition)

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

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

I saw that I had a NavigationStartevent with id: 2, url: '/my-destination' navigationTrigger: 'imperative'

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

Then I have another NavigationStartevent with id: 3, url: '/' navigationTrigger: 'popstate'

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

This one is not expected!

没想到这个！

Sometimes (not always), I also have a NavigationCancelledevent for id:2between them, with cause Navigation ID 2 is not equal to the current navigation id 3

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

After hours of debug I found that this is because of the href="#"on the HTML a element on my template...

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