Next step is to get know a TransferHttpCacheModule, which provides the TransferState functionality "out of the box" for the HTTP calls.
In the previous lesson, you've learned how to adjust services responsible for data retrieval to use the
TransferState registry. What if the application doesn't retrieve data from the database but performs an HTTP call instead? This may occur if your web application communicates with services that are not deployed on the same machine, such as in a microservice architecture.
Should you prepare a special server-side implementation of such a service? Fortunately, you don't need to. Instead, you can use the
TransferHttpCacheModule module that is shipped with the
@nguniversal library. This module provides
HTTP_INTERCEPTOR: a mechanism for altering HTTP calls and responses "on the fly", which uses the
TransferState registry under the hood. On the server, the interceptor feeds
TransferState with data retrieved via HTTP requests. In the browser, it looks up for these entries in the registry and does not repeat HTTP calls.
Creating a microservice#
Create a new npm project outside of your Angular Universal application, and install dependencies that are necessary to publish a basic HTTP API:
This service will broadcast information about promotions and opening hours of the terrain shop that stands behind your online grocery. Add the following code to index.js:
The code above introduces two API endpoints:
Update package.json to be able to deploy this service to Heroku:
Deploying to Heroku#
Create and deploy a new Heroku application:
Verify the deployment with Postman or cURL:
Consuming the microservice#
terrainShopBasePath entry to src/environments/environment.ts:
Add the same entry to src/environments/environment.prod.ts:
Create a new file, src/model/opening-hours.model.ts, and add a class that represents data returned by the /opening endpoint: