ng-loom: a dependency graph for your Angular app, as a single HTML file

On a large Angular workspace at work, I needed to know what actually depended on a shared service before I touched it. grep finds text, not relationships. The routing config tells you what loads, not what it pulls in. And most “architecture diagram” tools want your code in the cloud, or want you to hand-maintain a diagram that’s stale within a week.

So I built ng-loom — a CLI that statically analyzes an Angular workspace and spits out a single, self-contained HTML file with the whole dependency graph in it. No server, no account, no uploading your source anywhere.

npx ng-loom ./path/to/angular-project --out report.html

It walks the workspace with ts-morph, finds every component, directive, pipe, service, and NgModule, and maps out how they connect: standalone imports, NgModule imports/exports/declarations, constructor DI and inject() calls, hostDirectives, lazy routes. Template usage isn’t regex-matched — it runs your actual templates through @angular/compiler’s real parser, so @if/@for/@switch/@defer blocks and structural directives resolve correctly. Every edge carries the file, line, column, and a vscode:// link straight to source.

The report has a folder/package overview that treemaps your codebase by size and complexity, a node focus view with full detail panels, and trace relation — which finds every path between two artifacts, not just the first one, for when you’re a few layers of indirection deep. I ran it against ngx-admin (294 nodes, 340 edges) to make sure it holds up on a real app, not just a toy project.

Full writeup with screenshots on dev.to. Source is on GitHub — MIT licensed. Available on npm.