We all know how the world of applications is progressing rapidly. Your application has to be up to date from user experience to app performance in such a competitive virtual world. Users will surely close your application if it takes time to load. Developing a real-time app with multiple server requests/calls can lead to a poor user experience if itās not handled properly. You have to build the app keeping the user experiences in mind because your application canāt afford such negative impacts due to APIs.Now, you might wonder how to handle multiple requests without affecting the user experience. One of the solutions to this issue is to implement Angular Resolver.
Today, in this tutorial, we will learn the implementation of Route Resolvers in Angular.
What is Angular Resolver?
Angular Resolver is used for pre-fetching some of the data when the user is navigating from one route to another. It can be defined as a smooth approach for enhancing user experience by loading data before the user navigates to a particular component.
Letās see what the difference is in the routing flow if we implement resolvers.
General Routing Flow v/s Angular Resolver Routing Flow
This section might help you to differentiate between the routing flow with or without resolvers.
Steps 2,3 and 4 are done with the help of resolvers.
So we can conclude that resolver is an intermediate code that is executed between clicking the link and loading the component.
Why Choose Angular Resolvers?
Angular Resolvers let the application fetch remote data from the server before theĀ activatedRouteĀ of the next component is activated. We donāt require a spinner until the data is fetched because we wonāt be able to navigate to the next component unless the server data is retrieved.
To understand it better, letās take one scenario- we want to display the array items in a component received in an unordered list or table. For that, suppose we haveĀ *ngIf=āsome conditionāĀ and ourĀ business logic depends upon the length of an array, which will be altered once the API call is successful.
We might face an issue in such a case as the component will be ready before receiving the data (the array item isnāt yet with us).
Here comes Route Resolver to rescue. We can use Angularās Route Resolver class for fetching the data before your component is loaded. And then, the conditional statements can work smoothly with the Resolver.
Letās see how the Resolve Interface looks before building our demo.