Search code examples
angularangular2-routingangular-router

Visualize or give pictorial representation of the routes in my application?


Is there a tool to help with visualising or giving pictorial representations of the routes in my angular 6 application?


Solution

  • A good tool for visualisation is Auguri extension. This will map out all routes within an angular application and this will be presented within Chrome dev console.

    More so than just routes this tool is very useful for module visulisation. Especially if you are using lazy loading as this will give a detailed view of how all your modules are structured.

    Augury provides insight into the application structure for an Angular application and the relationship between these building blocks:

    Components, Services, Routes, Modules, Dependencies, Injectors, Data bindings, Events, Object properties.

    Here is how this looks when used.

    Example Tree

    Link to Chrome Store.