Angular2 - HTTP RequestOptions HEADERS

angular http typescript tslint
Zander17 picture Zander17 · Apr 4, 2017 · Viewed 77k times · Source

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.

Answer

bviale picture bviale · Apr 4, 2017

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

Related questions

How to pass url arguments (query string) to a HTTP request on Angular?

I'm creating a HTTP request on Angular, but I do not know how to add url arguments (query string) to it. this.http.get(StaticSettings.BASE_URL).subscribe( (response) => this.onGetForecastResult(response.json()), (error) => this.onGetForecastError(error.json()), () =&…

Read More
How to catch exception correctly from http.request()?

Part of my code: import {Injectable} from 'angular2/core'; import {Http, Headers, Request, Response} from 'angular2/http'; import {Observable} from 'rxjs/Observable'; import 'rxjs/add/operator/map'; @Injectable() export class myClass { constructor(protected http: Http) {} public myMethod() { let request = new …

Read More
Angular 4 HttpClient Query Parameters

I have been looking for a way to pass query parameters into an API call with the new HttpClientModule's HttpClient and have yet to find a solution. With the old Http module you would write something like this. getNamespaceLogs(logNamespace) { // …

Read More