Skip to content

Zoneless SSR: usage of forkJoin to get multiple responses prevents server rendering #59352

@jnizet

Description

@jnizet

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 demo
  • npm i
  • ng 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>

Metadata

Metadata

Assignees

No one assigned

    Labels

    area: common/httpIssues related to HTTP and HTTP Clientarea: coreIssues related to the framework runtimearea: serverIssues related to server-side renderingcore: zonelessIssues related to running Angular without zone.js

    Type

    No type

    Projects

    No projects

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions