In Angular you have to use interceptorFns in the provideHttpClient part of the app.config.ts:

export const appConfig: ApplicationConfig = { providers: [provideRouter(routes), CookieService, provideHttpClient(withInterceptors( [authInterceptor] )), provideAnimations(),], }; 

For the authInterceptor, you can implement it as follows. Note that I'm using CookieService here by choice, but you can adapt this to your needs:

export const authInterceptor: HttpInterceptorFn = ( req: HttpRequest<any>, next: HttpHandlerFn ): Observable<HttpEvent<any>> => { const cookieService = inject(CookieService); const token = cookieService.get('your-token'); if (token) { const cloned = req.clone({ setHeaders: { authorization: token, }, }); return next(cloned); } else { return next(req); } }; 

In Angular 17, it's possible to use HttpInterceptorFn in the provideHttpClient section of the app.config.ts.

export const appConfig: ApplicationConfig = { providers: [provideRouter(routes), CookieService, provideHttpClient(withInterceptors( [authInterceptor] )), provideAnimations(),], }; 

For the authInterceptor, you can implement it as follows. Note that I'm using CookieService here by choice, but you can adapt this to your needs:

export const authInterceptor: HttpInterceptorFn = ( req: HttpRequest<any>, next: HttpHandlerFn ): Observable<HttpEvent<any>> => { const cookieService = inject(CookieService); const token = cookieService.get('your-token'); if (token) { const cloned = req.clone({ setHeaders: { authorization: token, }, }); return next(cloned); } else { return next(req); } };