Angular 11 –知っておくべきことすべて

公開: 2021-03-31

Angularバージョン11がここにあり、開発者にいくつかの素晴らしいアップデートをもたらしました。 フレームワークからコンポーネントおよびCLIまで–すべてが更新されます。 Angularチームは、更新のたびにいくつかの大きな変更を加えようとします。 たとえば、iVYはAngular 9でリリースされ、Typescript3.8のサポートはAngular9.1で提供され、AngularMaterialUIコンポーネントライブラリの変更はAngular10で発表されました。今日はAngular11の機能について説明します。それから。

Angular 11 –機能とアップデート

このバージョンのハイライトは、より厳密なタイプ、フォントの自動インライン化、およびルーターのパフォーマンスの向上です。 更新されたアプリでは、デフォルトの自動フォントインライン化が有効になります。 ルーターのパフォーマンスが向上することで、アプリケーションがより高速になります。 これらとは別に、Angular11には以下にリストするものがあります。

#Componentテストハーネス

Angularバージョン9では、コミュニティはコンポーネントテストハーネスを導入しました。 これらは、AngularMaterialコンポーネントのテストを支援する堅牢なAPIサーフェスを提供しました。 これにより、開発者はサポートされているAPIを使用してコンポーネントを操作できます。

バージョン11では、コンポーネントハーネスを各コンポーネントで使用できます。 多くのパフォーマンスの改善、更新、さらには新しいAPIが付属しています。 現在、並列機能により、開発者はコンポーネントとの複数の非同期相互作用を並列に実行できるため、テスト内の非同期アクションを簡単に処理できます。 たとえば、手動の変更検出機能を使用すると、単体テスト内で自動変更検出を無効にするだけで、検出をより適切に制御できます。

＃ホットモジュール交換サポートを更新

ホットモジュール交換またはHMRは、ブラウザ全体を更新せずにモジュールを交換できるメカニズムです。 これは古い概念ですが、Angular11はそれにさらに追加します。

Angular 11は、必要なコード変更と構成を備えたHMRのサポートを提供します。 これにより、CLIはngserveでアプリを開始するときにHMRを有効にできます。 開始するには、次のコマンドが必要です。

 ngサーブ–hmr

したがって、CLIコマンドは、HMRの構成に必要な労力を大幅に削減します。 開発者がこのコマンドを挿入すると、ローカルサーバーがHMRがアクティブであることを確認するとすぐに、コンソールにメッセージが表示されます。

開発中に、テンプレート、スタイル、およびコンポーネントへの最新の変更は、実行中のアプリケーションに自動的に更新されます。 ページ全体を更新する必要がないため、開発者の生産性が向上します。

＃更新された言語サービスプレビュー

Angular Language Serviceは、あらゆるWebサイト開発会社の専門家によると、手間のかからないWeb開発を保証するさまざまな便利なツールを提供します。 更新された言語サービスは、開発者により正確なエクスペリエンスを提供します。 彼らは、より良いレンダラーとビューエンジンで物事がどのように機能するかのプレビューを確認できます。 言語サービスは、TypeScriptコンパイラと同じように、テンプレート内のジェネリック型を適切に推測できるようになります。

＃フォントの自動インライン化

Angular 11は、GoogleのアイコンとフォントをインデックスHTMLでインラインに変換するのに役立つ自動フォントインライン化を提供します。 コンパイル中に、Angular CLIはダウンロードし、その結果、アプリケーションでリンクおよび使用されるインラインフォントを埋め込みます。 これらは、構成に対してデフォルトで有効になっています。

これは、バージョン11で構築されたアプリケーションではデフォルトになっています。したがって、この最適化の利点を活用するには、開発者は最初にアプリを更新する必要があります。

#Webpack5サポート

Webpackは、多数のファイルを1つの小さなファイルまたはバンドルにコンパイルするために使用されます。 最新バージョン–Webpack5は数か月前にリリースされました。

Angular11はwebpack5の実験的なサポートを提供し、開発者はそれを使用して新しいことを試すことができます。 Angularチームは、Webpackがより安定すると、実験的なサポートを拡張して、より小さなバンドルとより高速なビルドを実現できます。

webpack5を使用するためのコマンドは次のとおりです。package.jsonファイルに次の行を追加します。

「解像度」：{
 「webpack」：「5.4.0」
 }

#ESLintにシフト

TSLintは、Angular開発サービスのプロバイダーによって使用および推奨されている最も人気のあるリストツールの1つです。 最近、義務はESLintに引き継がれています。

Angular 11では、CodelyzerとTSLintは正式に非推奨になり、将来のバージョンで削除される予定です。 最新バージョンでは、TSLintからESLintに移行するための3ステップの方法が導入されています。

ステップ1– ng add @ angular-eslint/schematicsを実行します
ステップ2–ここで、コマンドng g @ angular / schematics：convert-tslint-to-eslint{{プロジェクト名}}を実行します。
ステップ3–ルートレベルのtslint.jsonを削除します。

#Fasterビルド

Angular 11は、大幅な速度の向上をもたらします。 NGCC更新のプロセスは、以前より2〜4倍高速になりました。 したがって、開発者はビルドと再構築の完了を待つのに長い時間を費やす必要はありません。

#TypeScript4.0のサポート

Angular11はTypeScript4.0をサポートしています。 TypeScript3.9のサポートは終了しました。 この背後にある主な理由の1つは、ビルドの速度を向上させることです。 最新バージョンでは、以前のバージョンよりも高速でスムーズなビルドが保証されます。

＃より良いログとレポート

最新のAngularバージョンでは、ビルダーフェーズレポートにさまざまな変更が加えられ、開発中により役立つようになりました。 CLI出力には、よりユーザーフレンドリーで読みやすい情報が含まれています。

＃その他の変更

上記のものとは別に、最新のAngularバージョンには次のようないくつかの変更が加えられています。

  • サービスワーカーの改善
  • 新しい自動化された回路図と移行
  • さまざまな名前付きアウトレットの遅延読み込みのサポート
  • InternetExplorer9,10およびIEモバイルサポートのサポートは完全に削除されました
  • ルーターでpreserveQueryParamsが削除されました。 代わりに、開発者はqueryParamsHandling =” preserve”を使用できます。
  • より厳密なタイプがパイプに組み込まれるようになりました
  • AngularCLIは解決ガードを生成できます
  • formatDate関数は、ISO8601の週番号と年のフォーマットをサポートします
  • ICU内の式が再度タイプチェックされるようになりました
  • 非同期パイプは、undefinedとして入力された入力に対してundefinedを返さなくなりました。

Angular11にアップデートする方法

Angular開発者を雇って、アプリケーションをAngular 11に更新できます。開発者は、次のコマンドを実行する必要があります。

ng update @ angular / cli @ angular / core

記事は役に立ちましたか？ 知人と共有し、Angular11についてすべて知らせてください。