Angular 4 : Utilisation de l'intercepteur HTTP + erreur de l'opérateur timeout de RxJS

Question

J'essaie de définir un délai d'attente par défaut de 10 secondes pour chaque requête HTTP que je fais avec HttpClient. J'ai un intercepteur pour ajouter des valeurs à l'en-tête, et j'ai lu que pour définir un délai d'attente, il faut utiliser l'opérateur RxJS 'timeout', comme ceci :

import { Injectable } from '@angular/core';
import { HttpEvent, HttpInterceptor, HttpHandler, HttpRequest, HttpHeaders } from '@angular/common/http';

import { Observable } from 'rxjs/Observable';
import { timeout } from 'rxjs/operators/timeout';

@Injectable()
export class APIInterceptor implements HttpInterceptor {
  constructor() {

  }

  intercept (req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {

    // NOTE: The following 'authToken' and 'user_id' values are obtained through a global service
    const authReq = req.clone({
      headers: new HttpHeaders ({
        'Content-Type':  'application/json',
        'X_TOKEN_AUTH': authToken,
        'X_IDUSER': user_id
      }) 
    });

    const API_TIMEOUT = 10000;

    //console.log('HEADER: ', authReq)

    return next.handle(authReq).timeout(API_TIMEOUT);   // Set a timeout for the requests
  }
}

Avant d'ajouter la fonction de délai d'attente, tout fonctionnait bien, et les en-têtes étaient injectés avec le jeton d'authentification et l'ID utilisateur. Cependant, je reçois maintenant l'erreur suivante :

next.handle(...).timeout n'est pas une fonction

Est-ce que je fais quelque chose de mal ? Merci !

Answer 1

Si vous souhaitez utiliser le style d'opérateurs "patch", vous devez l'importer à partir du site Web de l'UE. rxjs/add/operator/* :

import 'rxjs/add/operator/timeout';

El 'rxjs/operators/timeout' est utilisée lorsque la méthode pipe() .