How to transfer the Angular server-side state to the client-side

By default, the Angular Universal app makes HTTP requests again when app is bootstrapped even app is already rendered on the server side. Though there is a really simple solution which can be implemented without any actual code changes. At first when I tried to find how to prevent requests I only found tutorials how to implement this at the component level. After googling a while I luckily found an easier way to implement this.

Solution is in the TransferHttpCacheModule.

TransferHttpCacheModule installs a Http interceptor that avoids duplicate HttpClient requests on the client, for requests that were already made when the application was rendered on the server side.

Since this is a HTTP interceptor it automatically affects all requests and does all the hard work under the hood.

I don't repeat installation steps here because up-to-date instructions can be found from the TransferHttpCacheModule docs. I just want to point this out in case someone also has a hard time to find a proper solution.

Update 1.7.2018: Changed doc link