Angularのスタンドアローンコンポーネントを体当たりでさわっているところです。モジュールのインポート方法がこれまでと変わっていたため、整理も兼ねて記事にしました。

従来の方法ではモジュールのインポートができない

久しぶりにAngularを触るため、過去に試した方法をそのまま使ってみました。

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';
import { HttpClientModule } from '@angular/common/http';
import { IonicModule, IonicRouteStrategy } from '@ionic/angular';

import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    HttpClientModule,  // これを追加する
    IonicModule.forRoot(),
    AppRoutingModule
  ],
  providers: [
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy },
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

しかしこの方法では、スタンドアローンコンポーネントとして作られたものに@NgModuleディレクティブがない様子でした。また、HttpClientModuleそのものにも非推奨の注意メッセージが出ていました。

'HttpClientModule' is deprecated.ts(6385)
index.d.ts(3210, 4): The declaration was marked as deprecated here.
(alias) class HttpClientModule import HttpClientModule
Configures the dependency injector for HttpClient with supporting services for XSRF. Automatically imported by HttpClientModule.
You can add interceptors to the chain behind HttpClient by binding them to the multiprovider for built-in DI token HTTP_INTERCEPTORS.

src/main.tsでprovideHttpClientする

スタンドアローンコンポーネントでは、どうやらデコレーターによるセットアップではなく、bootstrapApplication関数のパラメータとして渡す様子です。provideHttpClient()をprovidersに渡すことで、HttpClientが使えるようになりました。

import { bootstrapApplication } from '@angular/platform-browser';
import { RouteReuseStrategy, provideRouter, withPreloading, PreloadAllModules } from '@angular/router';
import { IonicRouteStrategy, provideIonicAngular } from '@ionic/angular/standalone';

import { routes } from './app/app.routes';
import { AppComponent } from './app/app.component';
import { provideHttpClient } from '@angular/common/http';

bootstrapApplication(AppComponent, {
  providers: [
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy },
    provideIonicAngular(),
    provideHttpClient(),
    provideRouter(routes, withPreloading(PreloadAllModules)),
  ],
});

参考

• https://v17.angular.jp/guide/standalone-components