Stop Using XMLHttpRequest: Why Angular 22 Shifted to the Native Fetch API

Angular’s HttpClient has covertly replaced its 25-year-old engine with the new Fetch API. This is why XMLHttpRequest is dead, how it powers Edge Computing, and what it means for your HTTP interceptors.

Throughout almost all of its history, Angular’s HttpClient was an ergonomic RxJS wrapper over a very outdated technology — XMLHttpRequest (XHR).

XHR was invented by Microsoft way back in 1999 and was intended for use with Outlook Web Access. This technology is an awkward, stateful, event-based API which the web development community is trying to move away from for almost a decade already. While the rest of the JavaScript world long ago adopted the native fetch() API, Angular had to stick to XHR due to a requirement for strict backward compatibility.

In the modern era of Zoneless and Server-Side Rendering (SSR), however, XHR is not only legacy tech debt — it’s a current architectural limitation. Supporting the Fetch backend for HttpClient allows Angular to modernize its networking stack, gain true data streaming, and become Edge Computing-ready.

Here’s the architectural overview of the transition.

1. The Edge Computing Problem (Why XHR Had to Die)

Previously, during our conversation about the current state of backend infrastructure, we spoke about how the trend is changing from using heavy Node.js Docker containers to using lightweight V8 Isolates (Cloudflare Workers, Deno, and Fastly Compute).

These Edge platforms were designed to implement the latest W3C web technologies. They don’t support XMLHttpRequest.

In case if one tries to use the classical Angular SSR app on the Edge network, the SSR flow will break at once, when HttpClient tries to do an API call to hydrate the page.

Fetch API, however, was made for universality. By changing the HttpClient back-end to Fetch, one can make the Angular SSR application portable right away. One can render the application in Cloudflare Workers or Deno Deploy making API calls from geographically closer locations.

2. Enabling the Fetch Engine

Adapting your app for the usage of Fetch API does not require you to change anything within your application component itself. You don’t have to make any changes to your this.http.get() methods. All you need to do is adapt your backend provider in your root application module.

import { ApplicationConfig } from '@angular/core';
import { provideHttpClient, withFetch, withInterceptors } from '@angular/common/http';
import { authInterceptor } from './core/auth.interceptor';

export const appConfig: ApplicationConfig = {
  providers: [
    // Injects HttpClient using the modern Fetch API backend
    provideHttpClient(
      withFetch(),
      withInterceptors([authInterceptor])
    )
  ]
};

Adding withFetch() makes Angular internally replace your HttpXhrBackend with HttpFetchBackend.

3. True Streaming via ReadableStreams

XHR is intended for full, discrete documents. Large data flows are not handled well by it. When you try to download a 50MB file or use chunked HTTP responses with XHR, your browser ends up storing huge amounts of data in its memory cache and then providing it to the JavaScript execution thread, which causes memory bloat and laggy user interfaces.

Fetch API has been designed with ReadableStreams in mind.

When Fetch API backend is used by Angular, it allows reading the incoming data exactly when they arrive to the browser from the network. This is vital for modern AI applications. If you’re designing an application which uses chat-like interface and consumes Server-Sent Events (SSE) stream or chunked LLM responses, Fetch API makes it possible for Angular to do so without filling up the browser memory cache.

4. What Happens to Your Interceptors?

In case of any change in the underlying network engine, the first thing that concerns the senior engineer is the middleware. Will this affect my authentication interceptors?

Not necessarily. Provided that you are running on Functional Interceptors, your interceptors are not affected.

Angular’s interception works on the HttpRequest and HttpResponse abstraction layer, which is above the actual network layer implementation. The interceptors modify the angular request object and only once the pipeline is over does the request get passed on to the HttpFetchBackend which then converts it to fetch().

import { HttpInterceptorFn } from '@angular/common/http';

// This interceptor works perfectly with both XHR and Fetch backends
export const authInterceptor: HttpInterceptorFn = (req, next) => {
  const token = localStorage.getItem('jwt');

  // Clone and mutate the Angular abstraction, not the native request
  const secureReq = req.clone({
    setHeaders: { Authorization: `Bearer ${token}` }
  });
  // Hand off to the next interceptor, and ultimately, the Fetch backend
  return next(secureReq);
};

The Legacy Class-Based Warning:

Even if you are using the outdated class-based interceptors (implements HttpInterceptor), they will still work, although they become increasingly out of place in terms of the current functional approach of Angular. It is the usage of withFetch() and withInterceptors() (functional) that represents the proper architectural approach in Angular 22.

Summary

The move from XHR to Fetch is perhaps the most significant silent upgrade within the Angular environment.

• Make it universally available: Just include withFetch() in your provideHttpClient() setup right away.
• Run natively on Edge: This setup ensures that your Angular SSR engine runs natively on Cloudflare Workers and Deno, without crashing.
• Efficient streaming: Fetch utilizes ReadableStream, greatly improving memory usage when handling large payloads and chunked transfers (such as LLM text generation).
• Interceptors intact: No changes needed for functional interceptors (HttpInterceptorFn) with the Fetch backend.

By simply updating your setup with this single line, you eliminate 25 years of old browser history and align your app’s networking layer with the W3C standard.