Angular2 +可视化组件层次结构/模板层次结构

Question

是否有一个插件或程序可以接收angular2 +应用程序，并绘制组件层次和模板层次。

我想查看我的应用程序的整体结构，但是我似乎找不到任何可以可视化它的东西。我找到了this，但这只会使依赖项变得更整洁。我还需要了解哪些模板使用了哪些其他模板，以及组件和服务如何相互连接。划定潜在模块之间的边界并重新组织项目结构以使其更加整洁是一种非常不错的方法。

Answer 1

Augury是出色的工具，可作为Chrome浏览器扩展程序使用，它还可以使您在Angular中可视化组件树结构。它具有许多其他功能，可以帮助您深入了解应用程序并优化推送策略和模块加载。使用标准的Chrome开发人员工具进行预购，它具有您所要求的所有功能。您可以从Chrome网上应用店免费安装它，它是由Angular团队和Rangle.io合作构建和维护的开源解决方案，因此您可以期望它在大多数时间都是最新的。