インジェクターの検査

NOTE: インジェクターツリーは、バージョン17以降を使ってビルドされたAngularアプリケーションで使用できます。

アプリケーションのインジェクター階層を表示

Injector Treeタブでは、アプリケーションに構成されたインジェクターの構造を探索できます。ここでは、アプリケーションのインジェクタ階層を表す2つのツリーが表示されます。1つのツリーは環境階層、もう1つのツリーは要素階層です。

例となるアプリケーションのインジェクタグラフを視覚化しているAngular Devtoolsの「Profiler」タブのスクリーンショットで、インジェクタツリータブが表示されています。

解決パスを視覚化する

特定のインジェクターが選択されると、そのインジェクターからルートへのAngularの依存性の注入アルゴリズムがたどるパスが強調表示されます。要素インジェクターの場合、これには、依存関係が要素階層で解決できない場合に依存性の注入アルゴリズムがジャンプする環境インジェクターの強調表示も含まれます。

Angularが解決パスをどのように解決するかについての詳細は、解決ルールを参照してください。

インジェクタツリーがインジェクタが選択されたときに解決パスをどのように強調表示するかを示す「Profiler」タブのスクリーンショット。

インジェクタープロバイダーを表示

プロバイダーが構成されているインジェクターをクリックすると、右側にあるインジェクターツリービューにプロバイダーのリストが表示されます。ここでは、提供されたトークンとそのタイプを表示できます。各プロバイダーの右側のボタンを使用すると、コンソールにプロバイダーをログ出力できます。

インジェクタが選択されたときにプロバイダがどのように表示されるかを示す「Profiler」タブのスクリーンショット。