Обновление простого Http Interceptor от Http до HttpClient в Angular

Question

Я работаю над обновлением приложения Angular4 до 5 (а затем собираюсь делать 6, 7 и, в конечном итоге, 8), и самая большая часть, которую, кажется, с этим конкретным переходом - это вырвать весь код, используя HttpModuleи заново обработайте его, используя HttpClientModule.

Проблема начинается с этого кода:

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

import { environment } from './../../environments/environment';
import { ErrorViewModel } from '../../models';


@Injectable()
export class InterceptedHttp extends Http {
    constructor(backend: ConnectionBackend,
        defaultOptions: RequestOptions) {
        super(backend, defaultOptions);
    }

    public get(url: string, options?: RequestOptionsArgs): Observable<Response> {
        url = this.updateUrl(url);
        return super.get(url, this.getRequestOptionArgs(options)).catch(this.handleError);
    }

    public post(url: string, body: string, options?: RequestOptionsArgs): Observable<Response> {
        url = this.updateUrl(url);
        return super.post(url, body, this.getRequestOptionArgs(options)).catch(this.handleError);
    }

    public put(url: string, body: string, options?: RequestOptionsArgs): Observable<Response> {
        url = this.updateUrl(url);
        return super.put(url, body, this.getRequestOptionArgs(options)).catch(this.handleError);
    }

    public delete(url: string, options?: RequestOptionsArgs): Observable<Response> {
        url = this.updateUrl(url);
        return super.delete(url, this.getRequestOptionArgs(options)).catch(this.handleError);
    }

    private updateUrl(req: string) {
        return environment.origin + req;
    }

    private getRequestOptionArgs(options?: RequestOptionsArgs): RequestOptionsArgs {
        if (options == null) {
            options = new RequestOptions();
        }

        if (options.headers == null) {
            options.headers = new Headers();
            // options.headers.append('Accept', 'application/json');
            // options.headers.append('Content-Type', undefined);
        }

        //to do get token 
        return options;
    }

    private handleError = (error: Response) => {
        if (error.status === 0 || error.status === 401 || error.status === 403) {
            window.location.reload(true);
            return Observable.never();
        }

        let result: ErrorViewModel;

        try {
            result = error.json();
        } catch (ex) {
            result = null;
        }

        return Observable.throw(result);
    };
}

Я понимаю, что RequestOptions уже давно устарел.(возможно, удалено уже в 7 или 8). Я также понимаю, что эквивалентами по существу являются HttpHeaders и HttpParams, и я знаю, что доступен объект HttpRequest, но я не уверен, как это будет работать.

Во-первых, этот перехватчик действительно только получает полный URL-адрес для запроса, и эта часть работает просто отлично, проблема заключается в том, чтобы заставить его правильно скомпилироваться и работать правильно.

Должен ли я расширять HttpClient этим?или мне просто реализовать HttpInterceptor?(Особенно, если все, что меня действительно беспокоит, - это обновление URL-адреса, чтобы он вызывал что-то реальное.)

Во-вторых, как в этом случае будет построен вызов с HttpClient?Я продолжаю получать несоответствия подписи.Вот что я пробовал до сих пор:

import { Injectable } from '@angular/core';
import {
    ConnectionBackend, // replaced
    RequestOptions, //replaced
    Request, //replaced
    RequestOptionsArgs, //replaced
    Response,
    Http,
    Headers,
} from '@angular/http';
import {
    HttpParams,
    HttpBackend,
    HttpRequest,
    HttpResponse,
    HttpInterceptor,
    HttpClient,
    HttpHeaders
} from '@angular/common/http';
import { Observable } from 'rxjs/Rx';
import 'rxjs/add/operator/catch';
import 'rxjs/add/observable/throw';

import { environment } from './../../environments/environment';
import { ErrorViewModel } from '../../models';


@Injectable()
export class InterceptedHttp extends HttpClient {
    constructor(backend: HttpBackend) {
        super(backend);
    }

    public get(url: string, options?: HttpRequest<any>): Observable<HttpResponse<any>> {
        const {headers, params} = options;
        url = this.updateUrl(url);
        return super.get<any>(url, { headers: this.getRequestHeaders(headers), params: this.getRequestOptionArgs(params) }).catch(this.handleError);
    }

    public post(url: string, body: string, options?: {headers: HttpHeaders, params: HttpParams}): Observable<HttpResponse<any>> {
        const {headers, params} = options;
        url = this.updateUrl(url);
        return super.post<any>(url, body, { headers: this.getRequestHeaders(headers), params: this.getRequestOptionArgs(params) }).catch(this.handleError);
    }

    public put(url: string, body: string, options?: {headers: HttpHeaders, params: HttpParams}): Observable<HttpResponse<any>> {
        const {headers, params} = options;
        url = this.updateUrl(url);
        return super.put<any>(url, body, { headers: this.getRequestHeaders(headers), params: this.getRequestOptionArgs(params) }).catch(this.handleError);
    }

    public delete(url: string, options?: { headers: HttpHeaders, params: HttpParams, observe?,  }): Observable<HttpResponse<any>> {
        const { headers, params } = options;
        const requestOptions = {
            headers: headers
        }
        url = this.updateUrl(url);
        return super.delete<any>(url, ).catch(this.handleError);
    }

    private updateUrl(req: string) {
        return environment.origin + req;
    }

    private getRequestOptionArgs(options?: HttpParams): HttpParams {
        if (options == null) {
            options = new HttpParams();
        }

        // if (options.headers == null) {
        //     options.headers = new HttpHeaders();
        //     // options.headers.append('Accept', 'application/json');
        //     // options.headers.append('Content-Type', undefined);
        // }

        //to do get token 
        return options;
    }

    private getRequestHeaders(headers: HttpHeaders): HttpHeaders {
        if (headers) {
            return headers;
        } else {
            return new HttpHeaders();
        }
    }

    private handleError = (error: Response) => {
        if (error.status === 0 || error.status === 401 || error.status === 403) {
            window.location.reload(true);
            return Observable.never();
        }

        let result: ErrorViewModel;

        try {
            result = error.json();
        } catch (ex) {
            result = null;
        }

        return Observable.throw(result);
    };
}