Angular detected that `HttpClient` is not configured to use `fetch` APIs. (Angular 17 – SSR) – Angular

The Problem:

An error occurred after updating to Angular 17, raising the message ‘NG02801: Angular detected that HttpClient is not configured to use fetch APIs.’ This issue is associated with Server-Side Rendering (SSR) and affects application performance and compatibility. The recommended solution is to enable fetch by adding the ‘withFetch()’ method to the ‘provideHttpClient()’ call at the application’s root.

The Solutions:

Solution: Configure `HttpClient` to use `fetch` APIs

NG02801 is a warning message from Angular indicating that the HttpClient is not configured to use the fetch APIs. It is recommended to enable fetch for applications that use Server-Side Rendering (SSR) for better performance and compatibility.

To enable fetch, add the withFetch() method to the provideHttpClient() call at the root of the application in app.config.ts. Here’s an example of how to do this:

import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
import { FetchHttpInterceptor } from './fetch-http-interceptor';

@NgModule({
  imports: [ HttpClientModule ],
  providers: [
    { provide: HTTP_INTERCEPTORS, useClass: FetchHttpInterceptor, multi: true },
  ],
})
export class AppModule { }

The provideHttpClient() method provides the HttpClient service to the application. The withFetch() method configures the HttpClient to use the fetch APIs.

The FetchHttpInterceptor class is a custom interceptor that enables the fetch API for the HttpClient. It extends the HttpInterceptor class and overrides the intercept() method to intercept all HTTP requests and use the fetch API to make the requests.

By enabling fetch, you can improve the performance and compatibility of your SSR application.

Solution 2: ProvideHttpClient with Fetch

To enable fetch APIs and resolve this issue, you can add the withFetch() method to the provideHttpClient() function. This should be done at the root of your application. Here’s an example:

import { provideHttpClient, withFetch } from '@angular/common/http';

export const appConfig: ApplicationConfig = {
  providers: [
    provideHttpClient(withFetch()),
    provideRouter(routes),
    provideClientHydration()
  ]
};

By using the withFetch() method, you’re instructing Angular to use the fetch API for making HTTP requests. This can improve performance and compatibility, especially for applications using Server-Side Rendering (SSR).

Video Explanation:

The following video, titled "Angular detected that HttpClient is not configured to use fetch APIs ...", provides additional insights and in-depth exploration related to the topics discussed in this post.

Angular detected that HttpClient is not configured to use fetch APIs. (Angular 17 - SSR) I hope you found a solution that worked for you ...