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

提供:Dev Guides
移動先:案内検索

Angular 7 がリリースされたばかりで、新機能については少し軽視されていますが、非常に興味深い新ツールの変更と、パフォーマンスを向上させるための優れた機能がいくつかあります。 そして、以前のバージョンからの最近の傾向を継続して、アップグレードは簡単です(そして実際にはこれまで以上に高速です)。

追加と新機能

以下のリストは、このリリースの新機能の簡単な要約ですが、さらに読むセクションに進んで、このリリースが提供するさらに多くの機能を確認してください。

CLIプロンプト

Angularチームは、開発者が利用できるツールの改善に一貫して注力しており、新しいCLIプロンプトも例外ではありません。 通常、ng newng addなどのコマンドを実行する場合、それはシングルパスです。 ルーティングを含めるのを忘れましたか? ああ、大変な休憩。 インストールをスキップしたいですか? さて、コマンドを終了できると思います。

新しいCLIではありません。 これで、CLIはプロンプトで応答します。 ng new myangular7appを試してみて、何が得られますか? ルーティングを追加するかどうかを尋ねるまったく新しいプロンプト。 別のスタイルシート形式を試してみませんか? 心配しないで。 CLIでは、CSSSCSSSASSなど(または実際にはLESS HA!)から選択できます。 そして素晴らしいニュース、それはカスタマイズ可能です! SchematicCLIを使用してschematic.jsonを追加すると、実行を促すプロンプトをAngularCLIに指示できます。 回路図面の詳細については、参考資料セクションをご覧ください。

Angular Material CDK

ScrollingModule

多くのモバイルフレームワークが画像や長いリストなどのデータを動的にロードする方向に動き始めているため、Angularはそれに続いてScrollingModuleを追加して仮想スクロールを可能にしました。 要素が可視性を獲得または喪失すると、それらはDOMから仮想的にロードおよびアンロードされます。 ユーザーの目にはパフォーマンスが大幅に向上します。 次回、ユーザーがスクロールできる可能性のあるアイテムのリストが大量にある場合は、それをcdk-virtual-scroll-viewportコンポーネントに貼り付けて、パフォーマンスの向上を活用してください。

DragDropModule

これで、完全にAngular Materialモジュール内にとどまり、リストの並べ替えやリスト間でのアイテムの転送など、ドラッグアンドドロップのサポートを実装できます。 CDKには、自動レンダリング、ドラッグハンドラー、ドロップハンドラー、さらにはデータを転送する機能が含まれています。 標準のドラッグアニメーションが気に入らないですか? 汗かいていない。 それはAngularです。 オーバーライドするのはあなた次第です。



Angular Material自体に関しては、バージョン7 には、新しいマテリアルデザイン仕様に準拠するようにいくつかの更新されたコンポーネントスタイルが付属しています。

アプリケーションのパフォーマンス

まず最初に:Angular7は以前のバージョンよりもさらに高速です。 アップグレードが高速で(公式発表によると、多くのアプリで10分未満)、フレームワークが高速で、上記の仮想スクロールCDKモジュールにより、アプリのパフォーマンスが向上します。

ここで興味深い点があります。Angularは、フレームワークを可能な限り小さくすることに専念しているだけでなく、アプリを可能な限り小さくすることに専念しています。 彼らは、reflect-metadataポリフィルが本番環境に含まれているという一般的な本番環境の間違いを修正しました。 V7は自動的にそれを削除します。

新しいプロジェクトも予算バンドルを使用してデフォルト設定されるようになりました。これは、アプリがサイズ制限に達したときに通知するように機能します。 デフォルトでは、2MBに達すると警告が表示され、5MBでエラーが発生します。 さらにスペースが必要な場合は、 angle.json にジャンプして、必要に応じて調整してください。

"budgets": [{
  "type": "initial",
  "maximumWarning": "2mb",
  "maximumError": "5mb"
}]

更新された依存関係

AngularはTypescript3.1まで、RxJSは6.3まで、Node10のサポートが追加されました。 のリリースノートを確認してください(さらに読むの以下のリンク)。

アイビーレンダラー

次世代のすぐに使えるレンダラー…まだまだ準備ができていません。 Angularチームは最終的なタイムラインを確約しませんが、開発はまだ活発で進行中です。 彼らは、下位互換性の検証が始まっていることを指摘し、公式のチームメンバーはコメントしていませんが、コミットの熱心なフォロワーの中には、バージョン8と一緒に公式リリースの可能性があるV7の存続期間中に完全なベータ版がリリースされることを期待しています。 公式のAngularリポジトリの下にあるGitHubIvyRendererの問題の進捗状況を自分でフォローしてください。 最高のニュースは? 彼らは、Ivyが完全にテストおよび検証されている限り、マイナーリリースでリリースできることを完全に期待しています。 それで、誰が知っていますか? 結局、v7で表示されるかもしれません。

アップグレード

これはもっと簡単でしょうか?

そこにあるAngularアプリの大部分では、すでに Angular 6とRxJS6を実行していると仮定すると、次の1つのコマンドを実行するだけで済みます。

$ ng update @angular/cli @angular/core

また、 Angular Material を使用している場合は、次のコマンドに従ってください。

$ ng update @angular/material

少し問題があると思われる場合は、アップデートガイドにアクセスして、特別なコマンドが必要かどうかを確認してください。

参考文献

以下のAngular7リソースをさらにチェックしてください。