Angular 角度2+；可视化组件层次结构/模板层次结构

是否有插件或程序可以接受angular2+应用程序并绘制组件层次结构和模板层次结构

---

我想看看我的应用程序的整体结构，但我似乎找不到任何可以可视化的东西。我发现，但这只提供了依赖层次结构。我还需要查看什么模板使用什么其他模板，以及组件和服务如何相互连接。这将是一个非常好的方法，可以在潜在模块之间绘制边界，并重新组织项目结构，使其更加干净。

Augury是一个优秀的工具，作为Chrome浏览器扩展，它还可以让您以角度方式可视化组件树结构。它还有许多其他功能，可以帮助您更深入地了解应用程序，优化推送策略和模块加载。Augury与标准的Chrome开发者工具相结合，它完全具备您所要求的所有功能。您可以从Chrome Web Store免费安装它，它是Angular团队和Rangle.io合作构建和维护的开源解决方案，因此您可以期望它在大多数时间都是最新的。

我认为这个问题与Angular无关：它用于SPA的Web浏览器，但您要求的是映射文件系统的文件夹。也许你应该转而寻找IDE插件或Typescript扩展？也许。我不完全确定什么能做这项工作。我还并没有找到一种方法来实现这一点。它比纯类型脚本扩展更复杂，因为它还需要能够理解模板的角度语法和模板中的teplates。它可以实现我想要的，但不完全是，我希望有一个工具可以分析项目的应用程序文件夹并从中创建图形/图表。这是最好的工具，因为它得到angular团队本身的支持。我想要的工具是这个和我找到的工具的组合。那将是最好的。但这已经足够好了。