如何从 Angular ngModule 文件中获取组件文件路径列表？答案

【问题标题】：How to get a list of component file paths from an Angular ngModule file?如何从 Angular ngModule 文件中获取组件文件路径列表？
【发布时间】：2021-08-24 23:26:44
【问题描述】：

我正在尝试寻找重构 Angular 应用程序的自动化解决方案，因为手动重构真的很乏味。

当我们试图通过 treeshaking 组件/指令到它们自己的模块中来减轻我们应用程序的共享模块时，需要遍历应用程序中的每个功能模块并检查模板中是否存在指令或组件选择器。如果是这样，则模板所在的模块必须导入从共享模块中经过 treeshaken 的新指令/组件的模块。是否有任何重构工具可以帮助解决这个问题？感觉这是一项很常见的任务。

或者，如果不存在通用解决方案，我仍然想找到一种方法，以编程方式至少列出任何给定 .module.ts 文件的声明数组中组件的所有绝对路径。

我现在面临的解决问题是，

组件文件名可以与类不同
它们有时深深嵌套在多个桶引用中
TsConfig 路径也在自定义项目的导入。

【问题讨论】：

我不知道它是否合适，但是。 github.com/mgechev/ngrev: Angular 项目逆向工程的图形工具github.com/angular-eslint/angular-eslint: Angular eslint.
这不能用Angular的原理图工具来实现吗？

标签： angular typescript webpack angular-cli dependency-graph

【解决方案1】：

这是一个非常好的问题，但我敢肯定，目前没有现成的工具可以解决您的问题。

我可以建议：

从https://github.com/ng-ast/ngast/tree/master开始，你可以找到像workspace.getAllModules和ngModule.getDeclarations这样的方法。如果至少由于某种原因它不起作用，您可以检查作者是如何找到这些模块和组件的
您可以使用 Typescript AST walker、许多 angular、nrwl 或 cdk AST-utils 以及来自AngularCompiler 的一些技巧来编写自己的解决方案。但实际上这是一项艰巨的任务，因为它与 AngularCompiler 所做的事情相同！
请参阅这些链接以获取有用的实用程序
https://github.com/angular/angular-cli/tree/master/packages/schematics/angular/utility https://github.com/angular/components/tree/master/src/cdk/schematics/utils
示例如何在您的AppModule 中找到NgModules，您可能想要做的 - 它以递归方式解析所有模块，如https://github.com/angular/components/blob/5bd088e96e4cb1f59f92d7a0b054091df9fc9976/src/material/schematics/ng-update/migrations/hammer-gestures-v9/hammer-gestures-migration.ts#L724

【讨论】：