Angularで「NG02801: Angular detected that `HttpClient` is not configured to use `fetch` APIs.」

2024年8月26日

今回はAngularを使用しているときに下記のwarningが出たときの原因と解消法についてご紹介していきます。

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.

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.

Angularのバージョンは18.0.6です。

Angularで「NG02801: Angular detected that `HttpClient` is not configured to use `fetch` APIs.」

まず、このwarningは現在httpのfetchが使えないという状態を表しております。

対処法としては、provideHttpClientの中にwithFetch()を引数として渡してあげましょう。

import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';
import { provideRouter } from '@angular/router';

import { routes } from './app.routes';
import { provideClientHydration } from '@angular/platform-browser';
import { provideHttpClient, withFetch } from '@angular/common/http';

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