Feature improvement request: include routes into component hierarchy graph

[MShekow]

Hi Allan, your plug-in really helps to visualize dependencies in Angular projects. I particularly like the component hierarchy graph. I noticed, however, that if a component internally uses other components indirectly, via having a <router-outlet></router-outlet> in its HTML template (and routes defined in, say, the AppRoutingModule), then this dependency is missing from the component hierarchy graph.

Do you see a way to also include these indirect dependencies?

[CoderAllan]

To be honest I'm not a hardcore Angular developer. I primarily do backend stuff in C# and I'm not that familiar with the routing in Angular so I need some more detail of how these relationships should be detected.
This is one of the example apps I have used to test the extension with: https://github.com/DanWahlin/Angular-JumpStart
For example in that app there is the app-routing-module.ts that define the Route for customers that uses the CustomersModule that uses the CustomerComponent as default and the app.component.html has a router-outlet defined. So is the relationship you would like to have visualized is from the app.component to the customer.component in the component hierarchy graph?
Something like this:

[MShekow]

Yes, correct. For the Angular JumpStart app, I would like to see relations such as

AppComponent => CustomersComponent
AppComponent => OrdersComponent
AppComponent => AboutComponent
CustomersComponent => CustomerOrdersComponent
CustomersComponent => CustomerDetailsComponent
CustomersComponent => CustomerEditComponent

The general parsing logic would be like this:

• For every component c whose HTML template contains a <router-outlet></router-outlet>:
  • Get the corresponding module m that references c
  • Check the imports or declarations of m's @NgModule for modules which have RouterModule.forRoot(someRoutes) defined
  • Parse someRoutes, and find other components c' that are referenced in someRoutes (see the component key, or loadChildren() key of each route)
  • For every c' you find, there is a relation c => c' in the component hierarchy graph

[CoderAllan]

@MShekow I have now published version 1.9.0 of the extension that is rendering the routing relations to components referenced directly in the routing modules, like shown below:

When routes are defined as references to module(like in the screenshot below) I need to implement some kind of parsing in order to discover the components that are referenced. I will be working on to solve that issue so all routing relation can be rendered.

I will leave this issue open until I get the final part of the rendering implemented.

[MShekow]

Dear Allan, thanks for implementing some of the functionality :). With v1.9.0, I do see new orange-colored arrows in the component hierarchy graph.

One minor problem is that the origin of the arrow is not correct, at least for my own project. In my project, the component hierarchy graph claims that my AppComponent (the one referenced in index.html) routes to the other components that were discovered in the AppRoutingModule. In reality, however, AppComponent includes another component X, and the <router-outlet></router-outlet> is present in X's HTML template. Therefore, the origin of the orange arrows should be X, not AppComponent.

[CoderAllan]

Thanks for the feedback. Sounds like i have made an assumption that didn't hold...

I have created a fork of Angular-Jumpstart: https://github.com/CoderAllan/Angular-JumpStart
Can you clone that repository, create/change some of components to illustrate the issue, then create a pull request so I can see exactly how your component hierarchy looks like in this situation?