とんかつ時々あんどーなつ

〜たとえ低空でも飛行していられるように〜

Angular アプリケーションを standalone にマイグレーションする

Angular

はじめに

standalone API は v14 で開発者プレビューとして提供され v15.0 で正式にリリースされた機能である。

そもそも standalone とは、という点については今回は触れない。過去記事のリンクを載せておく。

既存のコンポーネントを standalone にしたいと思った場合 standalone: true のフラグを立てるだけで簡単にできる。しかし、1 つや 2 つならよいが、既存のアプリケーションをすべて standalone に置き換えていくのはなかなかの作業量だと思っていた。

しかし、そんな悩みを吹き飛ばすマイグレーションコマンドが v15.2 で提供された。CLI によってどのくらいお手軽にマイグレーションできるか試してみたので備忘録として記事にした。

Migrate to standalone

マイグレションをするには v15.2 である必要があるので @angular/core および @angular/cli を v15.2 以上にアップデートする。 マイグレーションの手順は、すでにドキュメントが用意されていたので基本的にはこの通り進む。

https://angular.io/guide/standalone-migration

マイグレーションコマンドは以下の一つである。

ng generate @angular/core:standalone

しかし、マイグレーションタイプが 3 つ用意されており、これらを順に実行する必要がある。

$ ng generate @angular/core:standalone
? Choose the type of migration: (Use arrow keys)

❯ Convert all components, directives and pipes to standalone
  Remove unnecessary NgModule classes
  Bootstrap the application using standalone APIs

Convert all components, directives and pipes to standalone

まず、1 つ目のタイプはコンポーネントとディレクティブとパイプを standalone に変換する。コマンド実行時にマイグレーション対象の path を指定できる。複数プロジェクトを管理しているモノレポや 1 つのプロジェクトでもアプリケーションの規模が大きいときは部分的にマイグレーションできるようになっている。

今回は特に部分指定はせず、デフォルト(./)で進む。コマンドの実行が終わると各コンポーネントに standalone: true とそれぞれ必要な imports が挿入される。このステップだけでもアプリケーションは動作可能である。

Remove unnecessary NgModule classes

2 つ目のタイプは不要になった NgModule を削除する。ここでは AppComponent は standalone になっていないが、 AppModule に変更が入る場合があるのでこのステップ終了時には build エラーになる場合がある。その場合は気にせず、次のステップに行く。

Bootstrap the application using standalone APIs

最後に standalone タイプの bootstrap に切り替える。app.component.ts と main.ts が変更され app.module.ts が削除される。ここまでやって(あくまで今回の場合だが)以下の 2 点でエラーが出たので、手動で対応した。

  • app.component.html で表示していたコンポーネントが app.component.ts で imports に登録されていなかった
  • main.ts でマイグレーション前に使っていた platformBrowserDynamic() の import 文が残っていた

あとはフォーマットなどをかけ、start したら無事アプリケーションの起動を確認できた。

その他

マイグレーションコマンドのすべてのステップが終わった時点で残った NgModule がある。RoutingModule である。また spec の更新もおこなわれていない。 これらは今のところ CLI ではマイグレーションできないので手動で更新していく必要がある。

まとめ

先日リリースされた v15.2 でさっそく standalone へのマイグレーションを実施してみた。すでに公式ドキュメントも用意されており、100% 自動でというわけにはいかないが、それでもあまり負担なくマイグレーションできる印象を受けた。

コンポーネント、ディレクティブ、パイプの部分的なマイグレーションから始められるので、少しずつ standalone に変えていってみるのもいいかもしれない。