Add HTTP Interceptor to standAlone component

Question

I'm trying to add an interceptor to standalone component by adding the interceptor to the providers array in the component itself ( { provide: HTTP_INTERCEPTORS, useClass: AuthInterceptor, multi: true } ), but it's not working...

here is a link to code

thanks :)

Answer 1

As of version 15, Angular will be able to use provideHttpClient during bootstrapping of our application and functional interceptors:

bootstrapApplication(AppComponent, {
providers: [
    provideHttpClient(
        withInterceptors([authInterceptor]),
    ),
]

Funtional interceptor:

import { HttpInterceptorFn } from "@angular/common/http";

export const authInterceptor: HttpInterceptorFn = (req, next) => {

    req = req.clone({
        headers
    }

return next(req)
}

We need to add the withInterceptorsFromDi option to provideHttpClient if we can use a class-based interceptor:

bootstrapApplication(AppComponent, {
providers: [
    provideHttpClient(
        withInterceptorsFromDi(),
    ),
    {
        provide: HTTP_INTERCEPTORS,
        useClass: AuthInterceptor,
        multi: true,
    },
 ] });