Angular Interceptors

Name: Angular Interceptors
Author: oguzhan18

oguzhan18/angular-ecosystem-skills

182 installs
6 repo stars
Updated April 4, 2026
oguzhan18/angular-ecosystem-skills

Add HTTP interceptors to attach JWT tokens, normalize API errors, retry failed requests, inject headers, and log outbound traffic across all Angular HttpClient calls.

About

Teaches Angular HTTP interceptor patterns for cross-cutting API concerns including authentication headers, error mapping, retries, logging, and response transformation via HttpClient middleware.

HttpInterceptor DI registration
Auth token attachment and refresh
Global error and retry handling
Request/response transformation
Multi-interceptor chaining order

Angular Interceptors by the numbers

182 all-time installs (skills.sh)
+1 installs in the week ending Aug 4, 2026 (Skillselion tracking)
Ranked #887 of 2,245 Frontend Development skills by installs in the Skillselion catalog
Data as of Aug 4, 2026 (Skillselion catalog sync)

npx skills add https://github.com/oguzhan18/angular-ecosystem-skills --skill angular-interceptors

Add your badge

Show developers this skill is listed on Skillselion. Paste this into your README.

[![Listed on Skillselion](https://skillselion.com/badge/skills/oguzhan18/angular-ecosystem-skills/angular-interceptors.svg)](https://skillselion.com/skills/oguzhan18/angular-ecosystem-skills/angular-interceptors)

Installs	182
repo stars	★ 6
Last updated	April 4, 2026
Repository	oguzhan18/angular-ecosystem-skills ↗

What it does

Add HTTP interceptors to attach JWT tokens, normalize API errors, retry failed requests, inject headers, and log outbound traffic across all Angular HttpClient calls.

Files

SKILL.mdMarkdownGitHub ↗

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);
};

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

Handle errors in interceptor

export const errorInterceptor: HttpInterceptorFn = (req, next) => {
  return next(req).pipe(
    catchError((error: HttpErrorResponse) => {
      if (error.status === 401) {
        inject(Router).navigate(['/login']);
      }
      return throwError(() => error);
    })
  );
};

Use multiple interceptors (order matters)

provideHttpClient(
  withInterceptors([loggingInterceptor, authInterceptor, errorInterceptor])
)

Use HttpContext for per-request flags

const CACHE_KEY = new HttpContextToken<boolean>(() => false);

export const cacheInterceptor: HttpInterceptorFn = (req, next) => {
  if (req.context.get(CACHE_KEY)) {
    // Check cache
  }
  return next(req);
};

// Usage
http.get('/api/data', { context: new HttpContext().set(CACHE_KEY, true) });

Transform request

export const transformInterceptor: HttpInterceptorFn = (req, next) => {
  if (req.url.includes('/api/')) {
    const transformed = req.clone({
      setHeaders: { 'X-Custom-Header': 'value' }
    });
    return next(transformed);
  }
  return next(req);
};

Transform response

export const responseInterceptor: HttpInterceptorFn = (req, next) => {
  return next(req).pipe(
    map(event => {
      if (event instanceof HttpResponse) {
        return event.clone({ body: transformData(event.body) });
      }
      return event;
    })
  );
};