-
Notifications
You must be signed in to change notification settings - Fork 27.2k
Zoneless SSR: usage of forkJoin to get multiple responses prevents server rendering #59352
Description
Which @angular/* package(s) are the source of the bug?
Don't known / other
Is this a regression?
No
Description
Using forkJoin to load multiple data using the HttpClient prevents the component to be rendered on the server. Using combineLatest instead works as expected.
Please provide a link to a minimal reproduction of the bug
https://stackblitz.com/edit/stackblitz-starters-fud9dwup?file=demo%2Fsrc%2Fapp%2Fapp.component.ts
Please provide the exception or error you saw
NA
Please provide the environment you discovered this bug in (run ng version)
Angular CLI: 19.0.6
Node: 18.20.3
Package Manager: npm 10.2.3
OS: linux x64
Angular: 19.0.5
... animations, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, platform-server
... router
Package Version
---------------------------------------------------------
@angular-devkit/architect 0.1900.6
@angular-devkit/build-angular 19.0.6
@angular-devkit/core 19.0.6
@angular-devkit/schematics 19.0.6
@angular/cli 19.0.6
@angular/ssr 19.0.6
@schematics/angular 19.0.6
rxjs 7.8.1
typescript 5.6.3
zone.js 0.15.0
Anything else?
To reproduce, using the provided stackblitz:
cd demonpm ing serve
Then open the network dev tools, clear the requests, and refresh the stackblitz demo page. Inspect the HTML returned by the server. It contains an empty app-root element, and it also contains the transfer state for the http response:
<app-root _nghost-ng-c1660245559="" ng-version="19.0.5" ngh="0" ng-server-context="ssr"><!--container--></app-root>
<script id="ng-state" type="application/json">{"3838178545":{"b":{"message":"hello"},"h":{},"s":200,"st":"OK","u":"/foo.json","rt":"json"},"__nghData__":[{"t":{"0":"t0"},"c":{"0":[]}}]}</script></body></html>Then comment the code of the app component loading the data using forkJoin, and replace it with the commented code using combineLatest. Then refresh the stackblitz demo page. Inspect the HTML returned by the server. It now contains a filled app-root element, as expected:
<app-root _nghost-ng-c1660245559="" ng-version="19.0.5" ngh="0" ng-server-context="ssr"><h1 _ngcontent-ng-c1660245559="">Hello from app</h1><!--container--></app-root>