Angular v19が来る！インクリメンタルハイドレーションやイベントリプレイなど、注目の新機能をチェックしよう！

11月20日、Angular開発チームの公式ブログで「Angular v19 のご紹介(Meet Angular v19)」と題した記事が公開された。

Angular v19における新機能と改善点は、大きく以下のように分けられる。

パフォーマンス向上
開発体験の強化
新たなリアクティビティ
Angular MaterialとCDKの改良

以下にその内容を具体的に紹介する。

パフォーマンス向上

インクリメンタルハイドレーションのプレビュー

ページの一部を遅延してロードする「インクリメンタルハイドレーション」がプレビュー機能として追加された。@defer構文を用いることで、特定のトリガーで必要なコンテンツを後から読み込んでハイドレートできる。

import { provideClientHydration, withIncrementalHydration } from '@angular/platform-browser';
provideClientHydration(withIncrementalHydration());

特定のコンポーネントを必要な時にハイドレートするには、以下のように設定する。

@defer (hydrate on viewport) {
  <shopping-cart/>
}

イベントリプレイのデフォルト有効化

サーバーサイドレンダリング（SSR）でのユーザー操作の遅延を軽減するため、イベントリプレイがデフォルトで有効化された。この機能は初期ロード時にイベントをキャプチャし、関連JavaScriptがロードされると同時に再生する。

bootstrapApplication(App, {
  providers: [
    provideClientHydration(withEventReplay())
  ]
});

ルートレベルでのレンダリング設定

ServerRouteインターフェースを使い、各ルートに対してサーバーサイド、プリレンダリング、クライアントサイドのいずれでレンダリングするかを設定できる。

export const serverRouteConfig: ServerRoute[] = [
  { path: '/login', mode: RenderMode.Server },
  { path: '/dashboard', mode: RenderMode.Client },
  { path: '/**', mode: RenderMode.Prerender },
];

開発体験の強化

ホットモジュールリプレースメント (HMR)

v19では、スタイルのホットモジュールリプレースメント（HMR）がデフォルトでサポートされ、テンプレートのHMRもフラグを有効にすることで利用可能に。これにより、ファイル変更が即座に反映され、リロードなしで効率的に開発できる。

NG_HMR_TEMPLATES=1 ng serve

スタンドアロン設定のデフォルト化

スタンドアロンコンポーネントがデフォルト設定となり、ng updateで既存のプロジェクトも簡単に移行が可能。これにより、依存関係が簡略化され、設定が容易になる。

新たなリアクティビティ

linkedSignal と resource の導入

Angularのリアクティビティシステムに、新たなlinkedSignalとresource() APIが追加され、状態管理がより柔軟になった。linkedSignalは依存する状態に基づいて動的に更新され、例えばUIでの選択がオプション変更時にリセットされるように設定できる。

const options = signal(['apple', 'banana', 'fig']);
const choice = linkedSignal(() => options()[0]);
choice.set('fig'); 
options.set(['peach', 'kiwi']);
console.log(choice()); // "peach"

また、resource()を使用して非同期データの管理も容易になる。

@Component(...)
export class UserProfile {
  userId = input<number>();
  userService = inject(UserService);
  user = resource({
    request: user,
    loader: async ({request: id}) => await userService.getUser(id),
  });
}

Angular MaterialとCDKの改良

タイムピッカーコンポーネント

GitHubで要望が多かったタイムピッカーコンポーネントが追加され、ユーザーが時刻を簡単に選択できるようになった。

ドラッグ＆ドロップの二次元サポート

Angular CDKで二次元ドラッグ＆ドロップが可能となり、リストの並べ替えやタブの再配置が簡単に行えるようになった。

高度なテーマAPI

Material 3のテーマAPIが強化され、Sassミックスインを活用して個々のコンポーネントのテーマを柔軟にカスタマイズできるようになった。

詳細はMeet Angular v19を参照していただきたい。