Navigating to an Angular Route from AngularJS (Hybrid) runs Resolvers and Guards twice

Which @angular/* package(s) are the source of the bug?

router

Is this a regression?

Yes

Description

#45240 Specifically removed some logic that was responsible for preventing duplicate navigation in hybrid apps, stating that

There have been many updates to the routing pipeline to tolerate duplicate navigations. That is, duplicate navigations can happen and routing should still complete successfully.

The problem with this is that, when this duplicate navigation occurs, all angular resolves and guards are running twice for the route. As a result of upgrading to @angular/router@13.2.6, all of our resolves are running twice, making duplicate server requests for many of our pages. In one instance where this was found, it actually completely broke navigation as the second network request of the same payload will always error out.

Please provide a link to a minimal reproduction of the bug

No response

Please provide the exception or error you saw

No response

Please provide the environment you discovered this bug in (run ng version)

@angular/router: 13.2.6

Anything else?

I was quite shocked that this change specifically was not at all documented in the changelog for 13.2.6, as this seems very breaking to me. Even worse, it’s included in a patch. This code was obviously added for some reason, so it’s weird that it just got deleted in favor of “double navigation being okay.”

[atscott]

b9aab0c went to 13.2.x and 13.3.x. Without knowing the details of your application hybrid navigations, it’s hard to debug your specific use-case. I would guess that you have some app-specific hybrid routing to sync the locations, but I don’t know for sure.

We have a special href directive that is keeping the href attribute up to date on the anchor element. It builds up the href via Router.serializeUrl(Router.createUrlTree(commands, extras)) and appends a hash in the front if necessary.

Ah, yea that’s probably what’s doing it and I would say this is working as intended, more than the old behavior. Setting the href triggers a popstate event, which would cause the Angular router to view this as a URL change that needs to be synced to its internal state. One option would be to delay the href update so that the Router finishes activation by waiting for something like the NavigationEnd event (this is probably the best option – generally you don’t want to navigate until the current navigation finishes). Then it’ll skip the syncing navigation because of this bit of code. Another option would be to ensure that your directive only sets the href if it would be different than what’s currently in the browser URL bar (not sure if you already do this).

[atscott]

https://github.com/angular/angular/commit/b9aab0c87bcccb61167e92c1e910630afad67648 went to 13.2.x and 13.3.x. Without knowing the details of your application hybrid navigations, it’s hard to debug your specific use-case. I would guess that you have some app-specific hybrid routing to sync the locations, but I don’t know for sure.