Angular 22 Demos
Angular 22

FetchBackend is the Default

Angular 22 makes FetchBackend the default HttpBackend. The withFetch() option is deprecated. Use withXhr() only when you need XHR-specific features like upload progress reports.

1. Active Backend

Injecting HttpBackend and checking its constructor name confirms which implementation is active.

FetchBackend Using the Fetch API (default in Angular 22) 
// Angular 22 ,  withFetch() is deprecated, fetch is default
provideHttpClient()

// Only add withXhr() if you need upload progress
provideHttpClient(withXhr())

2. httpResource with Fetch

httpResource() uses the default FetchBackend under the hood. Browse users from the JSONPlaceholder API.

User #1
userId = signal(1);

userResource = httpResource<User>(
  () => \`https://api.example.com/users/\${this.userId()}\`
);

// Reactively updates when userId() changes ,  powered by FetchBackend

3. HttpClient with Full Response

Traditional HttpClient.get() now runs through FetchBackend by default. Response headers and status codes work the same way. 

// Works exactly the same ,  but now uses Fetch API internally
this.http.get('/api/posts/1', { observe: 'response' })
  .subscribe(response => {
    response.status;                          // 200
    response.headers.get('content-type');     // application/json
    response.body;                            // parsed JSON
  });

4. Upload Progress (XHR Only)

The Fetch API does not support upload progress events. The Fetch API does not support upload progress events. If your app needs reportUploadProgress: true, switch to provideHttpClient(withXhr()). Download progress works with FetchBackend via reportDownloadProgress: true. 

// Upload progress requires withXhr():
// app.config.ts
provideHttpClient(withXhr())

// Then in your component:
this.http.post('/api/upload', formData, {
  reportUploadProgress: true,  // ← replaces reportProgress
  observe: 'events',
}).subscribe(event => {
  if (event.type === HttpEventType.UploadProgress) {
    const pct = Math.round(100 * event.loaded / (event.total ?? 1));
  }
});

// Download progress works with FetchBackend:
this.http.get('/api/file', {
  reportDownloadProgress: true,
  observe: 'events',
});

Migration Guide

  • Remove withFetch() — It's deprecated. provideHttpClient() already uses FetchBackend by default.
  • No code changes needed — HttpClient API is the same. Only the underlying transport changed from XMLHttpRequest to the Fetch API.
  • Upload progress? — Add withXhr() if you need reportUploadProgress: true for uploads. Download progress works with FetchBackend via reportDownloadProgress: true. Download progress still works with FetchBackend.
  • SSR compatible — FetchBackend works in both browser and server environments. Do not use withXhr() in SSR.