開発者ドキュメント

Angular8:アップグレードと新機能の概要

Angular 8が登場しました。これにより、ワークフローとパフォーマンスが大幅に向上します。 以前のいくつかのリリースで行ったように、Angular 8の新機能と、Angular7アプリをAngularにアップグレードする方法を見ていきましょう。 8.8。

Angular8リリースのハイライト

Angular 8の明らかな新機能の数は限られていると思いますが、実際にはまだいくつかの利点があります。

差動負荷

差分読み込みのおかげで、Angular8アプリのパフォーマンスが自動的に向上します。

差分ロードでは、本番環境向けにビルドするときに2つのバンドルが作成されます。ES2015+をサポートする最新のブラウザー用のバンドルと、ES5バージョンのJavaScriptのみをサポートする古いブラウザー用のバンドルです。 新しいブラウザES6モジュールがサポートされているため、正しいバンドルがブラウザによって自動的に読み込まれます。

この新機能により、Angularv8の単一のパフォーマンスが最大に向上します。 新しいブラウザでは、ロードするコードが少なくなり、ロードするポリフィルの量がはるかに少なくなります。

差動荷重の恩恵を受けるために特別なことをする必要はありません。 ng build とのコマンド --prod フラグはすべてをバンドルする処理を行い、差動負荷が箱から出して機能するようにします。

$ 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 testng run サードパーティのライブラリとツールによって拡張できるように装備されています。 たとえば、AngularFireはすでにこれらの新機能を利用しています。 deploy 指図。

アイビーとバゼルはどうですか?

新しいレンダリングエンジンであるIvyと新しいビルドシステムであるBazelがAngularで正式に使用できるようになるまで、もう少し待つ必要があります。 2つのオプトインプレビューがまもなく利用可能になるはずです。

Angular7からAngular8へのアップグレード

以前のいくつかのリリースの場合と同様に、アプリをAngular7からAngular8にアップグレードするのは簡単です。 これは、新しいHttpClientRxJS6の使用に既に移行している場合に特に当てはまります。

最も単純なケースでは、Angular8にアップグレードするために実行するコマンドは1つだけです。

$ ng update @angular/cli @angular/core

このコマンドを使用すると、遅延ロードされたルートインポートが新しいインポート構文に自動的に移行されます。

アップグレードプロセスについて覚えておくべきいくつかのこと:

AngularMaterialのアップグレード

アプリでAngularMaterialを使用している場合は、次のコマンドを実行する必要があります。

$ ng update @angular/material

このコマンドは、グローバルからインポートするのではなく、AngularMaterialコンポーネントのインポートを特定の各コンポーネントに変更することもできます。 @angular/material.

Angular 7とは異なるバージョンからアップグレードしようとしている場合は、公式のAngularアップグレードガイドを使用して続行する方法を説明できます。

詳細はこちら

モバイルバージョンを終了