Angular v16 が出たので公式のリリースブログを見ながら軽く触ってみる。
Angular v16 is here!. Six months ago, we reached a… | by Minko Gechev | May, 2023 | Angular Blog
正直、機能紹介はリリースブログで十分なので、以下は個人的な備忘録である。
新規プロジェクト作成時に standalone で始める
--standalone オプションを渡すことで始められるようになった。以下のコマンドで新規プロジェクトを作成する。
npm create @angular ng-sample-v16 -- --standalone
routing や style オプションと異なり、まだ対話形式での設定はできないので自分で指定する必要がある。 angular-cli/schema.json at 16.0.0 · angular/angular-cli · GitHub
作成されたプロジェクトには src/app/app.config.ts という見慣れないファイルが追加されている。これは { providers: Array<Provider | EnvironmentProviders> } の型をしている ApplicationConfig を宣言するファイルになっている。ここで宣言した値は bootstrapApplication() の第 2 引数に渡され環境 injector に登録される。つまり追加で環境 injector に登録したいものがある場合はこのファイルを編集することになる。
少し脱線するがこの ApplicationConfig を構築する考え方はコンポーネントのテストの setup にも役立ちそうだと思った。
standalone へのマイグレーション
マイグレーションはすでに v15.2 でリリース済みであり以下でも取り上げたので割愛する。
Angular アプリケーションを standalone にマイグレーションする - とんかつ時々あんどーなつ
esbuild を使ったビルドシステムが開発者プレビューに
esbuild を使ったビルドシステムが開発者プレビューになった。設定はとても簡単で angular.json を編集して build architect の builder を変更するだけで良い。
diff --git a/angular.json b/angular.json index ab0c9cc..fe02768 100644 --- a/angular.json +++ b/angular.json @@ -26,7 +26,7 @@ "prefix": "app", "architect": { "build": { - "builder": "@angular-devkit/build-angular:browser", + "builder": "@angular-devkit/build-angular:browser-esbuild", "options": { "outputPath": "dist/ng-sample-v16", "index": "src/index.html",
budgets オプションなど一部サポートされていないオプションがある。budgets や localize などは将来的には追加予定である。ビルド時に warning メッセージは出るが今は設定は無視されるので気にならなければそのままでよい。
実装予定のオプションやその他の制限事項は公式ドキュメントを見るのがよい。 https://angular.io/guide/esbuild
Jest の実験的サポート
単体テストの改善の第一歩として Jest が実験的にサポートされた。まずは angular.json を編集して test architect の builder とオプションを変更する。
diff --git a/angular.json b/angular.json index fe02768..906662f 100644 --- a/angular.json +++ b/angular.json @@ -91,22 +91,13 @@ } }, "test": { - "builder": "@angular-devkit/build-angular:karma", + "builder": "@angular-devkit/build-angular:jest", "options": { "polyfills": [ "zone.js", "zone.js/testing" ], - "tsConfig": "tsconfig.spec.json", - "inlineStyleLanguage": "scss", - "assets": [ - "src/favicon.ico", - "src/assets" - ], - "styles": [ - "src/styles.scss" - ], - "scripts": [] + "tsConfig": "tsconfig.spec.json" } } }
続いて Jest をインストールする。
npm install jest --save-dev
この状態でテストを実行すると以下のメッセージが出たので jest-environment-jsdom もインストールする。
NOTE: The Jest builder is currently EXPERIMENTAL and not ready for production use. `jest-environment-jsdom` is not installed. Install it with `npm install jest-environment-jsdom --save-dev`.
npm install jest-environment-jsdom --save-dev
これで Jest を使ったテストが実行できるようになった。
Angular: Angular CLI の Jest サポートを試す により詳しい設定についても記載されているので参考にしたい。
takeUntilDestroyed
開発者プレビューだが takeUntilDestroyed() という API が提供された。例えばコンポーネントなどで購読しているストリームをコンポーネント破棄時に購読を解除したいケースがある。
destroyed$ = new Subject<void>(); data$ = myStream$.pipe(takeUntil(this.destroyed$)); ngOnDestroy() { this.destroyed$.next(); }
以下はこれを簡略化して記述できる関数であり、特定のライフサイクル結びつけたいときに有効である。
import { takeUntilDestroyed } from '@angular/core/rxjs-interop'; data$ = myStream$.pipe(takeUntilDestroyed())；
Required inputs
Input プロパティの指定を必須にし、指定されない場合コンパイルエラーになるという機能である。Input プロパティに required というフラグが追加されているのでこれを true にするだけでよい。
@Input({ required: true }) count!: number;
このコンポーネントを表示するときに count を指定しないと error NG8008: Required input 'count' from component MyComponent must be specified. が発生する。エラーコード 8008 は新たに追加されており、MISSING_REQUIRED_INPUTS を意味する。
ずっとあると嬉しいと思っていたので、個人的にはイチオシの新機能になる。
まとめ
Signals と SSR は軽く試すにはボリュームが大きいので扱わなかったが、新機能追加と並行して開発者体験があがるような機能変更も多く入っており、とてもわくわくするバージョンになっている。開発者プレビューや実験的サポートも数多くあり、これからのアップデートにも期待したいと思う。
