Angular2+可视化组件层级/模板层级

Question

Is there a plugin or a program that takes in a angular2+ application and draws component hierarchy and template hierarchy.

I would like to see the overall structure of my app, but I can't seem to find anything that can visualize it. I found this but this only gived dependency hierarchy. I also need the see what template uses what other templates and how are the components and services connected to each other. It would be a really nice way to draw border between potential modules and to re-organize the project structure to be more clean.

Answer 1

Augury is an excellent tool available as a Chrome Browser Extension that lets you also visualize component tree structure in Angular. It has many other features that can help you get more insight into your application and optimize push strategies and module loading. Augury wires with the standard Chrome Developer Tools and it has exactly all the features you asked for. You can install it from the Chrome Web Store for free and it's an open source solution built and maintained in cooperation by Angular team and Rangle.io so you can expect it to be up to date most of the time.

Answer 2

There are 2 tools that I can suggest:

1. https://compodoc.app/
2. https://github.com/mgechev/ngrev

Both helps you visualize your Angular app.