provideHttpClientの使い方

AngularではHttpClientを使いたい時、 HttpClientModule をimportするのが主な方法だったが、
Angular 15から provideHttpClient() を providers に書くだけでも可能となった。
その際、 Interceptorなどの設定で引っかかったのでメモ。

今までのInterceptorを使う

HttpClientModuleの時には providers に
{ provide: HTTP_INTERCEPTORS, useClass: AuthInterceptor, multi: true },
という感じに書いておけばInterceptorが機能したが、 provideHttpClient() だと機能しない。
この形式のInterceptorを使いたい場合、 withInterceptorsFromDi() を入れる。

例

providers: [
  provideHttpClient(withInterceptorsFromDi())
];

関数型Interceptorを使う

Guardが関数で完結できるようになったのと同じように、 provideHttpClient() を使うことでInterceptorも関数のみで完結できるようになる。
関数型Interceptorを使いたい場合、 withInterceptors を用いる。

例

providers: [
  provideHttpClient(withInterceptors([AuthInterceptor]))
];

ちなみに関数型Interceptorは

export function interceptor(req: HttpRequest<any>,next: HttpHandlerFn): Observable<HttpEvent<any>>{
   const fooService = inject(FooService)
   省略
}

という感じで定義できる。

その他

公式APIドキュメントに載ってるオプションぽいやつ。動作は未確認

withXsrfConfiguration

withXsrfConfiguration({ cookieName?: string; headerName?: string; })

Xsrf-tokenをどこから取得するかの設定ができるっぽい。
Angularは同じOriginじゃないと自動でXsrf-tokenを入れてくれないが、それはこれでも変更できなさそう？

withNoXsrfProtection

withNoXsrfProtection()

Xsrf-tokenの自動入れ込みを止めるオプション

withJsonpSupport

withJsonpSupport()

JSONPのサポートを有効

withRequestsMadeViaParent

withRequestsMadeViaParent()

まだ Developer Preview。HttpClientは常に新しいインスタンスで注入されるけど、このオプションを使うと既に存在するHttpClientインスタンスが使われるらしい。
この英語記事 によるとInterceptorをLazyloadモジュール内で使うのに使えるらしい

withFetch

withFetch()

同じく Developer Preview。 FetchAPIを使うようにするフラグ