Ever wanted to visualize component dependencies of your project? Me too!
https://github.com/amdor/angular-dependency-collector does just that.
If you are a Medium Member, please read there: https://medium.com/@zsolt.deak/angular-component-dependency-graph-a9ebefc100ef
What does it do?
Finds lazy loadable bundles of container/component/directive cliques automatically.
Lets you discover such cliques manually
Component dependency tree visualization
Prerequisites:
clone the repo
have python installed
have node (npm) installed
read the README
Usage example
There’s a nice larg-ish open source Angular app I found randomly https://github.com/Chocobozzz/PeerTube
First we need a dependency.json for the app to work. Let’s generate that with
python3 ./main.py /path/to/PeerTube/clientThen we need to go to the dependency collector app and run it.
cd dependency-app(npm i)npm startOpen localhost:4201 and voilá, nothing.
All we have is a search field and 2 buttons. A very simplistic app indeed 😊
Now automatic lazy tree finding tries its best, but not going to lie, it’s no AI. On the other hand, if you click Load manual clique selection…
Levels and node size both represent how many connections a component has. Red 🔴s are ‘sources’ nothing depends on them. Blue 🔵s are ‘sinks’, they do not depend on any other component in the repository. 🟢s are ‘connectors’.
Let's create a little order. By double-clicking a node, it is deleted until you refresh. Deleted items show up in console for us to copy and use. For what?
allRemove is an empty array in manual-search-results.ts. All node names in this array are ignored when the graph is built
allRootProvide is an empty array in manual-search-results.ts. All node names in this array are expected to be always present in the application (think navbar). All the nodes that any of the items in this array depend on (e.g. navbar item, navbar link, etc.) are marked with 🟣.
- All items in allRootProvide are still present in the graph
- Deleting 🟣s is not recommended
I manually deleted some large 🔵s, as they should probably be part of some shared package, they refer nothing, but many apps refer them. Then some of the largest 🟢s became 🔵s, so I deleted those again and added the node names to the allRemove both times.
But then I’d want to reorganize the graph a bit. If I right-click on a node, the children's highlighting stays on as long as I don’t double-click the background.
Still, this randomly selected app is very interconnected, so I either delete a lot of nodes (making them eagerly loaded with the app essentially), or I could only find small islands of nodes independent of the others.
The biggest clique the automatic version could find was 4 nodes, so it’s still somewhat useful.
Read next:
Comments