Performance is one of the biggest variables that impact the experience and satisfaction of our users; therefore, optimal performance should be a constant goal for the web developer.
Perceived perception is the game we want to win, and we have plenty of options in the Angular ecosystem. We can load the information that our page will require before it renders and, for that, we will use the Resolveroute saver resource.
Unlike the guard we studied earlier, its purpose is to return information needed by the page being directed by the route.
We will create this guard using the Angular CLI. In your command prompt, use the following command:
ng g resolver diary/diary
In the new file created, let’s change the function that the Angular CLI generated:
export const diaryResolver: ResolveFn<ExerciseSetListAPI> = (route, state) => {
const exerciseSetsService = inject(ExerciseSetsService);
return exerciseSetsService.getInitialList();
};
The function injects the ExerciseSetsService service and returns the observable returned by the getInitialList method.
We will configure DiaryRoutingModule with this new resolver:
{
path: ”,
component: DiaryComponent,
title: ‘Diary’,
resolve: { diaryApi: diaryResolver },
},
We are using the resolve property, much like configuring a route guide, with the difference that we associate an object with the function, which will be important for the component to consume the data generated by it.
In the DiaryComponent component, we will refactor the component to consume data from the resolver instead of fetching the information from the service directly:
private route = inject(ActivatedRoute);
ngOnInit(): void {
this.route.data.subscribe(({ diaryApi }) => {
this.exerciseList = diaryApi.items;
});
}
The component is now consuming the data attribute of the route. It returns an observable that has an object with the diaryApi attribute – the same one we configured in the routes module.
When we run our project again, we see that the behavior of the screen does not change externally; however, internally, we are fetching information from the gym diary before the component is loaded. This change in our example may have been imperceptible, but in a larger and more complex application, it could be the difference that you and your team are looking for.
It is important to bear in mind that this will not speed up the request to the backend. It will take the same time as before, but the performance perception that your user will have may be impacted.
We will do this same treatment to load the diary entry edit page; in the same resolve file, we will create a new function:
export const entryResolver: ResolveFn<ExerciseSet> = (route, state) => {
const entryId = route.paramMap.get(‘id’)!;
const exerciseSetsService = inject(ExerciseSetsService);
return exerciseSetsService.getItem(entryId);
};
The function injects the service but, this time, we are using the route parameter to extract the id of the entry to load it. This parameter is offered by Angular so that you can extract any attribute from the route in which you will configure the resolver.
In the route module, we will add the resolve function to the edit route:
{
path: ‘entry/:id’,
component: NewEntryFormReactiveComponent,
title: ‘Edit Entry’,
resolve: { entry: entryResolver },
},
Now, we need to refactor the component to use the route guard information:
private route = inject(ActivatedRoute);
ngOnInit(): void {
if (this.entryId) {
this.route.data.subscribe(({ entry }) => {
this.updateForm(entry);
});
}
}
In the same way as we did with the diary page, here, we are replacing the consumption of the service with the consumption of the route.
Summary
In this chapter, we worked with routes and their resources to guide and organize user flows in our application. We learned about the router concept in the Angular framework and created an error page in case a user uses a route that does not exist. We created our edit diary entry page by reusing a form and, with the dynamic route feature, we learned how to capture route data for page setup.
Finally, we learned about the route guards feature, created our simplified login flow, and saw how to optimize the user experience by loading the backend information before the page loads using the guard resolve feature.
In the next chapter, we will learn how to use a resource to streamline our requests to the backend using the interceptor design pattern.