Angular: How to change the URL before resolvers complete?

Question

When using Resolvers in Angular (7), is it possible to have the URL change before Resolvers are executed? I am looking to implement a global loading bar like the one on YouTube, where the data of the next page is loaded before the content of the current page is replaced with the new page content - which is exactly how a Resolver behaves.

On YouTube however, the URL changes at the start of navigation, and thus before the content is loaded, while in Angular, when using a Resolver, the URL is not changed until both Resolvers and any Guards have finished executing (successfully).

Is there a way to achieve behaviour similar to YouTube, where the URL changes immediately, but the content is not changed before it has finished loading?

Maybe you want something [like this](https://stackoverflow.com/questions/824349/how-do-i-modify-the-url-without-reloading-the-page/3354511#3354511). I've never tried it and I'm not sure it'll work. The idea would be to manually change the address bar and let angular just confirm the URL (by rewriting the same string there) after the resolver has done its work. — julianobrasil, Mar 12 '20 at 20:16

score 2 · Accepted Answer · answered Mar 16 '20 at 12:28

You can change the behavior of when Angular updates the URL, by specifying a urlUpdateStrategy in the ExtraOptions passed to RouterModule.forRoot(). Specifying eager will result in the URL being updated before attempting navigation, while specifying deferred, or leaving it unspecified will result in the URL updating after resolvers and guards have finished executing:

RouterModule.forRoot(routes, {
  urlUpdateStrategy: 'eager'
})

Angular: How to change the URL before resolvers complete?

1 Answers1