angular http post with 'Content-Type': 'application/x-www-form-urlencoded' and responseType: 'text'

Question

Here is my angular cli info:

Angular CLI: 7.3.9
Node: 10.19.0
OS: win32 x64
Angular: 7.2.16
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.13.9
@angular-devkit/build-angular     0.13.9
@angular-devkit/build-optimizer   0.13.9
@angular-devkit/build-webpack     0.13.9
@angular-devkit/core              7.3.9
@angular-devkit/schematics        7.3.9
@angular/cdk                      7.3.7
@angular/cli                      7.3.9
@angular/material                 7.3.7
@ngtools/webpack                  7.3.9
@schematics/angular               7.3.9
@schematics/update                0.13.9
rxjs                              6.5.4
typescript                        3.2.4
webpack                           4.29.0

I have a method to retrieve a ticket from server.

getTGT(username, password): Observable<string> {
    const loginUrl = this._constants.getLoginUrl();

    let body = new URLSearchParams();
    body.set('username', username.trim());
    body.set('password', password);

    const options = {
        headers: new HttpHeaders({'Content-Type': 'application/x-www-form-urlencoded'}),
        responseType: 'text'
    };

    return this.http.post(loginUrl, body.toString(), options)
        .map((res) => {
            return res.toString();
        })
        .catch(this.handleError);
}

But I'm having a type script compilation error:

Argument type {headers: HttpHeaders, responseType: string} is not assignable to parameter type {headers?: HttpHeaders | {[p: string]: string | string[]}, observe?: "body", params?: HttpParams | {[p: string]: string | string[]}, reportProgress?: boolean, responseType: "arraybuffer", withCredentials?: boolean}

how to fix this type error? Thanks!

this is wrong from typescript. I will send a bug review to them. in the meanwhile you can use //@type-ignore setting to ignore the typescript error. — Christian Matthew
Here is a bug to the issue. github.com/angular/angular/issues/37812 — Christian Matthew

Peter Huang Peter Huang · Accepted Answer · 2020-03-28T22:00:54

I ended up solve this by using fetch API:

`

import { from } from 'rxjs';

fetchTgtUrl(username, password) {
    let loginUrl = '' + this._constants.getLoginUrl();
    let bodyString = 'username=' + username.trim() + '&password=' + encodeURIComponent(password);
    return fetch(loginUrl, {
        method: 'POST',
        headers: {'Content-Type': 'application/x-www-form-urlencoded'},
        body: bodyString
    }).then(res => res.text());
}
getTGT(username, password): Observable<string> {
    let tgt = this.fetchTgtUrl(username, password);
    return from(tgt);
}

`

angular http post with 'Content-Type': 'application/x-www-form-urlencoded' and responseType: 'text'

1 Answers