Angular resolver is a very nice way to improve user-experience when browsing between pages in our app. By implementing resolver, it is possible for us to load all data from remote server before our route actually activated and component being rendered into the browser.

Before we begin let’s take a look into the scenario bellow:

“We want to show a list of movie in our application where the data is served from remote server at https://facebook.github.io/react-native/movies.json, not all the information will be rendered, only movie title, and in order to give the best experience to our user’s we won’t display anything until the data is fetched successfully”. 

Now we took our first step, define the application route:

From the route above we know that we should have two components (AppComponent and MoviesComponent) in our app, AppComponent will be bootstrap component and it only render router-outlet:

Now let’s create MoviesComponent:

Our movie list will be displayed inside MovieComponent and the data stored from current activated route snapshotNext step, create a service that fetch data from remote server, this service must implement Resolve interface and can return either Observable or Promise object:
The most important thing, add MoviesService to movies route as resolver so it can work:
Finally register our route, components and service together in application module:
Run the program and navigate to http://localhost:4200/movies to see the result.

rumbia - angular resolver

angular resolver demo

note: when writing this article I’m using angular-cli to generate the project so that’s why I run ng serve and occupies default port 4200