Angular v8がリリースされました!バンドルサイズ削減され、新レンダリングエンジンIvyのプレビュー版が利用可能に!

2019.06.04

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

どうも!大阪オフィスの西村祐二です。

ちょっと日にちが過ぎましたが、5/29にAngular v8がリリースされました!

今回はそのアップデート内容をまとめてみます。

主に下記のサイトをもとにまとめていますので、詳細がきになる方はリンク先をご確認ください。

https://blog.angular.io/version-8-of-angular-smaller-bundles-cli-apis-and-alignment-with-the-ecosystem-af0261112a27

https://blog.ninja-squad.com/2019/05/29/what-is-new-angular-8.0/

Angularのバージョンアップサイクル

「もう、バージョン8!?」

って思った方いるかと思いますが、Angularのバージョンアップサイクルは約6ヶ月ごとのメジャーリリースを行うサイクルとなっております。

ちなみにバージョン7がリリースされましたのは2018年10月19日でした。

バージョン9は2019年10,11月頃の予定となっています。

サポート期間がいつまでなのか、次にどんな機能が載ってくるのかある程度予想できるので、プロダクトのバージョンアップスケジュールなど立てやすいかと思います。

詳細は下記を参照ください。

https://angular.io/guide/releases

バージョンを上げるには

Angularのドキュメントにバージョンを上げるためにどのようなステップを踏めばよいか教えてくれるサポートページがありますので、こちらより今のバージョンを選択して、アップデート手順を確認してください。

https://update.angular.io/

変更点

新レンダリングエンジン「Ivy」がオプトイン機能として搭載されました!

今回のバージョンの目玉機能はこれかと思います。

Ivyは何かというと新しく開発された高速なレンダリングエンジンで高速化やバンドルサイズの削減などが期待されます。

プレビュー版ですが、Ivyコンパイラがオプトイン機能として搭載されました!(v9で安定版としてリリースされるみたいです)

使い方としては、新規プロジェクトを作成する際にオプションをつけることで、Ivyを有効にできます。

$ ng new shiny-ivy-app --enable-ivy

既存プロジェクトでも、設定ファイルに追記するだけで、Ivyに切り替えることができます。

tsconfig.app.json

{
  "compilerOptions": { ... },
  "angularCompilerOptions": {
    "enableIvy": true
  }
}

https://angular.io/guide/ivy

https://blog.ninja-squad.com/2019/05/07/what-is-angular-ivy/

Differential Loadingが利用可能になりました!

こちらも目玉機能のひとつです!

これは最新のビルドとレガシービルドを実行し、アプリケーションを読み込む際に必要なバンドルだけが自動的に読み込まれバンドルサイズが削減されるという機能になります。

これにより、バンドルサイズが7-20%削減されるようです。

ちなみに、ng updateでバージョンアップすると、自動的にtsconfig.jsontargetを更新してくれます。

詳細は下記を参照ください。

https://angular.io/guide/deployment#differential-loading

Routerの設定にDynamic Importを使用できるようになりました

あるパスにルーティングしたときモジュールをLazyLoadする際に下記のような書き方をしていましたが、

{path: '/admin', loadChildren: './admin/admin.module#AdminModule'}

Dynamic Importの形で設定できるようになりました。これによって、VSCodeやWebStormなどのエディタでモジュールを認識できるようになるようです。

{path: `/admin`, loadChildren: () => import(`./admin/admin.module`).then(m => m.AdminModule)}

ちなみに、ng updateを使ってアップデートした場合は、新しいベストプラクティスを使用するようにコードが自動的に更新されます。便利!

試験的にBazelでビルドする機能が搭載されました!

この機能はAngular Labs(実験的なプロジェクト)の一部ですのでご注意ください。

Bazelを使うことによって、アプリケーションのビルドを高速化できるメリットがあります。

詳細は下記を参照ください。

https://angular.io/guide/bazel

Angular CLIの情報をGoogleに提供する機能が追加されました

Angular には強力なCLIが提供されています。

そのCLIのデータをGoogleに提供する機能が追加されました。

CLIのデータ収集はデフォルトでは無効になっており、個々のユーザーがプロジェクトレベルで有効にする必要があります。

リリース直後は下記のようにインストールするときに情報提供するかきかれる、という報告があったのですが、デフォルト無効化として修正されてみたいです。

$ npm install @angular/cli

集めたデータはAngularチームと共有され、CLIを改善するために使用されます。

詳細は下記を参照ください。

https://angular.io/cli/usage-analytics-gathering

@ViewChild/@ComponentChild 第二引数が必須となりました

今まで、オプションとなっていたのが、必須なパラメータとなりました。

@xxChildは、ngOnInitで有効になり場合と、ngAfterViewInit/ngAfterContentIntで有効になる場合があり、その制御を明示的に指定することが必要となりました。

こちらも、ng updateでバージョンアップすると自動的に追記してくれます。最強

Angular CLIでWeb Workerを作成し、既存プロジェクトに追加できるようになりました

Web Workerを使用すると、画像やビデオの操作などの作業をバックグラウンドスレッドに任せることができます。

下記コマンドで、プロジェクトにWeb Workerを追加できるようになりました。

$ ng generate webWorker my-worker

詳細は下記を参照ください。

https://angular.io/guide/web-worker

AngularJSからの移行がやりやすく改善されました

AngularJSアプリケーションで$locationサービスを使用している場合、LocationUpgradeModuleを利用して、できるだけ多くの責任をAngularに移行できるようになりました。

詳細は下記リンクを参照ください。

https://angular.io/guide/upgrade#using-the-unified-angular-location-service

また、AngularJSアプリケーションの一部をAngularから遅延ロードすることに関するベストプラクティスがドキュメント化されました。

ドキュメントはこちら

https://v8.angular.io/guide/upgrade#create-a-service-to-lazy-load-angularjs

platform-webworkerが非推奨APIになりました

platform-webworkerはWebアプリケーション全体をWebワーカーで実行する機能として実験的にAngular v2で導入されました。

非推奨となった理由としては、全体ではなく、メモリ内検索や画像処理など重要度の低い作業をオフロードするというユースケースにフォーカスする方針となったためとのことです。

詳細は下記リンクを参照ください。

https://angular.io/guide/deprecations#webworker-apps

@angular/httpが削除されました

以前からアナウンスされていた、@angular/httpが削除されました。

これからは、@angular/common/httpを利用しましょう。

詳細は下記を参照ください。

https://angular.io/guide/deprecations#removed-apis

さいごに

Angular v8のアップデート内容をまとめてみました。

内部的なアップデートがメインだったので、分かりづらいかもしれませんが、確実に進化している内容のアップデートだと感じました。

v9ではIvy,Bazelの安定版リリースが予定されているので、今後のアップデートも楽しみです!

v8に関する話は下記の勉強会でも話がありました。Angularの今後の動向など含めて、さらに知りたい場合はこちらもご参考ください。

【レポート】 ng-kyoto、ng-japan meetup 2019 Spring合同開催!Angular好きが集まる勉強会に参加してきました! #ng_jp #ng_kyoto