Will Angular Universal get along with httpClient?

I am currently working on a project which is built mainly based on NgModules. We have 5 different modules and multiple components and services in that. When we tried to enable server-side rendering using Angular Universal, the pages are not rendered completely. The code which is given below is the only part which is rendered. (view source)

This issue is happening when we use httpClient in the code. Without that everything works perfectly.

<app-root _nghost-sc0="" ng-version="8.1.2"><router-outlet _ngcontent-sc0=""></router-outlet><app-main _nghost-sc1=""><!----></app-main></app-root> 

But if we check in browser's developer tools, we could see

<app-root _nghost-serverapp-c0="" ng-version="8.1.2"><router-outlet _ngcontent-serverapp-c0=""></router-outlet><app-main _nghost-serverapp-c1=""><!--bindings={
  "ng-reflect-ng-if": "[object Object]"
}--><div _ngcontent-serverapp-c1="" id="home-page"><app-banner _ngcontent-serverapp-c1="" _nghost-serverapp-c2="" ng-reflect-banners="[object Object],[object Object"><p _ngcontent-serverapp-c2="">banner works!</p></app-banner><app-counter _ngcontent-serverapp-c1="" _nghost-serverapp-c3="" ng-reflect-counters="[object Object],[object Object"><p _ngcontent-serverapp-c3="">counter works!</p></app-counter><app-categories _ngcontent-serverapp-c1="" _nghost-serverapp-c4="" ng-reflect-categories="[object Object],[object Object"><p _ngcontent-serverapp-c4="">categories works!</p></app-categories><app-experience _ngcontent-serverapp-c1="" _nghost-serverapp-c5="" ng-reflect-experiences="[object Object],[object Object"><p _ngcontent-serverapp-c5="">experience works!</p></app-experience><app-stay _ngcontent-serverapp-c1="" _nghost-serverapp-c6="" ng-reflect-stays="[object Object],[object Object"><p _ngcontent-serverapp-c6="">stay works!</p></app-stay><app-spotlight _ngcontent-serverapp-c1="" _nghost-serverapp-c7="" ng-reflect-spotlights="[object Object],[object Object"><p _ngcontent-serverapp-c7="">spotlight works!</p></app-spotlight></div></app-main></app-root>

I followed the official angular universal documentation.
What am I doing wrong here?

Comments

[Jerin Kuriakose]

The issue is solved. The problem was with the URL which is used to fetch the data. This angular.io/guide/universal#using-a... helped me from that. Now the page is rendering completely.

Also please remember to add the

 in the

 ```app.module.ts```

 file rather than adding to a NgModule.

[Jonathan Gamble]

Indeed - I found a way around it here.

[Jerin Kuriakose]

The issue is solved. The problem was with the URL which is used to fetch the data. This angular.io/guide/universal#using-a... helped me from that. Now the page is rendering completely.

Also please remember to add the 'httpClientModule' in 'the app.module.ts' file rather than adding to a NgModule.

[Jerin Kuriakose]

I found that this is happening only when we use httpClient in our code. Without that, everything works perfectly.

[Gürhan]

Hi! I have same problem what should i write in my server.ts?
dev-to-uploads.s3.amazonaws.com/up...