Angular 8が登場しました。これにより、ワークフローとパフォーマンスが大幅に向上します。 以前のいくつかのリリースで行ったように、Angular 8の新機能と、Angular7アプリをAngularにアップグレードする方法を見ていきましょう。 8.8。
Angular8リリースのハイライト
Angular 8の明らかな新機能の数は限られていると思いますが、実際にはまだいくつかの利点があります。
差動負荷
差分読み込みのおかげで、Angular8アプリのパフォーマンスが自動的に向上します。
差分ロードでは、本番環境向けにビルドするときに2つのバンドルが作成されます。ES2015+をサポートする最新のブラウザー用のバンドルと、ES5バージョンのJavaScriptのみをサポートする古いブラウザー用のバンドルです。 新しいブラウザでES6モジュールがサポートされているため、正しいバンドルがブラウザによって自動的に読み込まれます。
この新機能により、Angularv8の単一のパフォーマンスが最大に向上します。 新しいブラウザでは、ロードするコードが少なくなり、ロードするポリフィルの量がはるかに少なくなります。
差分ロードのメリットを享受するために特別なことをする必要はありません。--prodフラグを指定したng buildコマンドは、すべてをバンドルして、差分ロードがすぐに機能するようにします。
$ ng build --prod
遅延ルートの動的インポート
遅延読み込みルートは、カスタム文字列の代わりに標準の動的インポート構文を使用するようになりました。 これは、TypeScriptとlintersが、モジュールが欠落している場合やスペルが間違っている場合に、より適切に文句を言うことができることを意味します。
したがって、遅延ロードされたインポートは次のようになります。
{ path: '/cart', loadChildren: './cart/cart.module#CartModule' }
次のようになります。
{ path: `/cart`, loadChildren: () => import(`./cart/cart.module`).then(m => m.CartModule) }
ng upgradeコマンドを使用してアプリをアップグレードしている場合は、構文の変更が自動的に処理されます。
CLIワークフローの改善
CLIは継続的に改善されており、ng build、ng test、ng runは、サードパーティのライブラリとツールによって拡張できるようになっています。 たとえば、AngularFireはすでにdeployコマンドでこれらの新機能を利用しています。
アイビーとバゼルはどうですか？
新しいレンダリングエンジンであるIvyと新しいビルドシステムであるBazelがAngularで正式に使用できるようになるまで、もう少し待つ必要があります。 2つのオプトインプレビューがまもなく利用可能になるはずです。
Angular7からAngular8へのアップグレード
以前のいくつかのリリースの場合と同様に、アプリをAngular7からAngular8にアップグレードするのは簡単です。 これは、新しいHttpClientとRxJS6の使用に既に移行している場合に特に当てはまります。
最も単純なケースでは、Angular8にアップグレードするために実行するコマンドは1つだけです。
$ ng update @angular/cli @angular/core
このコマンドを使用すると、遅延ロードされたルートインポートが新しいインポート構文に自動的に移行されます。
アップグレードプロセスについて覚えておくべきいくつかのこと：
- いくつかの新しい構文エラーが発生する可能性があります。 これは、AngularがTypeScript 3.4を使用しているためです。これにより、以前は強調されていなかったいくつかの問題が発生する可能性があります。
- Node.jsバージョン12以降を使用していることを確認する必要があります。
$ node -vを実行すると、使用しているノードのバージョンを確認できます。 また、最新バージョンを入手する必要がある場合は、Nodeの公式ダウンロードページにアクセスしてください。
AngularMaterialのアップグレード
アプリでAngularMaterialを使用している場合は、次のコマンドを実行する必要があります。
$ ng update @angular/material
このコマンドは、グローバル@angular/materialからインポートするのではなく、AngularMaterialコンポーネントのインポートを特定の各コンポーネントに変更することもできます。
Angular 7とは異なるバージョンからアップグレードしようとしている場合は、公式のAngularアップグレードガイドを使用して続行する方法を説明できます。
詳細はこちら
- Angular8はTypeScript3.4に依存するようになりました。 リリースのハイライトをチェックして、この新しいバージョンのTypeScriptで何が変更されたかを確認してください。
- アプリでAngularMaterialを使用している場合は、v8のリリースノートを一瞥することをお勧めします。
- AngularチームのStephenFluin は、Angular8の新機能を示すシリーズのビデオをまとめました。
