Angular2 - HTTP RequestOptions HEADERS

AngularHttpTypescriptTslint

Angular Problem Overview


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.

Angular Solutions


Solution 1 - Angular

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

Solution 2 - Angular

You have to update headers by:

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

Solution 3 - Angular

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

Solution 4 - Angular

// 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)));

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionZander17View Question on Stackoverflow
Solution 1 - AngularbvialeView Answer on Stackoverflow
Solution 2 - AngularVivek KapoorView Answer on Stackoverflow
Solution 3 - AngularValRobView Answer on Stackoverflow
Solution 4 - Angulararul princeView Answer on Stackoverflow