Angularのロードマップ

Angularシグナルを提供する

このプロジェクトは、シグナルをリアクティビティプリミティブとして導入することで、Angularのリアクティビティモデルを再考しています。初期の計画は、数百の議論、開発者との会話、フィードバックセッション、ユーザーエクスペリエンス調査、および1,000件以上のコメントを受け取った一連のRFCを生み出しました。

v17リリースの一環として、Angularシグナルライブラリは開発者プレビューから卒業しました。v18では、開発者プレビューで信号ベースのクエリ、入力、およびモデル入力を使用できるようになりました。次に、これらのAPIを安定版に卒業し、Angularの変更検知メカニズムに信号をより深く統合する前に、コミュニティからのフィードバックに対処し続けます。

ローカルテンプレート変数

ローカルテンプレート変数は、Angularのイシュー追跡システムで最も多くの票を集めた機能の1つです。2024年第2四半期に、初期設計とプロトタイピングを開始しました。2024年後半に更新情報を期待してください。

SSRおよび事前レンダリングでのイベントリプレイ

v18では、サーバーサイドレンダリングまたは事前レンダリングを使用する場合のイベントリプレイ機能を導入しました。この機能は、Google.comで実行されているイベントディスパッチプリミティブ（以前はjsactionと呼ばれていました）に依存しています。

今後数か月で、この機能に関するコミュニティからのフィードバックを収集し、安定版に卒業させる取り組みを進めます。

HMR（ホットモジュールリロード）を改善する

Angular CLIは現在、ng serve --hmrを使用してHMRをサポートしています。裏側では、これは主にAngularアプリケーションを最初から再レンダリングしますが、完全なページのリロードよりも優れていますが、間違いなく改善できます。最も重要なのは、この戦略は、その種の変更の頻度に合わせてスケールされた、任意の変更のターンアラウンド時間を最適化する必要があることです。将来的には、チームでHMRを改善するためのいくつかの機会を探求します。これには以下が含まれます。

• CSSのみの変更を高速化し、ページ上の既存のコンポーネントに適用します。
• Angularテンプレートのみの変更を高速化し、ページ上の既存のコンポーネントに適用します。

2次元ドラッグアンドドロップをサポートする

このプロジェクトの一環として、Angular CDKのドラッグアンドドロップに混合方向のサポートを実装したいと思います。これは、リポジトリで最も多く要求されている機能の1つです。

Angular CLIでのNitroサポートの評価

ポータビリティ、最小限の設計、ファイルベースのルーティングなど、Nitroが提供する機能セットに興奮しています。今年後半には、それがAngularのサーバーサイドレンダリングモデルにどのように適合するかを評価します。

調査の進捗状況に応じて更新情報を共有します。

Angular Materialのカスタマイズを拡張する

Angular Materialコンポーネントのカスタマイズを向上させ、Material 3機能を有効にするために、トークンベースのテーマAPIを定義するためにGoogleのMaterial Designチームと協力しています。

v17.2では、Angular Material 3の実験的なサポートを共有し、v18では安定版に卒業しました。

遅延読み込みを導入する

v17では、遅延コード読み込みのための使い慣れたAPIを提供する、開発者プレビューで遅延表示を提供しました。v18では、ライブラリ開発者向けの遅延表示を有効にし、APIを安定版に卒業させました。

esbuildとviteへの既存のハイブリッドレンダリングプロジェクトの移行の自動化

v17では、viteとesbuildベースのアプリケーションビルダーを提供し、新しいプロジェクトでデフォルトで有効にしました。これは、ハイブリッドレンダリングを使用するプロジェクトのビルド時間を最大87％向上させます。v18の一環として、ハイブリッドレンダリングを使用する既存のプロジェクトを新しいビルドパイプラインに移行するシェーマティックとガイドを提供しました。NgModuleは当面の間残りますが、新しいAPIの利点を活用して開発者エクスペリエンスを向上させ、構築した新機能を活用することをお勧めします。

Angular.devをAngular開発者の公式のホームにする

Angular.devは、Angular開発のための新しいサイト、ドメイン、およびホームです。新しいサイトには、開発者がAngularの最新機能を使用して構築するのに役立つ、更新されたドキュメント、チュートリアル、およびガイダンスが含まれています。

組み込みの制御フローを導入する

v17では、新しい制御フローの開発者プレビューバージョンを提供しました。これは、テンプレートオーサリングのパフォーマンスを大幅に向上させ、使いやすさを向上させます。また、既存の*ngIf、*ngFor、*ngSwitchのマイグレーションを提供しており、これを実行してプロジェクトを新しい実装に移行できます。v18以降、組み込みの制御フローは安定しています。

最新のバンドラーを調査する

Angular v16では、ng buildとng serveをサポートするesbuildベースのビルダーの開発者プレビューをリリースしました。ng serve開発サーバーはViteとesbuildとAngularコンパイラーによる複数ファイルコンパイルを使用します。v17では、ビルドツールを開発者プレビューから卒業させ、新しいプロジェクトでデフォルトで有効にしました。これは、ハイブリッドレンダリングを使用するプロジェクトのビルド時間を最大87％向上させます。

依存性の注入のデバッグAPIを導入する

AngularとAngular DevToolsのデバッグユーティリティを改善するために、依存性の注入ランタイムにアクセスできるAPIに取り組んでいます。このプロジェクトでは、インジェクター階層とその関連するプロバイダー全体での依存関係を探索できるデバッグメソッドを公開します。v17では、依存性の注入のライフサイクルにプラグインできる機能を提供しました。また、インジェクターツリーの可視化と、各ノード内に宣言されたプロバイダーの検査を開始しました。

スタンドアロンコンポーネントのドキュメントとシェーマティックを改善する

ng new --standaloneシェーマティックコレクションの開発者プレビューをリリースしました。これにより、NgModuleを使用せずにアプリケーションを作成できます。v17では、新しいアプリケーションのオーサリング形式をスタンドアロンAPIに変更し、ドキュメントを反映するように変更しました。さらに、既存のアプリケーションをスタンドアロンコンポーネント、ディレクティブ、およびパイプに更新するシェーマティックを提供しました。NgModuleは当面の間残りますが、新しいAPIの利点を活用して開発者エクスペリエンスを向上させ、構築した新機能を活用することをお勧めします。

アプリケーション全体の非破壊的なハイドレーション

v16では、非破壊的な完全なハイドレーションの開発者プレビューをリリースしました。これにより、Angularは、サーバーサイドレンダリングされたページで既存のDOMノードを再利用できるようになり、最初からアプリケーションを再作成する必要がなくなります。ハイドレーションガイドで詳細を確認してください。

画像ディレクティブの改善

v15でAngularの画像ディレクティブを安定版としてリリースしました。画像が明示的な寸法を持つのではなく、親コンテナーに収まるようにする新しい塗りつぶしモード機能を導入しました。過去2か月で、Chrome Auroraチームは、v12以降のバージョンにディレクティブをバックポートしました。

ドキュメントの再構築

既存のすべてのドキュメントが、一貫した一連のコンテンツタイプに収まるようにします。チュートリアルスタイルのドキュメントの過度の使用を、独立したトピックに更新します。メインのチュートリアル以外のコンテンツが、一連のガイドと緊密に結合されることなく、自己完結型であることを確認したいと考えています。2022年第2四半期に、テンプレートコンテンツと依存性の注入を再構築しました。2023年第1四半期に、HTTPガイドを改善しました。これにより、ドキュメントの再構築プロジェクトを保留にしました。

画像のパフォーマンスを向上させる

AuroraチームとAngularチームは、Core Web Vitalsを改善することを目的とした画像ディレクティブの実装に取り組んでいます。v15で画像ディレクティブの安定版をリリースしました。

最新のCSS

ウェブエコシステムは常に進化しており、Angularに最新の標準を反映させたいと考えています。このプロジェクトでは、開発者がレイアウト、スタイリングなど、ベストプラクティスに従うように、Angularで最新のCSS機能を使用するためのガイドラインを提供することを目指しています。レイアウトの公式ガイドラインを共有し、このイニシアチブの一環として、フレックスレイアウトの公開を停止しました。

ホスト要素へのディレクティブの追加をサポートする

長年の機能要求の1つは、ホスト要素にディレクティブを追加する機能を追加することです。この機能により、開発者は、継承を使用せずに、独自のコンポーネントに追加の動作を追加できます。v15では、ディレクティブの合成APIを提供しました。これにより、ディレクティブを使用してホスト要素を拡張できます。

より良いスタックトレース

AngularとChrome DevToolsは、エラーメッセージのスタックトレースをより読みやすくするために協力しています。v15では、関連性のあるリンクされたスタックトレースをリリースしました。優先順位が低いイニシアチブとして、テンプレートのより正確な呼び出しフレーム名を提供することで、スタックトレースをより使いやすくする方法を探求していきます。

MDC Webを統合することでAngular Materialコンポーネントを強化

MDC Webは、GoogleのMaterial Designチームが作成したライブラリであり、Material Designコンポーネントを構築するための再利用可能なプリミティブを提供します。Angularチームは、これらのプリミティブをAngular Materialに組み込んでいます。MDC Webを使用すると、Angular MaterialはMaterial Design仕様にさらに準拠し、アクセシビリティが向上し、コンポーネントの品質が向上し、チームの速度が向上します。

オプションのNgModuleのAPIを実装する

Angularを簡素化する過程で、開発者がNgModuleを使用せずにアプリケーションを初期化し、コンポーネントをインスタンス化し、ルーターを使用できるAPIを導入しています。Angular v14では、スタンドアロンコンポーネントやディレクティブおよびパイプのAPIの開発者プレビューを導入しました。今後の数四半期で、開発者からのフィードバックを収集し、プロジェクトを最終化してAPIを安定版にします。次のステップとして、TestBed、Angular要素など、ユースケースを改善していきます。

テンプレートで保護されたフィールドへのバインドを許可する

Angularコンポーネントのカプセル化を改善するために、コンポーネントインスタンスの保護されたメンバーへのバインドを有効にしました。これにより、テンプレート内で使用するフィールドやメソッドをパブリックとして公開する必要がなくなります。

高度な概念に関するガイドを公開する

変更検知に関する詳細なガイドを開発および公開します。Angularアプリケーションのパフォーマンスプロファイリングのためのコンテンツを開発します。変更検知がZone.jsとどのように相互作用するか、いつトリガーされるか、期間をプロファイルする方法、およびパフォーマンスを最適化するための一般的な慣行を説明します。

@angular/formsの厳密な型付けを展開する

2021年第4四半期に、フォームの厳密な型付けを導入するためのソリューションを設計し、2022年第1四半期に関連するRFCを終了しました。現在、既存のプロジェクトの改善を可能にする自動移行ステップを備えた展開戦略を実装しています。まず、Googleの2,500を超えるプロジェクトでソリューションをテストして、外部コミュニティの円滑な移行パスを確保します。

レガシーのView Engineを削除する

すべての社内ツールをIvyに移行したら、レガシーのView Engineを削除します。これにより、Angularの概念上のオーバーヘッドが削減され、パッケージサイズが小さくなり、メンテナンスコストが削減され、コードベースの複雑さが軽減されます。

オプションのNgModuleを使用してAngularのメンタルモデルを簡素化する

Angularのメンタルモデルと学習プロセスを簡素化するために、NgModuleをオプションにする取り組みを進めています。この作業により、開発者はスタンドアロンコンポーネントを開発し、コンポーネントのコンパイルスコープを宣言するための代替APIを実装できます。このプロジェクトは、RFCにまとめたハイレベルな設計の議論から開始されました。

@angular/formsの厳密な型付けを設計する

下位互換性のない影響を最小限に抑えながら、リアクティブフォームの厳密な型チェックを実装する方法を探します。これにより、開発者は開発中に問題を早期に発見し、より優れたテキストエディターとIDEのサポートを可能にし、リアクティブフォームの型チェックを改善できます。

Angular DevToolsのフレームワークとの統合を改善する

Angular DevToolsのフレームワークとの統合を改善するために、コードベースをangular/angularモノレポに移行しています。これには、Angular DevToolsをBazelに移行し、既存のプロセスとCIパイプラインに統合することが含まれます。

高度なコンパイラー診断を公開する

型チェック以外のAngularコンパイラーの診断を拡張します。他の正しさや適合性のチェックを導入して、正しさやベストプラクティスをさらに保証します。

e2eテスト戦略を更新する

将来を見据えたe2eテスト戦略を提供するために、Protractorの現状、コミュニティのイノベーション、e2eのベストプラクティスを評価し、新しい機会を探求します。取り組みの最初のステップとして、RFCを共有し、パートナーと協力して、Angular CLIと最新のe2eテストツールの統合を円滑にしました。次のステップとして、推奨事項を最終化し、移行のためのリソースリストをまとめる必要があります。

AngularライブラリがIvyを使用する

2020年初頭に、Ivyライブラリの配布に関するRFCを共有しました。コミュニティからの貴重なフィードバックの後、プロジェクトの設計を開発しました。現在、Ivyライブラリの配布の開発に投資しています。これには、Ivyコンパイルを使用するためのライブラリパッケージ形式の更新、View Engineライブラリ形式の廃止、およびngccのブロック解除が含まれます。

自動テスト環境のティアダウンでテスト時間を短縮し、デバッグを改善する

テスト時間を短縮し、テスト間の分離を向上させるために、TestBedが各テスト実行後にテスト環境を自動的にクリーンアップしてティアダウンするように変更したいと考えています。

IE11サポートの廃止と削除

Internet Explorer 11（IE11）は、Angularがウェブプラットフォームの最新の機能を利用することを妨げてきました。このプロジェクトの一環として、最新のブラウザが提供する最新の機能への道を開くために、IE11サポートを廃止し、削除します。コミュニティからのフィードバックを収集し、今後の取り組みを決定するためにRFCを実行しました。

ES2017+をデフォルトの出力言語として活用する

最新のブラウザをサポートすることで、JavaScriptのよりコンパクトで表現力豊かでパフォーマンスの高い新しい構文を活用できます。このプロジェクトの一環として、この取り組みを進めるためのブロッカーを調査し、それを有効にするためのステップを踏みます。

Angular DevToolsを使用したデバッグとパフォーマンスプロファイリングの高速化

デバッグとパフォーマンスプロファイリングのためのユーティリティを提供するAngularの開発ツールに取り組んでいます。このプロジェクトの目標は、開発者がAngularアプリケーションのコンポーネント構造と変更検知を理解するのを支援することです。

統合されたAngularバージョン管理とブランチングによるリリースの合理化

Angular（angular/angular、angular/angular-cli、およびangular/components）の複数のGitHubリポジトリ間のリリース管理ツールを統合したいと考えています。この取り組みにより、インフラストラクチャを再利用し、プロセスを統一し、簡素化し、リリースプロセスの信頼性を向上させることができます。

コミットメッセージの標準化による開発者の整合性の向上

Angularリポジトリ（angular/angular、angular/components、およびangular/angular-cli）全体でコミットメッセージの要件と適合性を統一して、開発プロセスに整合性をもたらし、インフラストラクチャツールの再利用を可能にすることを目指しています。

Angular言語サービスをIvyに移行する

このプロジェクトの目標は、言語サービスをIvyに移行することで、エクスペリエンスを向上させ、レガシーの依存関係を削除することです。現在、言語サービスは、Ivyアプリケーションであっても、View Engineコンパイラーと型チェックを使用しています。Angular LanguageサービスでIvyテンプレートパーサーと改善された型チェックを使用して、アプリケーションの動作と一致させることを目指しています。この移行は、View Engineの削除をブロック解除するためのステップでもあります。これにより、Angularが簡素化され、npmパッケージサイズが削減され、フレームワークの保守性が向上します。

AngularでのネイティブのTrusted Typesによるセキュリティの強化

Googleのセキュリティチームと協力して、新しいTrusted Types APIのサポートを追加しています。このウェブプラットフォームAPIは、開発者がより安全なウェブアプリケーションを構築するのに役立ちます。

Angular CLI webpack 5によるビルド速度とバンドルサイズの最適化

v11リリースの一環として、Angular CLIでwebpack 5のオプトインプレビューを導入しました。安定性を確保するために、ビルド速度とバンドルサイズの改善を可能にするために、実装を改善し続けます。

Universalアプリで重要なスタイルをインライン化することでアプリを高速化する

外部スタイルシートの読み込みはブロッキング操作であるため、ブラウザは参照されているすべてのCSSを読み込むまでアプリケーションのレンダリングを開始できません。ページのヘッダーにレンダリングブロッキングリソースがあると、ロードパフォーマンス（たとえば、最初のコンテンツフルペイント）に大きく影響することがあります。アプリケーションを高速化するために、Google Chromeチームと協力して、重要なCSSをインライン化し、残りのスタイルを非同期に読み込んでいます。

より良いAngularのエラーメッセージによるデバッグの改善

エラーメッセージは、開発者が解決するのに役立つ実行可能な情報をあまり提供していません。より発見しやすいエラーメッセージを作成するために、関連するコードを追加し、ガイドやその他の資料を開発して、よりスムーズなデバッグエクスペリエンスを実現しています。

更新された入門ドキュメントによる開発者のオンボーディングの改善

ユーザーの学習プロセスを再定義し、入門ドキュメントを更新します。Angularの利点、その機能の探索方法、および開発者ができるだけ短時間でフレームワークに習熟できるようにするガイダンスを明確に示します。

コンポーネントハーネスのベストプラクティスを拡張する

Angular CDKは、バージョン9でAngularにコンポーネントテストハーネスの概念を導入しました。テストハーネスにより、コンポーネントの作成者は、コンポーネントの相互作用をテストするためのサポートされているAPIを作成できます。このハーネスインフラストラクチャを改善し続け、ハーネスの使用に関するベストプラクティスを明確化しています。また、Google内部でより多くのハーネスの採用を促進しています。

コンテンツ投影のガイドを作成する

コンテンツ投影はAngularの中核となる概念ですが、ドキュメントでは十分に説明されていません。このプロジェクトの一環として、コンテンツ投影の中核となるユースケースと概念を特定して文書化したいと考えています。

ESLintに移行する

TSLintの廃止に伴い、ESLintに移行します。このプロセスの一環として、現在の推奨されるTSLint構成との下位互換性を確保し、既存のAngularアプリケーションの移行戦略を実装し、Angular CLIツールチェーンに新しいツールを導入します。

バックログさよなら作戦（別名Byelog作戦）

コミュニティの広範なニーズを明確に理解するまで、エンジニアリング能力の最大50％を問題とPRのトリアージに積極的に投資しています。その後、エンジニアリング能力の最大20％を新しい提出内容を迅速に対応するために割り当てます。