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

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

Hello Angular v20

Angular

はじめに

先日 Angular v20 が発表された。

Announcing Angular v20. The past couple of years have been… | by Minko Gechev | May, 2025 | Angular Blog

変更点は公式ブログに書いてある通りなので割愛し、実際に触ってみて気になったところをまとめていく。

新規アプリケーションの作成

まずはアプリケーションを新規に用意してみる。

npm create @angular@latest ng-sample

最初の変更点として Zoneless アプリケーションにするかどうかをオプショナルで選択できる。もちろん Developer Preview であるため、選択は自己責任となる。

v19 との違い

構造 suffix の廃止

ファイル名に構造の種類を示す suffix の付与を推奨しなくなった。 いままで app.componen.ts だったものは app.ts になっている。個人的には suffix が付いている方が好みだったので少し複雑である。

builder の変更

builder が @angular-devkit/build-angular から @angular/build に変更になっている。これによってインストールされているパッケージも変わった。

Zoneless

先ほど Developer Preview と書いたが Experimental から昇格はしているため、いくらか安定はしたと判断できる。

Zoneless を選んだ場合は、ApplicationConfig の内容が変化する。具体的には provideZoneChangeDetection() の代わりに provideZonelessChangeDetection() が使われるようになる。 また、angular.json からは Zone に関する polyfills の読み込みがなくなる。

もちろんアプリケーションのサイズも polyfills 分が削減される。

// with Zone 


Initial chunk files   | Names         |  Raw size | Estimated transfer size
main-HYLN72EV.js      | main          | 210.34 kB |                57.46 kB
polyfills-B6TNHZQ6.js | polyfills     |  34.58 kB |                11.32 kB
styles-5INURTSO.css   | styles        |   0 bytes |                 0 bytes

                      | Initial total | 244.92 kB |                68.78 kB

// Zoneless

Initial chunk files | Names         |  Raw size | Estimated transfer size
main-D7YEQ2SZ.js    | main          | 210.11 kB |                57.48 kB
styles-5INURTSO.css | styles        |   0 bytes |                 0 bytes

                    | Initial total | 210.11 kB |                57.48 kB

既存アプリケーションのアップデート

いつも通り、アップデートコマンドを実行する。

npm run ng update @angular/core@20 @angular/cli@20

構造 suffix について

新規で作成すると suffix はつかないが、アップデートでは互換性を維持するため、suffix を残すようにマイグレーションされる。一部を抜粋するが angular.json に次のような変更が入る。

    "@schematics/angular:component": {
      "type": "component"
    },
    "@schematics/angular:directive": {
      "type": "directive"
    },

builder の変更

@angular-devkit/build-angular を使っている場合は builder のマイグレーションが実行される。ただし、v19.x へのアップデートでもマイグレーションされるので、最新バージョンを維持している場合はすでに置き換わっていることもある。

NgIf / NgFor / NgSwitch の非推奨

ついに NgIf / NgFor / NgSwitch が非推奨になる。@if などが stable になってから 2 バージョンを経ているので特別困ることはないと考えられる。逆にディレクティブを使わなくなる分、バンドルサイズが削減されたりとメリットのほうが大きい。

自動でマイグレーションされるので、既存のアプリケーションで使っていてもそこまで気にしなくていいと思う。

新たに使おうとしたときには Language Service が警告を出してくれるので、マイグレーション後に誤って使ってしまうということも防げるだろう。

おわりに

本当に一部しか触れていないので、全容は公式からのブログを是非読んで欲しい。 個人的には signal 周りの API が安定版になったので、積極的に活用していきたいと考えている。