Preparing the Demo Project

Once the Angular project is scaffolded, add the markup below to the HTML template file.

<button (click)="callWitInterceptor()" >Call using interceptor</button>
<br>
<hr>
<button (click)="callWithoutInterceptor()" >Call without interceptor</button>

In the TypeScript file, define the method callWitInterceptor; the second method will appear later in this guide.

constructor(private http: HttpClient) {}
callWitInterceptor() {
    this.http.get('https://dog.ceo/api/breeds/image/random').subscribe();
  }

The interceptor itself is defined as shown below and registered inside the providers array of the NgModule.

intercept(request: HttpRequest<unknown>, next: HttpHandler): Observable<HttpEvent<unknown>> {
    console.log('Through interceptor')
    return next.handle(request);
  }

A runnable StackBlitz project is linked above for reference.

When the first button is clicked, the console output from the interceptor appears, as seen in the screenshot.

image

Skipping the Interceptor with HttpBackend

To make a request that bypasses the interceptor chain, inject HttpBackend. As documented in the official guide, this service forwards requests directly to the backend, avoiding any configured interceptors. That behavior fits the scenario perfectly.

Now add the handler for the second button in the TypeScript file, and be sure to inject HttpBackend into the component’s constructor.

constructor(private http: HttpClient, private httpBackend: HttpBackend) {}
  callWithoutInterceptor() {
    this.httpBackend
      .handle(new HttpRequest('GET', 'https://dog.ceo/api/breeds/image/random'))
      .subscribe();
  }

After this change, clicking the second button produces no interceptor log; the request still goes out and appears in the network tab.

image

Using HttpBackend thus provides a clean route around application-wide interceptors. If you found this useful, feel free to pass it along or reach out on Twitter with any questions. Until next time, happy coding.