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

Question

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

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

---

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

我现在面临的分辨率问题是，

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

标签： angulartypescriptwebpackangular-clidependency-graph

Answer 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 /原理图/实用程序
• 示例如何NgModules在您的中查找，您AppModule可能想要做什么 - 它递归地解析所有这样的模块https://github.com/angular/components/blob/5bd088e96e4cb1f59f92d7a0b054091df9fc9976/src/material/schematics/ng-update/迁移/锤子手势-v9/锤子手势迁移.ts#L724