ng-loom

Angular-aware dependency visualization for Angular CLI workspaces.

ng-loom is a CLI that scans an Angular project and emits a shareable, self-contained static HTML report of the app's architecture: components, directives, pipes, services, NgModule wrappers, standalone imports, and dependency injection edges.

📦 npm · 📝 Read the write-up on dev.to or Medium

Status

Working, actively developed. Verified against a public Angular app (screenshots below) and a large private production workspace.

Screenshots

Generated from the public ngx-admin dashboard template (294 nodes, 340 edges).

Overview — folder/package clusters

All artifacts — flat dependency graph

Node focus with Details panel

Trace relation — multi-path lookup between two artifacts

Usage

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

For local development:

npm install
npm run build
npm run dev -- ./path/to/angular-project --out report.html

Features

• Angular workspace and tsconfig discovery, including Angular CLI multi-project workspaces and local file: package dependencies
• Component, directive, pipe, service, and NgModule discovery, including the @Service() decorator (experimental, unreleased Angular builds) alongside @Injectable()
• Standalone component imports extraction and NgModule imports/exports/declarations extraction
• hostDirectives tracking, including the { directive, inputs, outputs } aliasing form
• Constructor DI and inject() dependency detection
• Lazy route detection for loadChildren and loadComponent
• Real Angular template AST parsing (@angular/compiler's parseTemplate) for component/directive usage edges, including attribute selectors, structural directives, and the @if/@for/@switch/@defer/@let control-flow syntax
• @Input()/@Output()/model API extraction, including aliases and the signal-based input()/output()/model() functions
• Source-location evidence on every edge (file, line, column, snippet, and a vscode:// deep link)
• Self-contained static HTML report: zoomable/pannable dependency graph, folder/package cluster overview, node focus + Details panel, multi-path trace relation lookup, dark theme
• --include and --exclude path filters

Known Limitations

• Pipe usage in templates ({{ value | pipeName }}) is not yet tracked as a uses edge
• Class-selector matching only looks at the static class="..." attribute, not [class.x]/[ngClass] bindings
• Route parsing handles common static component/loadComponent patterns, not every dynamic route construction
• No Nx monorepo support — resolveWorkspace only looks for tsconfig.app.json/tsconfig.json directly in the given root
• Expanded cluster state is not persisted across report reloads
• Trace path ranking is heuristic and may surface many similar paths in dense component graphs