Tero Auralinna's blog about intriguing world of web development. Tweaking pixels since the '90s.

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

Published on April 4, 2018. Edited on July 1, 2018.

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