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

Question

I got this error after updating to angular 17:

NG02801: Angular detected that `HttpClient` is not configured to use `fetch` APIs. It's strongly recommended to enable `fetch` for applications that use Server-Side Rendering for better performance and compatibility. To enable `fetch`, add the `withFetch()` to the `provideHttpClient()` call at the root of the application.

I think after coding my services and importing HttpClient via inject functions it reached to this.

Ellsworthellwood

Answer 1

NG02801 is not an error but an warning that encourage the developers to enable the fetch implementation of the HttpClient.

To do this, just call provideHttpClient(withFetch()) in your app.config.ts.

Jaquez

does this mean we can remote HttpClientModule? and provide it with that instead? – Farmland

Use HttpClientModule when you bootstrap an AppModule and provideHttpClient when you bootstrap an AppComponent ! – Jaquez

Is there any document to reference this setup? Couldn’t find same behavior from http client module – Derry

What are you looking for exactly ? It should be used with the helpers mentionned here : angular.io/api/common/http/provideHttpClient – Jaquez

is HttpClientModule using fetch API as well? – Derry

No it doesn't. Fetch is only available with provideHttpClient. – Jaquez

You can also use provideHttpClient when using an AppModule, this not limited to AppComponent-Bootstraping – Lutherlutheran

Could someone share a complete example for this? My angular CLI did not get generate a new project with a app.config.ts file. (noob problem). – Filariasis

I found and example file here: github.com/angular/angular/blob/main/aio/content/examples/… – Filariasis

Answer 2

use this

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

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

Spaetzle

what if i dont have appConfig file? – Morty

@Morty I believe you can just remove the HttpClientModule import from your app.module.ts and put provideHttpClient(withFetch()) in the providers. – Woebegone

Answer 3

If the problem still exists, even if you have included in main.ts or other files.

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

providers : [provideHttpClient(withFetch())]

Keep your server running in a terminal and run your app in other terminal, if the server is present in the same app.

Kinghood