Estaba tratando de utilizar un HttpInterceptors de Angular, para "interceptar" una petición http, pero me encontré con una serie de problemas en el camino. Seguía un tutorial de DominiCode(excelente Youtuber, les dejo el link por si quieren ver sobre él: https://www.youtube.com/watch?v=uQprcZ0FYMw) para interceptar una petición http y mostrar un Spinner mientras espera que cargue la información de la petición, pero llegué a un punto en donde mi app se quebró y leyendo un poco me di cuenta que:
No estaba llamando mi intercepto.ts en el app.module que es donde llamamos el HttpClientModule, y leyendo en internet entendi que era porque todos los interceptores están configurados para funcionar en una sola instancia del servicio HttpClient. Cosa que no estaba haciendo, asi que verificando mi error, lo había dejado algo como esto:
@NgModule({
declarations: [
AppComponent,
],
imports: [
HttpClientModule,
...
],
providers: [{
provide: HTTP_INTERCEPTORS,
useClass: SpinnerService,
multi: true,
}],
bootstrap: [AppComponent]
})
export class AppModule { }
Pero al dejarlo así seguía recibiendo el error: class interceptor is not a module. Así que seguí investigando y leyendo del porque pasa esto en Angular, entonces terminé en el blog de @aboukone (https://medium.com/code-divoire/angular-when-httpinterceptor-doesnt-work-with-lazy-loaded-modules-26ae5b694b75) En donde según sus palabras, esto ocurre porque es como si se estuviera creando una nueva instancia del servicio HttpClient cada que vez que se necesita por lo que no esta pasando por el intercepto tal como afirma @RandoShtishi (https://stackoverflow.com/questions/64991922/interceptor-declared-in-app-module-is-not-intercepting-call-from-one-lazy-loaded)
Así que @aboukone propone una solución, la cual es, que configurando un módulo Core con nuestro servicio, podría ser una solución ya que esto "agregaría la definición del proveedor del interceptor en el ámbito del módulo a cada función de carga diferida".Entonces lo configure de la siguiente forma:
Deje el servicio que muestra/oculta un Spinner, y añadi un Core.module para inyectar mi interceptor
Y en la class interceptor hize algo como esto:
import { Injectable } from "@angular/core";
import { HttpEvent, HttpHandler, HttpInterceptor, HttpRequest } from "@angular/common/http";
import { Observable } from "rxjs";
import { finalize } from "rxjs/operators";
import { SpinnerService } from '../core/spinner.service';
@Injectable()
export class SpinnerInterceptor implements HttpInterceptor{
constructor(private spinnerSvc: SpinnerService){}
intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
this.spinnerSvc.show();
return next.handle(req).pipe(
finalize( () => this.spinnerSvc.hide()));
}
}
Como ven intente investigar lo más posible y leer la documentación, asi como seguir un tutorial pero no llego a una solución ya que aun recibo un error del tipo:
Sinceramente, no se que más hacer, ya le di vuelta a Google, conceptualize cada cosa que estaba utilizando para entender, diagrame y no llego a la solución. ¿Alguien sabe porque sucede esto? O...es que quizás no tiene nada que ver con mi clase y tal vez es algun tipado que me esta dando rollo, si alguien me comparte de su conocimiento porfis se lo agradeceria porfis, se que me han ayudado bastante en esta comunidad, pero aqui si ando perdida.
Gracias, saludos!
Nota: Utilizo Angular CLI en su última versión
ACTUALIZACION
Luego de la solución que me han dado, no me muestra el spinner, pero lo que si noto en clg "this.spinner" me esta trayendo lo siguiente, por lo que descarto la posibilidad que venga undefined: