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](https://angular.io/api/common/http/HttpClient#request). Only pass what you have. — R. Richards, Sep 17 '17 at 13:44
See https://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, Sep 17 '17 at 14:03
@estus The discussion you refers me to actually confimrs HttpObserver is not an string. — pablochacin, Sep 17 '17 at 14:13
There's nothing to make guesses about. If you're not sure about something, check source code https://github.com/angular/angular/blob/4.4.1/packages/common/http/src/client.ts#L51 — Estus Flask, Sep 17 '17 at 14:19
@estus I'm familiar with the code and with the discussion about the issue. As you may have noticed (aren't you?) this is stil experimentan in 4.4.1 which has just released yesterday. I'm not in a hurry to test it. Thansk — pablochacin, Sep 17 '17 at 14:36
@estus thanks for pointing me to the map issue. That part was solved. — pablochacin, Sep 17 '17 at 14:37
Experimental or not, it should work like `observe: 'body'`. And it's optional, as it was mentioned above. I'm not sure why you're getting error 1 in the first place. It should work as expected. Consider providing http://stackoverflow.com/help/mcve that can replicate the problem. In your case it likely will be Github repo or https://stackblitz.com/fork/angular . — Estus Flask, Sep 17 '17 at 14:52
@estus maybe I didn't express myself correctly. I don't want to try experimental code right now because it can just disappear of changed shortly. I don't you but I do care about the fragility of the code I release. — pablochacin, Sep 17 '17 at 15:32
It's not clear what you're trying to do. You haven't specified what you need to set `observe` for. If you care about fragility, don't use it. — Estus Flask, Sep 17 '17 at 15:42
@estus If I understand correctly, If I don't specify the observe parameter, it will return all the events to the observer. I'm just interested in the response event. I'm aware I could just filter the other events, but given the api offers this optons, I was considering using it. — pablochacin, Sep 17 '17 at 17:25

score 4 · Answer 1 · answered Dec 29 '17 at 02:20

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 '17 at 02:20

Three Zhang

41
2

Solved my problem, but why does it have to be casted to Object to work? – GELR Mar 02 '18 at 13:33

score 2 · Accepted Answer · answered Sep 18 '17 at 12:59

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'
 };

score -1 · Answer 3 · answered Dec 29 '17 at 11:42

-1

Maybe you can use Angular's Enum itself:

responseType: ResponseType.Default

answered Dec 29 '17 at 11:42

Zlatko

18,936
14
70
123

using the request method in Angular's HttpClient class

3 Answers3

Linked