Как переписать Http на HttpClient?

Question

[asd dsa]

Мигрирую со angular2 на angular7 подскажите как переписать запросы Http модуля на HttpClient ?

import { Injectable } from '@angular/core';
import { Http, Response, Headers, RequestOptions} from '@angular/http';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/do';
import 'rxjs/add/operator/catch';
import 'rxjs/add/operator/map';
import 'rxjs/add/observable/throw';

export class ExpenseService {
   jwtToken: string;
    constructor(private http: Http) {
        const theUser:any = JSON.parse(localStorage.getItem('currentUser'));
        if (theUser) {
            this.jwtToken = theUser.token;
        }
    }
    
    saveExpense(userid, oExpense){
        let headers = new Headers();
        headers.append('Content-Type', 'application/json');
        headers.append('Authorization', `${this.jwtToken}`);
        let options = new RequestOptions({ headers: headers });
        return this.http.post(`http://localhost:1978/api/expense/${userid}`, JSON.stringify(oExpense), options)
            .map((response: Response) => response.json())
            .catch(this.handleError);
    }

    getExpenses(userid, oExpense) {
        let headers = new Headers();
        headers.append('Content-Type', 'application/json');
        headers.append('Authorization', `${this.jwtToken}`);
        let options = new RequestOptions({ headers: headers });

        return this.http.post(`http://localhost:1978/api/expense/report/${userid}`, JSON.stringify(oExpense), options)
            .map((response: Response) => response.json())
            .catch(this.handleError);
    }

    getExpenseTotal(userid, oExpense) {
        let headers = new Headers();
        headers.append('Content-Type', 'application/json');
        headers.append('Authorization', `${this.jwtToken}`);
        let options = new RequestOptions({ headers: headers });

        return this.http.post(`http://localhost:1978/api/expense/total/${userid}`, JSON.stringify(oExpense), options)
            .map((response: Response) => response.json())
            .catch(this.handleError);
    }

    getExpense(expid) {
        let headers = new Headers();
        headers.append('Content-Type', 'application/json');
        headers.append('Authorization', `${this.jwtToken}`);
        let options = new RequestOptions({ headers: headers });

        return this.http.get(`http://localhost:1978/api/expense/${expid}`, options)
            .map((response: Response) => response.json())
            .catch(this.handleError);
    }

    delExpense(expid) {
        let headers = new Headers();
        headers.append('Content-Type', 'application/json');
        headers.append('Authorization', `${this.jwtToken}`);
        let options = new RequestOptions({ headers: headers });

        return this.http.delete(`http://localhost:1978/api/expense/${expid}`, options)
            .map((response: Response) => response.json())
            .catch(this.handleError);
    }

     private handleError(error: Response) {
        console.error(error);
        return Observable.throw(error.json().error || 'Server error');
    }
}

Answer 1

[spnq]

Вообще правильнее всего вынести эти запросы в сервис и импортировать туда HttpClient.

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

Далее инжектим его в конструктор сервиса:
constructor(private http: HttpClient) {}

После делаем нужный метод для запроса (в данном примере пусть возвращает Observable с массивом любых данных):

getServices(): Observable<Array<any>> {
    return this.http.get<Array<any>>(`адрес реста`, {headers:{ 'Content-Type':'application/json' , и так далее}});
  }

Объект с хеддерами вообще опциональный и есть несколько вариантов, как их добавлять, но этот подходит по твоему примеру.

Дальше импортишь свой сервис в компонент и инжектишь в конструктор этого компонента:

constructor(private service: ИмяСевриса) {}

Дальше в нужном хуке, например в ngOnInit() вызываешь метод и подписываешься:

ngOnInit() {
    this.service.getServices().subscribe( next => ну и дальше все, как обычно);
}

Answer 2

[Дмитрий Еремин]

ну, самое простое - в конструкторе
constructor(private http: Http) меняем на constructor(private http: HttpClient)

Дальше все, что компиляор ругнется, правим
Вот дока по HttpClient

Answer 3

[msdosx86]

1) переименовываем Http в HttpClient (из angular/core, а то иногда с селениума можно импортировать случайно)
2) в корневом модуле импортируем imports: [ HttpClientModule ]
3) убираем все response.json() из всех методов, так как это автоматически делает HttpClient