Bypass Angular interceptors using HttpContext factory + HttpContextTokens

If the HttpClient is being used within a dependency outside of your control (such as a 3rd party lib) you can still use the HttpContextTokens that were added in Angular v12 by using a HttpClient factory provider. You can scope this to individual modules or components using the providers array:

1. Add DisableInterceptorHandler + token (disable-interceptor.handler.ts)

import { HttpContextToken, HttpHandler, HttpRequest } from '@angular/common/http';
import { Injectable } from '@angular/core';

export const DISABLE_INTERCEPTORS = new HttpContextToken<boolean>(() => false);

export class DisableInterceptorHandler extends HttpHandler {
  constructor(private httpHandler: HttpHandler) {

  handle(req: HttpRequest<unknown>) {
    return this.httpHandler.handle(
        context: req.context.set(DISABLE_INTERCEPTORS, true),

2. Provide the handler in either your component/module/service/whatever providers array

  providers: [
      provide: HttpClient,
      useFactory: (handler: DisableInterceptorHandler) => new HttpClient(handler),
      deps: [DisableInterceptorHandler],

3. Enforce the HttpContextToken in your interceptor

import { HttpErrorResponse, HttpEvent, HttpHandler, HttpInterceptor, HttpRequest } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Observable, throwError } from 'rxjs';
import { catchError } from 'rxjs/operators';
import { DISABLE_INTERCEPTORS } from './disable-interceptor.handler';

export class AuthenticationInterceptor implements HttpInterceptor {
  intercept(request: HttpRequest<unknown>, next: HttpHandler): Observable<HttpEvent<unknown>> {
    if (request.context.get(DISABLE_INTERCEPTORS) === true) {
      return next.handle(request);

    return next.handle(request).pipe(
      // add your typical interceptor logic
Did this post help you? Buy me a coffee!
Buy Me A Coffee
comments powered by Disqus