Angular 2: NavigationCancel - Navigation ID 2 is not equal to the current navigation id 3

Question

I'm trying to redirect old URLs (links in email templates) from a previous site to another route like this:

if (route.url.indexOf('/#/') !== -1) {
    this.router.navigate(['/my-route']);
}

However, the navigation gets cancelled with the following reason:

Navigation ID 2 is not equal to the current navigation id 3.

Looking at the Angular 2 router source, this happens in the runNavigate method when id !== this.navigationId (https://github.com/angular/angular/blob/master/modules/@angular/router/src/router.ts#L652). I can't find any information about the navigationId property, why this happens and how to solve it.

Redirects between routes that exist seem to work, but not between these old hashmark URLs and existing routes. Do both routes have to exist in the router to be able to redirect between them?

Help would be very appreciated.

Answer 1

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

We got the same error. The problem was a custom component with an input field named routerLink that was used to customize a link. But this field caused Angular to do two navigations, leading to the 'Navigation ID 2 is not equal to the current navigation id 3' error.

Answer 3

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

This was because of a HTML attribute href="#" on my anchor link where I had my onClick method calling the router.navigate().

Detailed answer here:

https://stackoverflow.com/a/61595269/3992814

Answer 4

If you are generating routerLink through an array of routes from .ts file. And your routes contain resolvers...

<ng-container *ngFor="let route of Routes">
    This
   <div [routerLink]="route">{{route}}</div>
    and This
   <div [routerLink]="[route]">{{route}}</div>
    and this too
   <div routerLink="{{route}}">{{route}}</div>
</ng-container>

then don't try this...with resolver...It won't work...

The safer way is simply create a function in ts file.

navigate(link: string): void
  {
    this.router.navigate([link]);
  }

and call this function from html...like this

<ng-container *ngFor="let route of Routes">
   <div (click)="navigate(route)">{{route}}</div>
</ng-container>

It will work fine....Happy Coding!!!