25

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.

adamfinstorp
  • 1,627
  • 3
  • 17
  • 26

4 Answers4

40

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.

Simon Briggs
  • 1,249
  • 1
  • 11
  • 14
  • I was calling navigation twice in diff places of my application. One on NgDestroy and another in my effect(NgRX). This answer help quite much. – BAcevedo Jun 18 '21 at 20:22
  • Same issue here. Route guard was calling the navigate on 2ndtime which caused this. – Swapnil Mhaske Jan 19 '23 at 08:27
1

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

Sohel Siddiki
  • 61
  • 1
  • 3
  • Do you know why this is exactly? How did you figure this out? I'm generating a menu structure from an array of routes in code and I'd like for these links to behave like proper html links. I don't think that is too exotic of an idea, so I'm intrigued. – vhdirk Aug 19 '21 at 17:12
1

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.

sloth
  • 99,095
  • 21
  • 171
  • 219
0

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

TooLiPHoNe.NeT
  • 479
  • 1
  • 5
  • 22