How to get a list of component file paths from an Angular ngModule file?

Question

I'm trying to look for automation solutions for refactoring an Angular app as it is really tedious to manually refactor.

As we try to lighten our app's shared module by treeshaking components/directives into their own module, there is a need to go through every feature module in the app and check if a directive or component selector exist in the template. If it does, the module the template is in must import the new directive's/component's module that was treeshaken from the shared module. Are there any refactor tools that can help with this? It feels like a very common task.

Alternatively if no general solution exist, I'd still like to find a way to programmatically at least list all absolute paths of components in any given .module.ts file's declarations array.

The resolution issues I'm facing now are,

The components file names can be different from the Class
They are sometimes in deeply nested in multiple barrels references
TsConfig paths is also customizing imports of the project.

I don't know if it fit, but. https://github.com/mgechev/ngrev: Graphical tool for reverse engineering of Angular projects https://github.com/angular-eslint/angular-eslint: Angular eslint. — Hoch, Jun 14 '21 at 20:28

score 1 · Answer 1 · answered Jun 15 '21 at 13:03

This is a really good question, but I'm sure that at the moment there is no ready-to-go tool that can solve your problem.

What I can suggest:

start with https://github.com/ng-ast/ngast/tree/master, there you can find methods like workspace.getAllModules and ngModule.getDeclarations. if it doesn't work for some reason atleast you can check how exactly author finds this modules and components
you can write your own solution using Typescript AST walker, a lot of angular, nrwl or cdk AST-utils and some tricks from AngularCompiler. But actually it's a big task since it's the same thing that AngularCompiler doing!
See these links for helpful utilities
https://github.com/angular/angular-cli/tree/master/packages/schematics/angular/utility https://github.com/angular/components/tree/master/src/cdk/schematics/utils
example how to find NgModules in your AppModule, what you will probably want to do - it to resolve all the modules like this recursively https://github.com/angular/components/blob/5bd088e96e4cb1f59f92d7a0b054091df9fc9976/src/material/schematics/ng-update/migrations/hammer-gestures-v9/hammer-gestures-migration.ts#L724

How to get a list of component file paths from an Angular ngModule file?

1 Answers1