angular - Error: "Proporcionaste 'undefined' donde se esperaba un flujo. Puedes proporcionar un Observable, Promise, Array o Iterable." en mi Interceptor de Autenticación

Quiero interceptar cada solicitud a la API y verificar el código de estado para que pueda mostrar un mensaje o redirigir a un componente específico, pero está dando el siguiente error:

main.js:1580 TypeError: Proporcionaste 'undefined' donde se esperaba un flujo. Puedes proporcionar un Observable, Promise, Array o Iterable.\n en subscribeTo (vendor.js:179688)\n en subscribeToResult (vendor.js:179824)\n en MergeMapSubscriber._innerSub (vendor.js:175271)\n en mergeMapSubscriber._tryNext (vendor.js:175265)\n en MergeMapSubscriber._next (vendor.js:175248)\n en MergeMapSubscriber.next (vendor.js:170316)\n en Observable._subscribe (vendor.js:172287)\n en Observable._trySubscribe (vendor.js:169772)\n en Observable.subscribe (vendor.js:169758)\n en MergeMapOperator.call (vendor.js:175233)

Este es mi AuthInterceptor:

import { Injectable } from '@angular/core';
import { HttpRequest, HttpHandler, HttpEvent, HttpInterceptor, HttpHeaders, HttpErrorResponse } from '@angular/common/http';
import { Observable, throwError } from 'rxjs';
import { tap } from 'rxjs/operators'; 
import { CommonService } from '../common.service';
import { Router } from '@angular/router';
import { AuthenticationService } from './authentication.service';


@Injectable({
  providedIn: 'root'
})
export class AuthInterceptorService implements HttpInterceptor {

  constructor(
    private common: CommonService,
    private router: Router,
    private auth: AuthenticationService
  ) { }

  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    if (req.headers.get('No-Auth') === 'True') {
      return next.handle(req.clone());
    }
    // To attach header on every request
    if (localStorage.getItem('currentUser') != null) {
      const clonedreq = req.clone({
        headers: req.headers.set('Authorization', 'Bearer ' + localStorage.getItem('currentUser'))
      });
      return next.handle(clonedreq).pipe(tap(
        succ => { },
        err => {
          if (err.status === 401) {
            this.router.navigateByUrl('/login');
          } else if (err.status === 403) {
            this.router.navigateByUrl('/Forbidden');
          } else if (err.status === 400) {
            this.router.navigateByUrl('/error404');
          }
        }
      ));
    } else {
      this.router.navigateByUrl('/login');
    }
  }
}

No puedo identificar la línea o el bloque que lo está causando, ya que no aparece en ningún lugar del error. El proyecto se compila perfectamente. Este error se muestra en casi todas las páginas del proyecto donde se envía una solicitud a la API web.

Respuesta #1

En el bloque else te falta la declaración return. Agrega return next.handle(req.clone()); en el bloque else cuando localStorage.getItem('currentUser') sea nulo

Respuesta #2

Rishabh, otros relacionan este error con la existencia de 'interceptores', esto podría muy bien ser el caso. Sin embargo, hoy obtuve el mismo TypeError exacto. Mi aplicación, actualmente aún en desarrollo, no hace uso de 'interceptores' (quizás en el futuro, quién sabe). Es una aplicación de Angular actualmente actualizada (versión 9.0.2) conectada a una API (funciones de Firebase). Estaba implementando un nuevo componente (CRUD) 'contratistas' en el cual decidí hacer uso de 'angular-in-memory-web-api' antes de almacenar datos en el backend.

Tan pronto como había implementado el módulo 'InMemoryWebApiModule.forRoot(ContractorData)' en la sección 'imports' del App.Module, noté que al recuperar otra entidad de repente ya no podía acceder más a la API, notando en la consola del navegador:

ERROR TypeError: Proporcionó 'undefined' donde se esperaba un flujo. * Puede proporcionar un Observable, Promise, Array o Iterable.

Entonces, mi hipótesis es: implementar el ImMemoryWebApiModule interfiere (en mi caso) con el proceso de HttpClient de tal manera que elimina o borra información en la solicitud enviada a la API.

Ver captura de pantalla

¡Esperemos que esto te ayude un poco a investigar tu problema!