Angular 4 RequestOption object not assignable for post method

Question

I'm trouble with these codes, I created a header with following code block

headers.append("Authorization",btoa(username+":"+password));

var requestOptions = new RequestOptions({headers:headers});

But if I try use this in a post method in that

return this.http.post(url,JSON.stringify({username,password}),requestOptions)
    .map(res=>res.json())
    .map(res=>{
      if(res){
        localStorage.setItem("isLogged",res);
        this.loggedIn =true;
      }
      return res;
    });

I take this error message

Typescript Error
Argument of type 'RequestOptions' is not assignable to parameter of type '{ headers?: HttpHeaders | { [header: string]: string | string[]; }; observe?: "body"; params?: Ht...'. Types of property 'headers' are incompatible. Type 'Headers' is not assignable to type 'HttpHeaders | { [header: string]: string | string[]; }'. Type 'Headers' is not assignable to type '{ [header: string]: string | string[]; }'. Index signature is missing in type 'Headers'.

I tried change Header() to HttpHeader() but it didn't help. What is the problem?

UPDATED

I removed requestOptions object then I created headers from HttpHeaders()

let headers = new HttpHeaders();

and use this headers value in post method in that

return this.http.post(url,JSON.stringify({username,password}), { options: { headers: headers; } })
    .map(res=>res.json())
    .map(res=>{
      if(res){
        localStorage.setItem("isLogged",res);
        this.loggedIn =true;
      }
      return res;
    });

then get this error

[ts]
Argument of type '{ options: { headers: HttpHeaders; }; }' is not assignable to parameter of type '{ headers?: HttpHeaders | { [header: string]: string | string[]; }; observe?: "body"; params?: Ht...'.
  Object literal may only specify known properties, and 'options' does not exist in type '{ headers?: HttpHeaders | { [header: string]: string | string[]; }; observe?: "body"; params?: Ht...'.

I also tried this

return this.http.post(url,JSON.stringify({username,password}), { headers: headers })
    .map(res=>res.json())
    .map(res=>{
      if(res){
        localStorage.setItem("isLogged",res);
        this.loggedIn =true;
      }
      return res;
    });

then I got an error on first ".map"

[ts] Property 'map' does not exist on type 'Observable<Object>'.

Answer 1

@angular/http is deprecated

Use @angular/common/http instead

import { HttpHeaders } from '@angular/common/http';

const httpOptions = {
     headers: new HttpHeaders({
     'Content-Type':  'application/json',
     'Authorization': 'my-auth-token'
    })
};


addHero (hero: Hero): Observable<Hero> {
     return this.http.post<Hero>(this.heroesUrl, hero, httpOptions)
     .pipe(
      catchError(this.handleError('addHero', hero))
    );
}

Answer 2

The RequestOptions class was to be used with the deprecated Http module, and since you're getting this error I'd assume you're using the HttpClient module.

If you want to set headers through options as shown in your code, you can use something like this (simplified version of what is shown in the Angular docs):

request(url, { body }, { options: { headers?: HttpHeaders; } })

But, you can also set headers directly, without using options. That would look something like this:

    request(url, { body }, { headers?: HttpHeaders; } )

Answer 3

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

private headers = new Headers({
    'Content-Type': 'application/json',
    'Authorization': localStorage.getItem('token')
  });
  private options = new RequestOptions({
    headers: this.headers
  });

private user: User;

constructor(private _http: Http) {}

getUserService() {
    return this._http.get(this.baseUrl + '/user', this.options)
      .map((response: Response) => response.json(),
      error => error.json('erreur dans lurl'));
  }