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) {
    thi         


        

Answer 1

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 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 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 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!!!