withFetch doesn't support json object as body with POST method api call #50775
Description
Which @angular/* package(s) are the source of the bug?
common
Is this a regression?
Yes ( compared with XHR )
Description
When i request like this,
const httpHeaders = new HttpHeaders();
httpHeaders.set('Content-Type', 'application/json');
httpHeaders.set('Accept', 'application/json');
const httpParams = new HttpParams();
this.http.request(
new HttpRequest<T>('POST', 'https://127.0.0.1/api', { payload: 'hello world' }, {
params: httpParams,
headers: httpHeaders,
responseType: 'json',
})
)
withFetch() doesn't support Object and it just goes to '[object Object]'
Please provide a link to a minimal reproduction of the bug
No response
Please provide the exception or error you saw
Angular CLI: 16.1.0
Node: 18.16.0
Package Manager: npm 9.5.1
OS: darwin x64
Angular: 16.1.1
... animations, common, compiler, compiler-cli, core, elements
... forms, language-service, localize, platform-browser
... platform-browser-dynamic, platform-server, router
... service-worker, youtube-player
Package Version
---------------------------------------------------------
@angular-devkit/architect 0.1601.0
@angular-devkit/build-angular 16.1.0
@angular-devkit/core 16.1.0
@angular-devkit/schematics 16.1.0
@angular/cdk 16.2.0-next.0
@angular/cli 16.1.0
@angular/material 16.2.0-next.0
@nguniversal/builders 16.1.0-rc.0
@nguniversal/common 16.1.0-rc.0
@nguniversal/express-engine 16.1.0-rc.0
@schematics/angular 16.1.0
ng-packagr 16.1.0
rxjs 7.8.1
typescript 5.0.4
Please provide the environment you discovered this bug in (run ng version)
Angular CLI: 16.1.0
Node: 18.16.0
Package Manager: npm 9.5.1
OS: darwin x64
Angular: 16.1.1
... animations, common, compiler, compiler-cli, core, elements
... forms, language-service, localize, platform-browser
... platform-browser-dynamic, platform-server, router
... service-worker, youtube-player
Package Version
---------------------------------------------------------
@angular-devkit/architect 0.1601.0
@angular-devkit/build-angular 16.1.0
@angular-devkit/core 16.1.0
@angular-devkit/schematics 16.1.0
@angular/cdk 16.2.0-next.0
@angular/cli 16.1.0
@angular/material 16.2.0-next.0
@nguniversal/builders 16.1.0-rc.0
@nguniversal/common 16.1.0-rc.0
@nguniversal/express-engine 16.1.0-rc.0
@schematics/angular 16.1.0
ng-packagr 16.1.0
rxjs 7.8.1
typescript 5.0.4
Anything else?
https://github.com/angular/angular/blob/main/packages/common/http/src/fetch.ts#L224
Here is the root cause.
If i change the implementation like this, it solved.
body: req.serializeBody(),
In XhrBackend, serializeBody convert its body to be serialized json string.
angular/packages/common/http/src/request.ts
Line 295 in 254023a