Injectables visualisation

[vik-13]

It would be great to show all relations for selected Injectable.

Many huge projects have a services folder, which may contains 100+ shared services...
To refactor that nice to have next features:

• Show all places where it's provided (modules, components...). If it's provided more than one time it helps to understand if it's necessary or not, especially if it's provided in root module and some lazy loaded module or component;
• Show all places where it's injected. It helps to understand if it's sharable or not. If not then it could be moved and provided in place where it's used;
• To show how many instances possibly will be created;
• I faced the the case, when the service (f.ex. DialogService) imports lots different components for rendering into dialog window. It would be great to show such components;

[mgechev]

Currently, we have a subset of this - we show an injectable and its dependencies. To preview the dependent classes the user has to navigate to them.

Do you think this makes sense to be part of the global app view? Currently, there we only show all the modules, their dependencies, and declarations. I was thinking that adding providers could be also useful. My only concern is to not have too complicated graph with many overlapping connections.

[vik-13]

I agree with you, it doesn't make any sense to render everything in one view (Only if you wanna make a tweet about how huge your app is).

Nice to have more views:

• Modules;
• Injectables;
• Components;

Modules - something similar as we have now with dependencies;
Injectables - show graph which represents relations between. Usually injectables don't have many relations between themselves, but it could be useful in case of huge app.
Components - I think it's something that you mentioned about template. Would be nice to see the structure of components. Perhaps from component as a route and all components which are used in template and so on..It's gonna be something like a tree of components.

Module's details - something like we have it now.
Injectables details - that's what I described above in the issue.
Component's details - additionally nice to see where it's declared and where it's used. Also if it's injected or used as View Child() would be great to show it.

Also I'm thinking about the view with analysed info:

• show Injectables list which could have more than one instance;
• show components, which are declarated more than in one place;
• highlight components which use Default strategy;
• show modules, which have more than one declarations (It could be not critical, but as a notice would be great).

It would nice to have possibility to switch between graph view and list/ table view.

[mgechev]

Injectables details - that's what I described above in the issue.
Component's details - additionally nice to see where it's declared and where it's used. Also if it's injected or used as View Child() would be great to show it.

Looks like these are the two new views that are currently missing:

Also if it's injected or used as View Child() would be great to show it.

This part will be tricky, so I suggest holding this off. I also don't see a tremendous value here. Maybe open a feature request to keep track of it?

additionally nice to see where it's declared and where it's used

I can see how this could be very useful. It's not trivial from UX perspective though. We can:

• Show in which components the given component is used in
• In which modules the component is imported
• In which modules the component is declared

Components - I think it's something that you mentioned about template. Would be nice to see the structure of components. Perhaps from component as a route and all components which are used in template and so on..It's gonna be something like a tree of components.

This is not available as well, but I'll be looking at it next.

show Injectables list which could have more than one instance;
show components, which are declarated more than in one place;
highlight components which use Default strategy;

I like this a lot.

show modules, which have more than one declarations (It could be not critical, but as a notice would be great).

I'd suggest holding this off for now because there's no official recommendation to have a single declaration per component. I'd even discourage such practice.

We need to think what are the best ways to visualize the injectable visualization. Also keep in mind that not everything is possible because Ivy's compiler is not responsible for instantiating providers.

As a good next step, I'd suggest opening feature request for the issues we agree will be a good fit. Would you want to take this?

[vik-13]

Sure, I'm gonna create separated feature requests

I'd suggest holding this off for now because there's no official recommendation to have a single declaration per component. I'd even discourage such practice.

For some cases I agree with you. F.ex. If you use some date picker component, which has some internal views or so.. But I met examples, when one module declares 20+ components, which are not related with each other.. Then when you want to use one of them you need to import all of them... I don't suggest to show all modules with multiple declarations...but at least it would be great to think about that, maybe just highlight if there are lots of different declarations

Ivy's compiler is not responsible for instantiating providers.

I guessed so, but I thought we can do some prediction at least...f.ex. if Injectable is provided in root module, in lazy-loaded module and in some component.. We could notify about that. I faced the issue when SomeModule.forRoot() was imported around 20 times through the project...