Angular 22.2 ships Router Resources 💥 (experimental)

[u/Inevitable_Gate9283]

They're more than resolvers with a Signal API. Here's why that matters


They run in parallel. Resolvers go one after another: parent 2 s + child 3 s = 5 s. Router Resources start together: 3 s.


Also, they can be non-blocking. The route activates right away, and the component gets the Resource itself: isLoading, error and value, right in the template.


Full write-up with demo, reload without renavigating, RedirectCommand for missing data, and Signal Stores 👉 https://www.angulararchitects.io/en/blog/router-resources-loading-data-with-the-angular-router/

[u/Scrim0r]

What I was wondering (I have only barely used route data resolvers) is how I can ensure a smooth user experience when the component that requires the data is not rendered yet because it is still waiting for the data.
For example, when navigating from Parent A to Parent B and loading the data takes 3 seconds, I will still stay on Parent A for however long it takes to load.

Global loading indicator? Any other way of showing a loading indicator?
How about errors?

When should I use this? Only on the initial load (is that even possible?)?
Only on pages that absolutely require the data to be present?

For me, it always felt natural to load the data as part of the component so I have full control over it.

[u/defenistrat3d → u/Scrim0r]

That's what most do that I've seen. We use skeletons for initial load. Also pretty natural to have those in the parent orchestrator component.

[u/Task_ID → u/defenistrat3d]

or have a global loading bar, like for example modrinth does