水無瀬のプログラミング日記

プログラムの勉強した時のメモ

Angular8アップデート内容ざっくりまとめ

Angular

はじめに

今日、Angular8がリリースされたらしい。 Mediumも更新されていたので、さっくりまとめる。

原文

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

アップデート方法

直近のアップデートを入れている人は、ng update @angular/cli @angular/coreでOK。
(多分Angular6くらい？)
それ以外の人はupdate.angular.ioでアップデート方法を確認できる。

Differential Loading By Default

Differential Loadingというブラウザが自身の性能に合わせて、モダンかレガシーなJavaScriptを選ぶプロセスがある。
Angularのビルドはデフォルトでモダン向けのビルド(es2015)とレガシー向けのビルド(es5)を行ってくれるようになった。
ユーザがAngular8のアプリケーションを読み込んだ時、自動で必要なファイルを取得してくれる。

ng updateでAngular8にバージョンアップするとtsconfig.jsonをDifferential Loadingに対応するよう勝手にアップデートしてくれる。
CLIはtsconfig.jsonのtargetを見てDifferential Loadingが必要か判断してくれる。
targetにes2015を設定するとモダンとレガシー、2つのバンドルを生成してくれる。
実行時にScriptタグを見て、正しい方を読み込んでくれる。

<script type="module" src="…"> // Modern JS
    
<script nomodule src="…"> // Legacy JS

angular.ioではこれでモダンブラザ向けに40KBほど初期バンドルサイズを削減できたらしい。7〜20%くらいの割合に当たるとのこと。
Differential Loadingについて詳しくしりたい場合はこちらから。

Route Configurations use Dynamic Imports

モジュールの遅延ロードをするとき、今まではAngular独自の書き方であったが、一般的なDynamic Importの形に変わった。 ちなみにこれでVSCodeとかのサポートを受けられるらしい。
これもng updateすると勝手にアップデートしてくれる。

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

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

Builder APIs in the CLI

ng new, ng generate, ng add, ng updateのようなBuilderAPIが増えた。
こことかここを確認すると良さそう。
最新版のAngular Fireを使えばngコマンドでFirebaseにデプロイできる。

$ ng add @angular/fire
$ ng run my-app:deploy

Workspace APIs in the CLI

今まではworkspace configurationを変更するために、直接angular.jsonを変更する必要があった。
8からはAPIが用意されたらしい。詳しくはこちらから。
リンクも読んだんだけど、そもそもWorkspaceが何のことかわからなかったので、なんの恩恵があるかわからなかった。
悲しいから今度調べてみる。

Web Worker Support

WebWorkerをCLIから作れるようになった。
プロジェクトに追加するには、ng generate webWorker my-workerでOK。
一度追加してしまえば、CLIがよしなにバンドルしてくれるし分割してくれる。
詳しくからこちらから。

const worker = new Worker(`./my-worker.worker`, { type: `module` });

AngularJS Migration Improvements

AngularJSの$location serviceを使う場合、LocationUpgradeModuleを提供するようになったらしい。
これにより、AngularのLocationにシフトしてくれるらしい。
AngularJSを知らないのでなんとも言えないけど、AngularからAngularJSのアプリケーションをロードできるっぽい。
詳しくはこことかここを参照すると良い。

New Deprecation Guide

廃止予定の機能も廃止予定バージョンから2バージョン後までサポートしてくれるらしい。 Angular8でplatform-webworkerが非推奨になり8.1で廃止されるが、Angular9,10でも機能してくれるとのこと。 非推奨機能の一覧と削除予定はこちらから。

Ivy & Bazel

今回入るって言われてた気がするけど、入らなかったらしい。
続報についてはブログ(原文のMedium)で出されるとのこと。
入らなかったのはとても残念。

勘違いで一応入っているっぽい？
オプトインとのこと。
続報がブログであることは変わらなそう。

まとめ

ざっくりアップデート内容を和訳してまとめてみた。
5,6,7では正直クリティカルなアップデートはなかった気もしてる。
ただ、今回はDifferential LoadingとかWebWokerとかBuilder APIとか入れといた方が良さそうなものが多い印象。
今後もアップデートは続くだろうし積極的に追ってきたいところ。
とりあえず手元のアプリをアップデートするところから始めます。
それでは今回はこの辺で。