web-dev-qa-db-fra.com

Angular 6: La propriété 'capture' n'existe pas sur le type 'Observable <Response>'?

Je suis en train de mettre à jour mon application vers Angular 6 . Je suis en train de passer de Angular 4 , mais le code ci-dessous provoque des erreurs dans Angular 6, où cela a bien fonctionné dans Angular 4. 

Les erreurs que je reçois:

La propriété 'of' n'existe pas sur le type 'typeof Observable'

Erreur: la propriété 'capture' n'existe pas sur le type 'Observable'

Comment dois-je résoudre ces erreurs? 

  private authInterceptor(observable: Observable<Response>): Observable<Response> {
    return observable.catch((error, source) => {
      if (error.status == 401) {
        this.router.navigateByUrl('/login');
        return Observable.of();
      } else {
        return Observable.throw(error);
      }
    });
  }
angularrxjsangular6rxjs6angular-observable
11
Shubham Verma

Puisque vous avez balisé votre question rxjs6, je suppose que la mise à niveau vers Angular 6 inclut une mise à niveau vers rxjs6. Dans ce cas, cela ne fonctionne pas car les méthodes sur l'objet observable sont maintenant des opérateurs autonomes que vous pouvez appliquer à l'aide de pipe (). En outre, les importations ont changé. Voir le guide de migration pour plus de détails.

Avec rxjs6, cela devrait ressembler à ceci:

import { Observable, EMPTY, throwError } from 'rxjs';
import { catchError } from 'rxjs/operators';

private authInterceptor(observable: Observable<Response>): Observable<Response> {
   return observable.pipe(
       catchError( err => {
            if (err.status == 401) {
                this.router.navigateByUrl('/login');
                return EMPTY;
            } else {
                return throwError(err);
            }
       })
   );
 }
31
Joakim
import 'rxjs/add/operator/catch';

Ou importez Observable de cette façon:

import {Observable} from 'rxjs/Rx';
3
AashishJ

vous devrez importer tous les opérateurs que vous utilisez.

import 'rxjs/add/observable/of';
import 'rxjs/add/observable/throw';
import 'rxjs/add/operator/catch';
2
Mike

Importez la bibliothèque avec la méthode suivante et réorganisez le code

import { catchError } from 'rxjs/operators';
return Observable.pipe(catchError =>...);

Cela a fonctionné pour moi.

1
Susampath

Besoin d'importer l'opérateur de capture 

import 'rxjs/add/operator/catch';
1
Sachila Ranawaka

Je suppose que vous avez migré vers RXJS6 depuis que vous avez également migré vers angular6.

Dans RXJS6, utilisez catch error au lieu de catch tel que vu ici

  import {catchError } from 'rxjs/operators';
  import { Observable, of } from 'rxjs';
1
prabhat gundepalli

Cela a fonctionné pour moi, j’utilise Angular 6.1.0.

import { Observable, Subject, of } from 'rxjs';
import { switchMap, debounceTime, distinctUntilChanged, catchError } from 'rxjs/operators';

this.ofertas = this.subjectPesquisa // Retorno Oferta[]
  .pipe(debounceTime(1000)) // Executa a ação do switchMap após 1 segundo
  .pipe(distinctUntilChanged()) // Apenas executa a ação switchMap se o termo enviado for outro
  .pipe(switchMap((termo: string) => {

    if (termo.trim() === '') {
      // Retornar um observable de array de ofertas vazio.
      return of<Oferta[]>([]);
    }

    console.log('Requisição HTTP para api: ', termo);
    return this.ofertasService.pesquisaOfertas(termo);
  }))
  .pipe(catchError((err: any) => {
    console.log('Erro: ', catchError);
    return of<Oferta[]>([]);
  }));
0
Eduardo Yuidy