Creating Resolvers to Retrieve Data Using the Router

In this section, we will manually create two Injectable classes that act as resolvers and then configure our router to use these resolvers. We will then update our container components to use this resolved data.

A resolver is a class that we can use to fetch the data that we use in our component before the component is displayed. We call the resolvers in the routes where we need the data. In our implementation, the resolvers retrieve the data from the API and return it so it can be displayed in the components.

Note

More information about resolvers can be found at: https://angular.io/guide/router#resolve-pre-fetching-component-data.

Our application is quite neatly structured already, but there is one thing that we can optimize.

In order to see what our problem is, open Chrome Developer Tools and then the Performance tab:

Hit the cog icon and set Network to Slow 3G:

If we now click around in our application, we will see that that our page navigation...