LE PROBLÈME:
J'ai un intercepteur:
@Injectable()
export class AuthInterceptor implements HttpInterceptor {
constructor(private injector: Injector, private router: Router) {
}
intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
const auth = this.injector.get(AuthenticationService);
const authHeaders = auth.getAuthHeader();
const authReq = request.clone({headers: authHeaders});
return next.handle(authReq).do((event: HttpEvent<any>) => {
if (event instanceof HttpResponse) {
}
}, (err: any) => {
if (err instanceof HttpErrorResponse) {
if (err.status === 403) {
this.router.navigate(['login']);
}
}
});
}
}
il était usé dans Angular 5, mais maintenant j'ai migré vers 6 et cela ne fonctionne plus.
Il est dit que la propriété 'do' n'existe pas sur le type Observable.
Aussi, j'ai essayé d'implémenter la solution à partir de ce fil: LINK Ne fonctionnait pas aussi bien.
Ce topic dit que c'est la conséquence des changements de rxjs. Après avoir apporté les modifications suggérées, le problème persiste (maintenant, avec 'touchez' au lieu de 'faire')
voici la section d'importation:
// import {Observable} from "rxjs/Observable";
import {Observable} from "rxjs/Rx";
import { tap } from 'rxjs/operators';
Remarque: la ligne commentée a également été essayée.
SOLUTION:
import {Observable} from 'rxjs'; import 'rxjs/add/operator/do';
dans mon cas il n'y avait PAS BESOIN de changer 'do' -> 'tap';
si un matériau angulaire est utilisé, une réinstallation peut être nécessaire après l'exécution de la première commande.
Pour que cela fonctionne pour mon projet (Angular 6, RxJS 6), j'ai dû apporter les modifications suivantes:
import { Injectable } from '@angular/core';
import { HttpRequest, HttpHandler, HttpEvent, HttpInterceptor, HttpResponse, HttpErrorResponse } from '@angular/common/http';
import { Observable } from 'rxjs';
import { tap } from 'rxjs/operators';
import { Router } from '@angular/router';
Et modifiez l'extrait d'en haut pour qu'il soit:
(chaînage changé en tuyauterie, et changé 'do' en 'tap')
@Injectable()
export class AuthInterceptor implements HttpInterceptor {
constructor(private injector: Injector, private router: Router) {
}
intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
const auth = this.injector.get(AuthenticationService);
const authHeaders = auth.getAuthHeader();
const authReq = request.clone({headers: authHeaders});
return next.handle(authReq).pipe(
tap((event: HttpEvent<any>) => {
if (event instanceof HttpResponse) {
}
}, (err: any) => {
if (err instanceof HttpErrorResponse) {
if (err.status === 403) {
this.router.navigate(['login']);
}
}
})
);
}
}
La raison en est quelques modifications récentes dans RxJS 6
Utilisez la tuyauterie au lieu de chaîner comme nouvelle syntaxe d'opérateur. Le résultat d'un opérateur est transmis à un autre opérateur.
Et
Remarque Certains opérateurs changent de nom en raison de collisions de noms avec des mots réservés par JavaScript! Ceux-ci incluent: do -> tap, catch -> catchError, switch -> switchAll, enfin -> finalize.
Face au même problème, voici comment j'ai résolu
remplace les fonctions suivantes dans le code car elles sont mises à jour dans rxjs
do => tapez sur, catch => catchError, switch => switchAll, enfin => finaliser
pour plus d'informations, consultez le journal des modifications de rxjs.
Si votre erreur est property 'do' doesn't exist on type Observable
, essayez d'importer l'opérateur. Placez ceci sur votre fichier:
import 'rxjs/add/operator/do';