【Angular】Angular 18 アップデートで HttpClientModule たちが provideHttpClient に置き換わる

前回、記事を書いていて、
マイグレーション個別に取り上げた方が記事として読みやすそうと思ったので、今回は内容を絞ってお届けする。

というわけで、Angular 18 にアップデートする際、実行されるマイグレーションの一つに、HttpClientModuleたちが provideHttpClient に置き換わる、というやつがあるので紹介する。

文字通り HttpClientModule HttpClientXsrfModule HttpClientJsonpModule　たちは非推奨となるので、provideHttpClient withJsonpSupport withXsrfConfigurationに置き換わるという内容。
XsrfModule とか JsonpModule とかそもそも使ったことねえなあ、という感じではある。

• HttpClientModule
  • https://v17.angular.io/api/common/http/HttpClientModule
• HttpClientXsrfModule
  • https://v17.angular.io/api/common/http/HttpClientXsrfModule
• HttpClientJsonpModule
  • https://v17.angular.io/api/common/http/HttpClientJsonpModule
• provideHttpClient
  • https://angular.dev/api/common/http/provideHttpClient
• withJsonpSupport
  • https://angular.dev/api/common/http/withJsonpSupport
• withXsrfConfiguration
  • https://angular.dev/api/common/http/withXsrfConfiguration

Http Modules

Before

import { HttpClientModule, HttpClientJsonpModule, HttpClientXsrfModule } from '@angular/common/http';

@NgModule({
    imports: [CommonModule, HttpClientModule, HttpClientJsonpModule, HttpClientXsrfModule]
})
export class AppModule {}

After

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

@NgModule({
    imports: [CommonModule],
    providers: [provideHttpClient(withJsonpSupport(), withXsrfConfiguration())]
})
export class AppModule {}

Testing

HttpClientTestingModuleはprovideHttpClientTesting()へと置き換わるようだ。

• HttpClientTestingModule
  • https://v17.angular.io/api/common/http/testing/HttpClientTestingModule
• provideHttpClientTesting
  • https://angular.dev/api/common/http/testing/provideHttpClientTesting

Before

import { HttpClientTestingModule } from '@angular/common/http/testing';

describe('some test', () => {

    it('...', () => {
      TestBed.configureTestingModule({
        imports: [HttpClientTestingModule]
      })
    })
})

After

import { provideHttpClientTesting } from '@angular/common/http/testing';
import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';

describe('some test', () => {

    it('...', () => {
      TestBed.configureTestingModule({
        providers: [provideHttpClient(withInterceptorsFromDi()), provideHttpClientTesting()]
      })
    })
})

これらは動作的には互換性があり、非推奨になっている API たちはまだ削除されてないっぽいけど、これを機に置き換えておくと良さそうですね。