I was trying to use an HttpInterceptors from Angular, to "intercept" an http request, but ran into a number of issues along the way. I followed a DominiCode tutorial (excellent Youtuber, I leave you the link in case you want to see about it: https://www.youtube.com/watch?v=uQprcZ0FYMw ) to intercept an http request and show a Spinner while waiting for it to load information from the request, but I got to a point where my app broke and reading a bit I realized that:
I wasn't calling my intercept.ts in the app.module which is where we call the HttpClientModule, and reading on the internet I understood that it was because all the interceptors are configured to work on a single instance of the HttpClient service. Which I wasn't doing, so checking my error, I had left something like this:
@NgModule({
declarations: [
AppComponent,
],
imports: [
HttpClientModule,
...
],
providers: [{
provide: HTTP_INTERCEPTORS,
useClass: SpinnerService,
multi: true,
}],
bootstrap: [AppComponent]
})
export class AppModule { }
But leaving it like this kept getting the error: class interceptor is not a module . So I kept researching and reading why this happens in Angular, then I ended up on @aboukone's blog ( https://medium.com/code-divoire/angular-when-httpinterceptor-doesnt-work-with-lazy-loaded- modules-26ae5b694b75 ) Where according to his words, this happens because it is as if a new instance of the HttpClient service is being created every time it is needed, so it is not going through the intercept as @RandoShtishi states ( https:// stackoverflow.com/questions/64991922/interceptor-declared-in-app-module-is-not-intercepting-call-from-one-lazy-loaded )
So @aboukone proposes a solution, which is, that configuring a core module with our service, could be a solution as this would "add the interceptor provider definition in module scope to each lazy loading function". So configure it as follows:
I left the service showing/hiding a Spinner, and added a Core.module to inject my interceptor
And in the interceptor class I did something like this:
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()));
}
}
As you can see, I tried to investigate as much as possible and read the documentation, as well as follow a tutorial, but I did not reach a solution since I still receive an error of the type:
Honestly, I don't know what else to do, I already turned to Google, conceptualized everything I was using to understand, diagrammed and I didn't get to the solution. Does anyone know why this happens? Or... maybe it has nothing to do with my class and maybe it's some guy who's giving me a hard time, if someone shares their knowledge with me, I'd really appreciate it, I know you've helped me a lot in this community, but here I am lost.
Thanks greetings!
Note: I use Angular CLI in its latest version
UPDATE
After the solution that they have given me, it does not show me the spinner, but what I do notice in clg "this.spinner" is bringing me the following, so I rule out the possibility that it comes undefined:
As provider
HTTP_INTERCEPTORS
you have to provide the class of the interceptor, not the service.Cheers
Provide the interceptor
[ user request ] 1
spinner code For the request of Employees if it is visible
loading spinner
It seems to me that interceptors are very useful, for example, to authenticate a token, but in this type of spinner application, when faced with a request, I do not see much use.