Angular2 - HTTP RequestOptions HEADERS

Question

I currently have an issue with tslint and was hoping someone could point me in the right direction.

I'm trying to send an HTTP GET request using HTTP provided by the Angular2 framework. With this request, I must specify the content-type and the bearer authentication token.

Example of my code:

let headers = new Headers();
let authToken = this._user.getUser().JWT;
headers.append('Content-Type', 'application/json');
headers.append('Authorization', `Bearer ${authToken}`);
let options = new RequestOptions({ headers: headers });

this._http.get('http://' + url '/', options)
            .timeout(3000)
            .subscribe(
                (res) => {

This works, however, tslint is complaining that

"TS2345: Argument of type '{ headers: Headers; }' is not assignable to parameter of type 'RequestOptionsArgs'. Types of property 'headers' are incompatible. Type 'Headers' is not assignable to type 'Headers'. Two different types with this name exist, but they are unrelated. Property 'keys' is missing in type 'Headers'."

I appreciate the support.

consider use const instead of let for both options and headers — Amin, Apr 10 '18 at 17:12

bviale · Accepted Answer · 2018-01-18T10:33:51.893

201

Update

As of today, @angular/http has been deprecated, and @angular/common/http should be used instead. So the best way to work with http headers is to import import { HttpHeaders } from '@angular/common/http'; (documentation).

Old answer

The Headers type you are supposed to import is import { Headers } from '@angular/http';.

Check your imports

edited Jan 18 '18 at 10:33

answered Apr 04 '17 at 11:15

bviale

5,245
3
28
48

3

That was it! I'm using Phpstorm and is usually pretty good and clearly showing me that I've missed a dependency but didn't this time. Furthermore, I don't find the tslint message very clear. Cheers :) – Zander17 Apr 04 '17 at 11:19
3

Somehow there is a Headers class even if you don't import it. So you have to make sure you import the right one (see answer above) in order for it to work. – GoTo Jun 13 '17 at 07:03
3

For Angular 5, this helped me `import { Headers, RequestOptions } from '@angular/http';` [DOCUMENTATION](https://angular.io/api/http/RequestOptions) – Abhi Nov 20 '17 at 09:53
@Abhi It says in the docs that *Headers* is deprecated and we should use *HttpHeaders* from *@angular/common/http* instead. But that doesn't really work... Thoughts? – DonkeyBanana Jan 16 '18 at 10:02
@DonkeyBanana I find [THIS](https://medium.com/@amcdnl/the-new-http-client-in-angular-4-3-754bd3ff83a8) as a good referrence – Abhi Jan 17 '18 at 07:02
`@angular/common/http"' has no exported member 'Http'.` every article says different – Omar Apr 20 '18 at 17:03
`/@angular/common/http"' has no exported member 'Headers'.` wtf – Omar Apr 20 '18 at 17:19

score 9 · Answer 2 · edited Jan 22 '18 at 07:38

9

You have to update headers by:

let headers =  {headers: new  HttpHeaders({ 'Content-Type': 'application/x-www-form-urlencoded'})};

edited Jan 22 '18 at 07:38

Nisse Engström

4,738
23
27
42

answered Jan 22 '18 at 06:49

Vivek Kapoor

431
6
7

ValRob · Answer 3 · 2018-04-21T07:12:30.340

4

Update for Angular 5

import { RequestOptions } from '@angular/http';

I found this in the comments from the correct answer, so If this helps somebody, good luck.

Documentation: https://angular.io/api/http/RequestOptions

edited Apr 21 '18 at 07:12

answered Apr 12 '18 at 15:34

ValRob

2,584
7
32
40

2

This is deprecated. – test_124 Apr 20 '18 at 15:41
Yeah, it looks like it had change in the last days. check the documentation, now is `import { RequestOptions } from '@angular/http';` – ValRob Apr 21 '18 at 07:12

arul prince · Answer 4 · 2019-02-26T05:33:56.157

2

// example of headers of content type Json

import { Http, Headers, RequestOptions } from '@angular/http';

const Url = 'http://localhost:3000/';
const headers = new Headers;
const body = JSON.stringify({
title: "data" 
});
headers.append('Content-Type', 'application/json');
this.http.post(Url, body, { headers: headers })
.pipe(map((res => res)));

edited Feb 26 '19 at 05:33

answered Feb 25 '19 at 13:37

arul prince

303
1
7

Angular2 - HTTP RequestOptions HEADERS

4 Answers4

Linked