らいふうっどの閑話休題

Version 11 of Angular Now Available の翻訳です。

Angularバージョン11リリースへようこそ。

バージョン11.0.0がリリースされ、Angular開発者向けの優れたアップデートがどこにでもあります。
このリリースでは、フレームワーク、CLI、コンポーネントなど、プラットフォーム全体で更新が行われます。飛び込みましょう！

このリリースには何が含まれていますか？

Operation Byelog の更新

Angular のロードマップを共有したとき、項目の1つは Operation Byelog でした。そこでは、より広範なコミュニティのニーズを明確に理解するまで、問題と PR のトリアージに向けて多大なエンジニアリング努力を払うことを約束しました。これで、元の目標が完了したことを報告できます。 3つのモノリポジトリすべてのすべての問題をトリアージしました。新しい問題が報告された場合は、継続的な取り組みとしてこれを継続します。

これが私たちのコミットメントです。今後、報告されたすべての新しい問題は2週間以内にトリアージされます。

その過程で、router と forms でよくある問題をいくつか解決しました。

また、3番目によくある問題を締めくくりました。

現在、Angularコミュニティをサポートするための次のステップを計画しています。問題のトリアージと修正を継続し、コミュニティの貢献を受け入れるためのプロセスの改善に向けて取り組みます。

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

最初のコンテンツの多いペイントを高速化してアプリをさらに高速化するために、自動フォントインライン化を導入しています。コンパイル時に、Angular CLI は、アプリケーションで使用およびリンクされているフォントをダウンロードしてインライン化します。バージョン 11 でビルドされたアプリでは、これがデフォルトで有効になっています。この最適化を利用するために必要なのは、アプリを更新することだけです。

Component Test Harnesses

Angular v9 では、コンポーネントテストハーネスを導入しました。これらは、Angular Material コンポーネントのテストに役立つ堅牢で読みやすい API サーフェスを提供します。開発者は、テスト中にサポートされている API を使用して Angular Material コンポーネントと対話する方法を提供します。

バージョン 11 でリリースされ、すべてのコンポーネントにハーネスが用意されています。これで、開発者はより堅牢なテストスイートを作成できます。

パフォーマンスの向上と新しい API も含まれています。並列機能を使用すると、開発者はコンポーネントとの複数の非同期相互作用を並列に実行できるため、テストでの非同期アクションの操作が簡単になります。 manualChangeDetection 関数を使用すると、開発者は単体テストで自動変更検出を無効にすることで、変更検出をよりきめ細かく制御できます。

これらの API やその他の新機能の詳細と例については、Angular Material TestHarnesses のドキュメントを確認してください。

レポートとログの改善

開発中にさらに役立つように、ビルダーフェーズレポートに変更を加えました。ログとレポートを読みやすくするために、新しいCLI 出力の更新を導入しています。

更新された Language Service Preview

Angular Language Service は、Angular を使用した開発を生産的で楽しいものにするための便利なツールを提供します。言語サービスの現在のバージョンは ViewEngine に基づいており、本日、Ivyベースの言語サービスを紹介します。更新された言語サービスは、開発者により強力で正確なエクスペリエンスを提供します。

これで、language service は、TypeScript コンパイラと同じ方法で、テンプレート内のジェネリック型を正しく推測できるようになります。たとえば、以下のスクリーンショットでは、iterable が文字列型であると推測できます。

テンプレート内の反復可能なタイプを推測する Angular Language Service
この強力な新しいアップデートはまだ開発中ですが、次のバージョンでの完全なリリースに向けて準備を続けているため、アップデートを共有したいと思いました。

Hot Module Replacement（HMR）サポートを更新

Angular は HMR のサポートを提供していますが、それを有効にするには構成とコードの変更が必要であり、Angular プロジェクトにすばやく含めるのは理想的とは言えません。バージョン 11 では、CLI を更新して、ng serve でアプリケーションを起動するときに HMR を有効にできるようにしました。開始するには、次のコマンドを実行します。

ng serve --hmr

ローカルサーバーが起動すると、コンソールに HMR がアクティブであることを確認するメッセージが表示されます。
注意：開発サーバーで Hot Module Replacement（HMR）が有効になっています。
HMR for webpack の操作については、https://webpack.js.org/guides/hot-module-replacement を参照してください。

開発中に、コンポーネント、テンプレート、およびスタイルへの最新の変更が、実行中のアプリケーションに即座に更新されます。ページ全体を更新する必要はありません。フォームに入力されたデータは保持され、スクロール位置も保持されるため、開発者の生産性が向上します。

Faster Builds

いくつかの重要な領域を更新することで、開発とビルドのサイクルを高速化します。

依存関係をインストールすると、ngcc の更新プロセスが 2〜4 倍速くなります。
TypeScript v4.0 による高速コンパイル。

実験的なwebpack5のサポート

これで、チームは webpack v5 にオプトインできます。現在、module federation を試すことができます。将来的には、webpack v5 は次のパスをクリアします。

永続的なディスクキャッシュを使用したビルドの高速化
cjs tree-shaking のおかげでより小さなバンドル

サポートは実験的で開発中であるため、本番環境での使用を選択することはお勧めしません。

webpack 5 を試してみませんか？プロジェクトで有効にするには、package.json ファイルに次のセクションを追加します。

"resolutions": {
     "webpack": "5.4.0"
}

npm はまだ resolutions プロパティをサポートしていないため、現在、これをテストするには yarn を使用する必要があります。

Linting

Angular の以前のバージョンでは、Linting のデフォルトの実装（TSLint）が出荷されていました。現在、TSLint は、ESLint への移行を推奨するプロジェクト作成者によって非推奨になっています。 James Henry は、オープンソースコミュニティの他の人々と協力して、typescript-eslint 、angular-eslint 、および tslint-to-eslint-config を介してサードパーティのソリューションと移行パスを開発しました。 Angular 開発者がサポートされているリンティングスタックにスムーズに移行できるように、緊密に協力してきました。

バージョン 11 では TSLint と Codelyzer の使用を廃止します。これは、将来のバージョンでは、Angular プロジェクトを Linting するためのデフォルトの実装が利用できなくなることを意味します。

プロジェクトに angular-eslint を組み込み、TSLint から移行するためのガイドについては、公式プロジェクトページにアクセスしてください。

Housekeeping

このアップデートでは、IE9 / IE10 と IE モバイルのサポートを削除します。 IE11 は、Angular で引き続きサポートされている IE の唯一のバージョンです。また、非推奨の API を削除し、いくつかを非推奨リストに追加しました。これをチェックして、最新の API を使用し、推奨されるベストプラクティスに従っていることを確認してください。

ロードマップ

また、ロードマップを更新して、現在の優先事項を投稿できるようにしました。この投稿の発表の一部は、ロードマップからの進行中のプロジェクトの更新です。これは、より大きな取り組みを段階的に展開するという私たちのアプローチを反映しており、開発者はそれを最終リリースに組み込むことができるという早期のフィードバックを提供できます。

Angular コミュニティの Lukas Ruebbelke と協力して、一部のプロジェクトのコンテンツを更新し、開発者に提供する価値をより適切に反映させました。

バージョン 11 を取得するために更新する方法

準備ができたら、次のコマンドを実行して Angular と CLI を更新します。

ng update @angular/cli @angular/core

update.angular.io にアクセスして、更新に関する詳細情報とガイダンスを見つけてください。最高のアップデートエクスペリエンスを得るには、一度に1つのメジャーリリースをアップグレードすることを常にお勧めします。

この機能の更新をお楽しみいただき、ここまたはTwitterでご意見をお聞かせください。

medium.com blog.angular.io

Angular

Develop

Docker

Angular

NgRx

RxJS

Angular

Design

Git

NgRx

RxJS

このリリースには何が含まれていますか？

Operation Byelog の更新

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

Component Test Harnesses

レポートとログの改善

更新された Language Service Preview

Hot Module Replacement（HMR）サポートを更新

Faster Builds

実験的なwebpack5のサポート

Linting

Housekeeping

ロードマップ

バージョン 11 を取得するために更新する方法

Angular

Design

NgRx

Typescript

Angular

Git

Angular