Angular Interceptors

Angular HTTP Interceptors

Version: Angular 21 (2025) Tags: HTTP, Interceptors, Auth, Middleware

References: Interceptors Guide • API

API Changes

This section documents recent version-specific API changes.

• NEW: Functional interceptors — Use HttpInterceptorFn instead of class-based

• NEW: provideHttpClient with withInterceptors — Modern interceptor setup

• NEW: HttpContext — Per-request metadata with HttpContextToken

• DEPRECATED: Class-based HttpInterceptor — Migrate to functional

Best Practices

• Create functional interceptor

export const authInterceptor: HttpInterceptorFn = (req, next) => {
  const authService = inject(AuthService);
  const token = authService.getToken();
  
  if (token) {
    const authReq = req.clone({
      setHeaders: { Authorization: `Bearer ${token}` }
    });
    return next(authReq);
  }
  return next(req);
};

• Register interceptors

export const appConfig: ApplicationConfig = {
  providers: [
    provideHttpClient(
      withInterceptors([authInterceptor, logInterceptor])
    )
  ]
};