Angularロードマップ

Angularシグナルの提供

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

v17リリースの一環として、Angularシグナルライブラリを開発者プレビューから卒業しました。v19では、シグナルベースのクエリ、入力、モデル入力を安定版に移行しました。次に、このプロジェクトを完了する前に、エフェクトを最終化する必要があります。

HMR（ホットモジュールリプレースメント）の改善

ホットモジュールリプレースメントを有効にすることで、より高速な編集/更新サイクルを目指しています。

Angular v19では、CSSとテンプレートのHMRの初期サポートを提供しました。このプロジェクトを完了する前に、開発者のニーズに対応していることを確認するために、フィードバックの収集を続けます。

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

Nitroが提供する、より多くのデプロイオプション、さまざまなランタイムとファイルベースのルーティングとのサーバーサイドレンダリングの互換性の向上などの機能に興奮しています。2025年には、Angularのサーバーサイドレンダリングモデルにどのように適合するかを評価します。

調査の進捗状況については、随時更新をお知らせします。

Support two-dimensional drag-and-drop

As part of this project, we implemented mixed orientation support for the Angular CDK drag and drop. This is one of the repository's most highly requested features.

Event replay with SSR and prerendering

In v18 we introduced an event replay functionality when using server-side rendering or prerendering. For this feature we depend on the event dispatch primitive (previously known as jsaction) that is running on Google.com.

In Angular v19 we graduated event replay to stable and enabled it by default for all new projects.

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％を新しい提出内容を迅速に対応するために割り当てます。