これは Angular Advent Calendar 2021 の 2 日目の記事です。
昨日は @puku0x さんの記事でした。 Angular v13 の開発環境構築 - Qiita
今日は 2021 年の Angular の変更を振り返りたいと思います。
なお、内容の元ネタは ng-japan OnAir - Youtube になります。 毎月配信されているのでぜひこちらも見てみるとよいと思います。
機能追加が入る major / minor version は 11.1.0 (2021-01-20) から 13.0.0 (2021-11-03) まで上がったのでそちらを見ていきます。
変更点ピックアップ
Browser Support
一番大きな変更点は v13 で IE サポート廃止になったことではないでしょうか。 引き続き IE をサポートする必要のあるアプリケーションはしばらく v12.x で動かす必要があります。
一方で IE のサポートをやめることで differential loading の機能もカットできたためビルドなどが改善されています。
また Chrome などのブラウザに関してもサポートバージョンが更新されているので詳細はドキュメントを見るとよいです。
Ivy Everywhere
v9 で登場したレンダリングエンジン Ivy がアプリケーションで opt-out できなくなり、すべてのアプリケーションが Ivy で動くようになりました。 ライブラリも default Ivy になっており、脱 View Engine が進んでいます。
ビルド時の ngcc が長くて悩んでいるので、すべてのライブラリが Ivy 対応するのが待ち遠しいです。
Production by Default
v12 で新規で作ったアプリケーションはデフォルトで production build になります。
過去バージョンから update をした人は migration する必要があります。
これに伴い build コマンドの --prod オプションも非推奨になります。
builder options のデフォルト値も変更になっているので、過去バージョンから update した人は angular.json を見直すいい機会かもしれません。
これから v12 にあげる方は下記も参考にしてみてください。 kasaharu.hatenablog.com
style & script
CSS や JS が esbuild や terser を使った最適化によりビルド改善がされています。
また v11.1 で Tailwind CSS に対応するようになりました。これはコミュニティーの声を受けての改善のようです。
Specify custom PostCSS plugins · Issue #8427 · angular/angular-cli · GitHub
他にもインラインスタイルでも SCSS などが記述できるようになった一方で Stylus のサポートが非推奨になったりしています。
ビルドキャッシュ
v12 でオプションで入ったビルドキャッシュが v13 でデフォルトになりました。
設定が有効だった場合、一度目のビルド時にキャッシュができるので以降のビルドが早くなります。 Tour of Heroes くらいのアプリケーションでも効果は目に見えてわかるので、ぜひお手元でも確認してみてください。
Protractor と TSLint の非推奨
長年 Angular CLI に組み込まれていた E2E テストライブラリの Protractor の builder が非推奨になり TSLint の builder が削除されました。
angular-cli/README.md at 13.0.0 · angular/angular-cli · GitHub
これからは E2E テストや Linter などは自分で整備していく必要があります。
Angular v13 で新しく環境を作っていく方は昨日の puku0x さんの記事 Angular v13 の開発環境構築 - Qiita が参考になるかもしれません。
テスト
これまで、各テストケース実行時の後処理ができていなかった(生成した DOM を破棄できてきていなかった)ために様々な問題がありました。 特に Karma を使ったテストに影響があったようです。
v12.1 で teardown オプションが追加され、これらの問題が解決できるようになりました。
これについては Improving Angular tests by enabling Angular testing module teardown - DEV Community も参考になります。
その他
エラーメッセージのフォーマットに下記のようなルールができました。
Angular Debugging Guides. The best part of coding is when… | by Emma Twersky | Angular Blog
さらに各エラーの説明やデバッグ方法などが載ったドキュメントも作成されています。
また、Angular 専用の公式 DevTools も登場しました。
どんどん開発者フレンドリーになっているのを感じます。
まとめ
11.1.0 から 13.0.0 までの個人的に記憶に残った変更点をまとめてみました。
他にもテンプレート構文の強化や Forms / Router の改善などたくさんありましたが、ここでは割愛します。 気になる方は ng-japan OnAir - Youtube を見てみると新発見があるかもしれません。
それでは。
