using the request method in Angular's HttpClient class

Question

I'm developing a service in Angular 4 which must offer a generic http request method (instead of separated get, put, post ... ). I'm trying to use the request method in HttpClient, but I can't manage to pass the required options parameters. My code looks roughly like this:

let options = { 
    headers: headers,
    content: content,
    responseType: ????,
    observe: ??????
};

http.request(method, url, options)
     .map(res => new SeamResponse(res.status, res.json()))

Now, I'm having two problems:

I can't manage to pass the reponseType option, because if I specify a value like 'json', I get this eror:

error TS2345: Argument of type '{ headers: HttpHeaders; content: string; responseType: string; }' is not assignable to parameter of type '{ body?: any; headers?: HttpHeaders; params?: HttpParams; observe?: HttpObserve; reportProgress?:...'. Types of property 'responseType' are incompatible. Type 'string' is not assignable to type '"json" | "arraybuffer" | "blob" | "text"'.

Neither can I pass the observe options, because it is in a type which is apparently not exported from the HttpClient class.

error TS2305: Module '"/Users/pchacin/Documents/workspace/seam-sdk-core-ts/node_modules/@angular/common/http"' has no exported member 'HttpObserve'.

I can't manage to process the response because it doesn't recognise the map method, which I understand is standard for Observable:

error TS2339: Property 'map' does not exist on type 'Observable'.

Many thanks in advance

EDIT:

Question 2 is solved in the latest version of angular (4.4.1) as an experiment feature by exporting HttpObserve, however discussions about the topic in github suggest the HttpObserve type will be removed and this option will be defined as string, so I'm not inclined to follow this path. The question I have is: the request method has been around for some time, since 4.2, at least Hasn't anyone used it ever? if so, how?

Not one thing in the options are required according to the docs. Only pass what you have. — R. Richards
– R. Richards, Commented Sep 17, 2017 at 13:44
See github.com/angular/angular/issues/18586#issuecomment-323216764 . HttpObserve is a string. does not exist on type 'Observable' is widely known error, this question it was answered numerous times. — Estus Flask
– Estus Flask, Commented Sep 17, 2017 at 14:03
@estus The discussion you refers me to actually confimrs HttpObserver is not an string. — pablochacin
– pablochacin, Commented Sep 17, 2017 at 14:13
There's nothing to make guesses about. If you're not sure about something, check source code github.com/angular/angular/blob/4.4.1/packages/common/http/src/… — Estus Flask
– Estus Flask, Commented Sep 17, 2017 at 14:19

Three Zhang · Accepted Answer · 2017-12-29 02:20:50Z

4

add type Object, then you can use options as a parameter of request()/get()/post() method

let options: Object = { 
    headers: headers,
    content: content,
    responseType: 'text' as 'tex',
    observe: 'response' as 'response'
 };

answered Dec 29, 2017 at 2:20

Three Zhang

412 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

GELR Over a year ago

Solved my problem, but why does it have to be casted to Object to work?

pablochacin · Accepted Answer · 2017-09-18 12:59:18Z

2

It happens that the error with the responseType is related to an issue with TypeScript and literal string types. The proper way to specify it is:

let options = { 
    headers: headers,
    content: content,
    responseType: 'text' as 'tex',
    observe: 'response' as 'response'
 };

answered Sep 18, 2017 at 12:59

pablochacin

1,0262 gold badges19 silver badges38 bronze badges

Comments

Zlatko · Accepted Answer · 2017-12-29 11:42:02Z

-1

Maybe you can use Angular's Enum itself:

responseType: ResponseType.Default

answered Dec 29, 2017 at 11:42

Zlatko

19.7k14 gold badges76 silver badges130 bronze badges

Collectives™ on Stack Overflow

using the request method in Angular's HttpClient class

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related