mcpField
A
angular-interceptors

angular-interceptors

github.com/oguzhan18Development7184 installsUpdated 31w ago
Repository

About angular-interceptors

angular-interceptors is a reference skill for Angular 21 developers implementing HTTP interceptors. It covers functional interceptor setup and common request, response, authentication, and error-handling patterns.

Key features

  1. 01Functional HttpInterceptorFn setup
  2. 02Registering and ordering interceptors
  3. 03Adding authentication headers
  4. 04Handling HTTP errors
  5. 05Using HttpContext for request flags
  6. 06Transforming requests and responses

Use cases

  1. 01Adding bearer tokens to HTTP requests
  2. 02Redirecting after a 401 response
  3. 03Applying per-request cache flags
  4. 04Modifying API requests or responses

Install

Copy the command and run it in a terminal.

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

After installing, type/angular-interceptorsin Claude Code to confirm it loaded.

Bundled files

References and scripts installed along with SKILL.md.

references/discussions/
_INDEX.md
references/docs/
_INDEX.md
references/issues/
_INDEX.md
references/releases/
_INDEX.md

Details

From the project README

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

Comments

Markdown supported