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

Question

I\'m using @ngrx/router-store in my Angularv5 app and I recently started running into a an error: Navigation ID X is not equal to the current navigation id Y (w

Answer 1

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

---

TL;DR

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: true in router forRoot definition)

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

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

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

This one is not expected!

Sometimes (not always), I also have a NavigationCancelled event for id:2 between them, with cause 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...

Answer 2

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

Answer 3

In my case I was just navigating inside component's constructor. Don't do that. It cancels the current navigation because it's not finished yet. Navigate inside ngOnInit because there the navigation is finished and you're free to navigate somewhere else.

Answer 4

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

Answer 5

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 ngOnDestroy method call:

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 ngOnDestroy method 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: NavigationCancel event is fired with following message:

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 NavigationEnd will never fire.

---

Note: You can enable tracing in your router config ExtraOptions with the param enableTracing set to true to make it easier to debug this issue.