Create Angular Resolvers to retrieve the product data from the Service
In our 'container components' we use the ngOnInit lifecycle hook to subscribe to our service. While this works, there is a downside: the components get loaded before the data is available, which results in that we show empty components. This is particularly visible on slow connections.
To fix this we create a ProductsResolver, and implement the resolve method that fetches the data from the service. In ProductRoutingModule we add the resolve property to our route, and add make the ProductsResolver resolve and store the data in the products property.
Inside our ngOnInit in ProductListComponent we can now subscribe to the route data, which makes the usage of the service in this component obsolete.
We do the same for the ProductDetailComponent. After this there are no longer empty components, the router will not navigate after the data is retrieved.
Instructor: [00:00] The container components fetch the data by subscribing to the service in the ngOnInit method. While this works it has some drawbacks. This can be shown by opening the network tab in Chrome DevTools and setting the connection to slow 3G.
[00:14] We can prevent this by creating a resolver that the router can use to retrieve the data. We open the file and add export class product-resolver. We add the Injectable decorater and that function takes an object with provided n set to route.
[00:28] We add implement resolve of type product array. Next, we add a constructor and inject PrivateService ProductService. We implement the resolve method and make it return this.service.getProducts. To use this resolver, we open products routing module, and in the routes to product list component, we add the resolve property.
[00:49] We add a key products and set the value to product-resolver. The next step is to update the product list components. We change the constructor, so it only injects private routes ActivatedRoutes. In the ngOnInit method, we call in this.route.data.
[01:03] We invoke the pipe function and use the map operator to take the product's property from the data object. Let's remove the colon to the servers and just reuse the same subscription we use before.
[01:14] When we now check in the browser, we see that the product list still works and that the route does not change until the data is loaded.
[01:21] Let's quickly do the same for the product details. We copied the product-resolver to product-resolver singular.
[01:28] We renamed the class product-resolver to product-resolver singular. We changed the result type from product array to product. We add the parameter route of type ActivatedRouteSnapshots to the resolve method.
[01:40] We change the method getProducts to getProducts, and lastly we pass in routes.paramapp.getID. In the products routing module, we add the resolve key to the product detail routes. We set the key to products and product-resolver as the value.
[01:55] The product detail components will remove the product service from constructor and imports in the ngOnInit method we call into this.route.data. Invoke the pipe function and use the map operator to get the products key from the data objects, and reuse the subscribe methods.
[02:10] When we navigate through the app, we see that it works as expected without any empty components. Let's quickly set the speed back to online before we forget.