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

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.

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).

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.