Functional Resolvers in Angular

Resolvers in Angular are data providers that are used to pre-fetch data when the user is navigating through the application before Angular has rendered the desired page; i.e. it blocks the navigation until it’s resolved. The resolved data is accessible in the component through the ActivatedRoute class.

Previously we used to generate a resolver(a service file) and implement the Resolve class.

But as per the latest official Angular docs, it clearly mentions:

Class-based Route resolvers are deprecated in favor of functional resolvers. An injectable class can be used as a functional guard using the inject function

So now we do not need to generate a resolver(service file) using the CLI and implement the Resolve class. It rather got a lot simpler.
Here’s how:

Functional Resolver

So we just create a simple Typescript file and export a function of type ResolveFn.

Then use it in the routes, exactly in the same way that we did for the Class based resolvers.

Adding it to the routes

That’s it. You’re good to go now!