Angular 10 –それについて知っておくべきこと

公開: 2020-10-07

Angularは最近、2020年6月24日に新しいバージョンをリリースしました。Angularのバージョン9.0をリリースしてから4か月後にのみ公開されました。 最新のAngular10はベータ版です。つまり、Angularチームは、このGoogleが開発したタイプスクリプト指向のフレームワークの最新バージョンの最終リリースに近づいています。

あなたがウェブ開発者またはあなたのビジネスのためのウェブアプリを開発しようとしている誰かであるならば、あなたはこの新しいバージョンが何を提供しなければならないかを知らなければなりません。 ベータ版は最後のバージョンをリリースしてから4か月以内に公開されるため、ヒットかミスか疑問に思われるかもしれません。 私たちはあなたが答えを見つけるのを助けるためにここにいます。 Angular10の主な機能を詳しく見てみましょう。

Angular10の機能

Angularチームは、最新バージョンは多数の新機能を導入するのではなく、主に品質ツールとエコシステムに焦点を当てると主張していますが、広範な調査を実施し、バージョンから期待できる価値提供の包括的なリストを提供しました。 それではチェックしてみましょう。

  • 新しい日付範囲ピッカー

Angular Material UIコンポーネントライブラリに、新しい日付範囲ピッカーが装備されました。 それが何であるかわからない？ 日付範囲ピッカーをWebページに添付できます。 時間、日付、または「過去20日」などの事前定義された期間を選択するためのカレンダーがポップアップ表示されます。

ユーザーが単一の日付ではなく日付の範囲を選択できるようにする場合は、mat-date-range-pickerおよびmat-date-range-inputコンポーネントを使用できます。

  • オプションのより厳密な設定

Angular 10では、ng newを使用して新しいワークスペースを作成する際に、より厳密なプロジェクト設定が行われます。 このフラグを有効にすると、保守性の向上、CLIによるアプリケーションの高度な最適化の実行、バグの事前発見など、プロジェクトにいくつかの新しい設定が導入されます。

strictフラグの基本的な作業範囲は次のとおりです。

-テンプレートタイプチェックをStrictに変更
-TypeScriptでより厳密な機能を有効にする
-型宣言として「any」が使用されないようにリンティングルールを構成する
-デフォルトのバンドル予算の削減

  • CommonJSインポートに関する警告

CommonJSにパックされた依存関係を使用すると、バンドルが大きくなり、アプリケーションの速度が低下します。 Angular 10は、ビルドがそのようなバンドルの1つを取り込むと、開発者に警告します。 そうすることで、依存関係にECM​​AScriptモジュール（ESM）バンドルを好むことを知らせることができます。

  • 更新

JavaScriptエコシステムと同期するために、Angularの依存関係にいくつかの主要な更新が加えられました。 これらは次のとおりです。

-TypeScriptがTypeScript3.9に更新されました。 これは、チームがパフォーマンスと安定性の向上に取り組むのに役立ちます。
-TSLintがv6に更新されました
-TSLibがv2.0に更新されました

プロジェクトのレイアウトも更新されました。 したがって、Angular 10で新しいtsconfig.base.jsonファイルを確認できます。このファイルは、IDE、ビルドツールの解決タイプ、およびパッケージ構成をより適切にサポートします。

これら以外に、最新のAngularバージョンは、コンパイラーの高速化、エクスペリエンスの編集、迅速な修正、完了などを可能にします。

  • 改善されたngccパフォーマンス

このAngular10機能は、プログラムベースのエントリポイントファインダーの実装を促進します。 これにより、tsconfig.jsonファイルで定義されたプログラムのみが到達できるエントリポイントを処理できます。 さらに、依存関係はエントリポイントの展示内に隠されており、毎回計算せずに読み取ることができます。

各パッケージのベースパスとエントリポイントをファイルに保存する必要はありません。 したがって、アプリケーションは不要な空の配列を格納する必要はありません。 この機能は、大規模なノードモジュールの場合でも、エントリポイントでファイルサイズを明示して削減するのに役立ちます。 これにより、パフォーマンスが大幅に向上します。

  • 複数のファイルのマージ

最新のAngularバージョンは、面倒なことなく複数の翻訳ドキュメントのマージをサポートしています。 以前のバージョンでは、これらは1つのファイルしかロードできませんでした。 ユーザーはロケールごとに複数のドキュメントを指定できるようになり、すべてのファイルからのトランザクションをメッセージングIDでマージできるようになりました。 最も重要なドキュメントが最初に配置され、後でフォールバック翻訳が行われます。

  • 非同期ロックタイムアウト

Angular 10のもう1つの興味深い点は、このバージョンで非同期ロックタイムアウトが構成されていることです。 これは、AsyncLockerでの再試行遅延と再試行の試行を調整するためにngcc.config.jsファイルをサポートします。 統合テストにより、開発者はタイムアウトを監視し、ngcc.config.jsファイルを使用してタイムアウト期間を短縮し、テストに時間がかかるのを防ぐことができます。 Webアプリケーション開発会社の専門家が最新のAngularバージョンを大いに安心して歓迎しているのも不思議ではありません。

  • ルーター

CanLoadガードは、最新のAngularバージョンでUrlTreeに戻ることができます。 UrlTreeを返すCanLoadガードは、最先端のナビゲーションを無効にし、リダイレクトを支援します。 これは、現在の動作を利用可能なCanActivateガードと一致させます。これらもここに追加されます。 ただし、これはプリロードに影響を与えません。

  • コンパイル

Ahead-of-Time（AOT）は、ビルド時にアプリとそのライブラリをコンパイルします。 これはAngular9以降の一般的な方法です。ブラウザーがコードをダウンロードして実行する前であっても、ビルド時にコードを変換できます。 当然、これによりブラウザでのレンダリングが高速になります。 コンパイラーは、アプリケーションJavaScript内に外部HTMLテンプレートとCSSスタイルシートをインライン化することにより、ソースファイルに対する個別のAJAX要求を排除します。

Angular10のAOTには明らかな変更がいくつかあります。

1.インクリメンタルコンパイルは、より良いビルド時間に到達するのに役立ちます
2.ツリーシェイクとの互換性が高い生成されたコードを使用すると、より良いビルドサイズに到達できます
3.このバージョンでは、モジュールの代わりにコンポーネントの遅延読み込み、メタプログラミングまたは高次コンポーネント、Zone.jsに基づかない最新の変更検出システムなどのいくつかの新機能を探索できます。

  • 不良動作修正済

このバージョンでは、いくつかのバグ修正が行われました。 これには、コンパイラでアドレス指定されていない範囲のインスタンスを削除する、存在しないシンボルをインポートする際の移行関連エラーを解決する、TestBedでオーバーライドの影響を受けるモジュールを特定するなどが含まれます。 さらに、Terserインライン化のバグを修正するための回避策もコアにあります。

  • より良いコミュニティエンゲージメント

Angularにはすでに大規模なグローバル開発コミュニティがあり、Angularプロジェクトに全範囲で一貫して価値を提供しています。 最近、組織自体が戦略を採用し、コミュニティを強化し、プラットフォームをさらに改善するための投資を行うことを計画しています。

  • 非推奨と削除

Angular Package Formatには、FESM5またはESM5バンドルは含まれなくなりました。 これにより、Angularライブラリとパッケージでyarnまたはnpm installを実行しているときに、ダウンロードとインストールの時間を119MB節約できます。 ES5を支援するためのダウンレベリングは開発プロセスの最後に行われるため、これらの形式は破棄できます。

さらに、Angular組織は、IE9、10、InternetExplorerMobileなどの古いブラウザーのサポートを廃止しました。

  • その他の変更

Angular 10は、いくつかの画期的な変更をもたらします。 たとえば、ロジックは、深夜を超えて延長される日周期のフォーマットに対応して更新されます。 アプリケーションがformatDateまたはDatePipeのいずれか、あるいはbおよびBフォーマットコードを使用している場合、この変更の影響を受けます。

もう1つの変更は、EMPTYを返すリゾルバーがナビゲーションをキャンセルすることです。 開発者は、default！Emptyなどの特定の値でリゾルバーを更新する必要があります。

Angular NPMには、ClosureCompilerの高度な最適化をサポートするためのjsdocコメントがいくつか含まれていません。 Closure Compilerを使用する場合は、NPMで公開されているバージョンを使用するよりも、ソースから直接ビルドされたAngularパッケージを使用する方が適切です。 一時的に、ユーザーは現在のビルドパイプラインを使用できます。

このバージョンでは、ServiceWorkerキャッシュからソースを取得するときにVaryヘッダーが見落とされます。 これにより、ヘッダーが類似していなくてもソースが取得されます。 アプリケーションがリクエストヘッダーに基づいて応答を区別する必要がある場合は、影響を受けるリソースのキャッシュを回避するようにAngularServiceWorkerが構成されていることを確認してください。

不明な要素に関する警告がエラーとして表示されるようになりました。 これによってアプリが破損することはありませんが、console.errorを介してログに記録されることを期待するツールを起動できます。

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

Angularの最新バージョンにアップグレードするには、次のコマンドを使用できます。

ng update @ angular / cli @ angular / core

Angularバージョン10への更新に関する明確なガイドラインは次のとおりです。ただし、技術的な専門知識がなければ、このコマンドは役に立たない可能性があります。 プロのAngular開発サービスを利用して、Angular10に正常に更新します。

結論
Angular 10が提供するすべての便利さにより、アプリフレームワークのバージョンをアップグレードするように説得された可能性があります。 私たちを信じてください、それは努力する価値があります。