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 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

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

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

詳細はこちら

  • Angular8はTypeScript3.4に依存するようになりました。 リリースのハイライトをチェックして、この新しいバージョンのTypeScriptで何が変更されたかを確認してください。
  • アプリでAngularMaterialを使用している場合は、v8のリリースノートを一瞥することをお勧めします。
  • AngularチームのStephenFluin は、Angular8の新機能を示すシリーズのビデオをまとめました。