Visualization of dependency injection

[oschlegel]

Which @angular/* package(s) are relevant/related to the feature request?

core

Description

It's sometimes not so easy to unterstand what dependency injection is doing. It would be very helpful if there would be a possibility to better understand which instances of a injectable exist, how the dependency injection tree of a application looks and how the injector / injection hierarchy of a component looks.

Proposed solution

Extend the chrome dev tools plugin for angular with a visualization for the dependency injection tree.

Alternatives considered

Currently i don't have any idea for alternatives.

[mgechev]

That's something we're exploring currently. @AleksanderBodurri is working with @AndrewKushnir on plugging into the runtime to figure out the dependency graph and provider declarations. Assigning to @AleksanderBodurri.

[oschlegel]

That's great to hear. This will be a helpful feature for alot of people.

[angular-robot[bot]]

This feature request is now candidate for our backlog! In the next phase, the community has 60 days to upvote. If the request receives more than 20 upvotes, we'll move it to our consideration list.

You can find more details about the feature request process in our documentation.

[Den-dp]

In the meantime are there any lifehacks on how we can currently debug the DI?

Something like console.log'ing all instantiated services for a module will be helpful

[aalbericio]

I have just installed the Angular dev tool extension and there's no injector tree visualization yet, right?

[JeanMeche]

@aalbericio Not yet !

[aalbericio]

It would be a quite interesting and useful tool, imho

[zygarios]

This is absolutely a great idea. I'm really looking forward to it. As inspiration, I'm attaching screenshots from Vue and Nest.

[KathrinShpigel]

I think this issue is related to https://github.com/angular/angular/pull/51719.

[zygarios]

Great news !

[ducin]

Dear Everybody, shouldn't this one be closed by now? We've got injectors hierarchy in the devtools shipped already

... along with the providers:

sounds like it fulfills the "visualization of dependency injection"

(my suggestion: close this one) @AleksanderBodurri

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity. Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}