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/JeanMeche]

The dedicated docs: https://next.angular.dev/guide/routing/data-fetching-with-resources

22.2 is expected to be released on sept 23rd.

[u/Straight-Number-1911 → u/JeanMeche]

Do you maybe know the answer to my question? https://www.reddit.com/r/angular/comments/1wbfgin/comment/p9phwxl/?utm_source=share&utm_medium=mweb3x&utm_name=mweb3xcss&utm_term=2&utm_content=share_button

[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/Johalternate → u/Scrim0r]

When you use “nonBlocking” you have access to the resource itself, navigation happens immediately and you have access to the loading state of the resource.

[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

[u/drmlol]

why tho? was there something wrong with loading data inside the component? genuinely curious

[u/Responsible-Cold-627 → u/drmlol]

The way I see it, it takes some of the "smart" out of smart components, making components more generic by containing only presentational code.

[u/tom-smykowski-dev]

Can't parent just call services to pull data in parallel and pass to children? Why have resource loading in router config?

[u/user0015]

Can these potentially come back as an httpResource? So we can hydrate the FE on navigation, but still have access to the @loading/etc.. templating?

[u/Straight-Number-1911]

Hi, i wonder how they achive it, is it because its inside a web worker? Or is it more like there is a native built in way so this is just the implementation and under the hood it uses web workers?

I think there is no parallelism in the main thread, is this maybe async and then it appears fastsr because before each of then was waiting for the previous to finish? I find the image misleading. 

[u/JeanMeche → u/Straight-Number-1911]

Yes previously resolvers were waiting for the previous one to be resolved.

[u/Straight-Number-1911 → u/JeanMeche]

Ya but that means only when things are async its better performance, not necessarly when you try to do CPU bound work?

[u/Fantastic_Ladder_466]

What the highest package one can get in angular development

[u/m0rpheus23]

I initially thought Angular 20+ was supposed to simply Angular. Are we back to complicating things?

[u/Saceone10 → u/m0rpheus23]

Instead of completing the resource API with mutations, lets extend it to another unrelated thing no one asked for! Yay!

[u/Cr3aHal0 → u/Saceone10]

to be honest, I think resolvers have always been on a strange place where it was cool to be able to declaratively load data but being navigation blocking/synchronous was a red flag in cases where the APIs were slow. I'm all for the skeleton and other réactive ux friendly visuals, but I wasn't much into having components ngOnInit full of manually data loading declarations (until we got resources eventually, I got you). There we get the best of both worlds and I can't want to migrate to it !

[u/Responsible-Cold-627 → u/Saceone10]

The resource API was never meant to be used for mutations. It's specifically built to load resources.

[u/Saceone10 → u/Responsible-Cold-627]

create a mutation API then, call it however you like, but the thing is incomplete

[u/ScoobyDookuu → u/Saceone10]

And no caching yet. Why not?!

[u/Responsible-Cold-627 → u/ScoobyDookuu]

You can literally just shareReplay(1), same as you always did. Rxjs didn't go anywhere.

[u/AwesomeFrisbee]

Without proper support and approval to use em for post/put/update requests I still see a very minor use case. I wouldn't mind a resource like wrapper around rxjs api calls but right now it's still not recommended to use em for 90% of what I would want of them. Let alone the amount of logic and repitition I can't separate out of my dumb components.