Disable Angular HttpInterceptor for some call Disable Angular HttpInterceptor for some call angular angular

Disable Angular HttpInterceptor for some call


You can use HttpBackend to do this.

Description: When injected, HttpBackend dispatches requests directly to the backend, without going through the interceptor chain.

Using: You can use same like HttpClientby import it from @angular/common/http

Example:

import { HttpClient, HttpBackend } from '@angular/common/http';...@Injectable({  providedIn: 'root'})export class HttpHelperService {  private httpClient: HttpClient;  constructor( httpBackend: HttpBackend) {      this.httpClient = new HttpClient(httpBackend);  }  // use like normal with HttpClient. However, should name it carefully to separate which http request go throught interceptor and which is not  put(path: string, body: Object = {}): Observable<any> {    return this.httpClient.put(      `${this.URL}${path}`,      JSON.stringify(body)    ).pipe(catchError(this.formatErrors));  }....

ref: https://angular.io/api/common/http/HttpBackend


With Angular 12, it's possible now to include some metadata (with HttpContext) in your call that can be used within the interceptor to make decisions (or anything you want really).

Example

Your interceptor:

export const BYPASS_LOG = new HttpContextToken(() => false);export class MyLogInterceptor implements HttpInterceptor {  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {    if (req.context.get(BYPASS_LOG) === true)      return next.handle(req);    console.log(`req to ${req.url}`);    return next.handle(req);  }}

Your service:

httpClient.get('https://example.com/', { context: new HttpContext().set(BYPASS_LOG, true) });

You can checkout angular docs for more information: