Pourquoi enfin() ne fonctionne pas après la capture sur une Observable dans Angulaire 2?

Question

Je suis en train d'ajouter un chargement touche de navigation pour chaque demande qui se termine dans Angulaire 2, j'ai donc étendu le service Http appelant HttpService. Après chaque demande, je voudrais appeler un enfin() la fonction après la capture des erreurs pour que je puisse arrêter le chargement spinner.

Mais tapuscrit dit:

[ts] Propriété "enfin" n'existe pas sur le type 'Observables'.

import { AuthService } from './../../auth/auth.service';
import { Injectable } from '@angular/core';
import { Http, XHRBackend, RequestOptions, RequestOptionsArgs, Request, Response, Headers } from '@angular/http';

import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/catch';
import 'rxjs/add/observable/throw';

@Injectable()
export class HttpService extends Http {

    constructor(
        backend: XHRBackend,
        options: RequestOptions,
        private authservice: AuthService
    ) {
        super(backend, options);
        this.updateHeaders(options.headers);
    }

    request(url: string|Request, options?: RequestOptionsArgs): Observable<Response> {
        return super.request(url, options)
            .catch((response: Response) => this.authError(response))
            .finally(() => {
                // ...
                /* Do something here when request is done. For example
                finish a spinning loader. */
            });
    }

    private authError(response: Response) {
        if (response.status === 401 || response.status === 403) {
            this.authservice.logout();
        }
        return Observable.throw(response);
    }

    private updateHeaders(headers: Headers) {
        headers.set('Content-Type', 'application/json');
        if (this.authservice.isloggedIn()) {
            headers.set('Authorization', `Bearer ${this.authservice.getToken()}`);
        }        
    }
}

Comment puis-je exécuter du code après chaque requête http comme ça? Quelle est la meilleure façon de le faire?

Answer 1

Vous avez oublié de les importer:

import 'rxjs/add/operator/finally';

Answer 2

Heads-up, les futurs lecteurs:

depuis angulaire 6, qui a introduit rxjs version 6.0, nous utilisons maintenant finaliser au lieu de enfin.

Il est maintenant utilisé à l'intérieur d'un tuyau, de sorte

observable.finally( x => console.log(x)).subscribe()

est maintenant

observable().pipe( finalize( x => console.log(x))).subscribe()

et vous l'importer à partir d' rxjs/operators

import { finalize } from 'rxjs/operators'