Sequential router navigation in Angular

Simultaneous requests to navigate via the router cause the earlier request to be cancelled in favour of the more recent.

Our application has multiple independent components on the page, all listening to params or queryParamMap changes in the ActivatedRoute. When an entity in the application is deleted by the user, we have to navigate away from it, which triggers independent requests from each component’s ngrx feature effect. This will almost always lead to a race, where the last request wins, but really we want all of them to succeed.

To workaround this we implemented a queue around the Router:

The queue is represented by a promise, i.e. the aggregate of all of the requests. Enqueuing is simply a matter of replacing the current queue with the result of awaiting the current queue, followed by the next call to navigate.