AngularRouteExplorer

A fast, standalone CLI tool for analyzing Angular project route configurations. Built in Rust, it performs static analysis on TypeScript and HTML source files -- no Node.js or Angular CLI required.

Features

• Component Route Finder -- Given a component file, find every route where it is used (directly in route config or embedded via selector in templates).
• Route Tree Generator -- Scan an Angular project and produce a full route tree with guards, resolvers, and lazy-loading boundaries. Output as terminal text, Markdown, HTML, or JSON.
• Broad Angular support -- Handles standalone routes (Angular 17+), NgModule RouterModule patterns, loadChildren, loadComponent, functional and class-based guards/resolvers.
• Workspace aware -- Supports standard Angular CLI projects and Nx monorepos.

Installation

Build from source

Requires Rust 1.85+ (edition 2024).

git clone https://github.com/your-org/AngularRouteExplorer.git
cd AngularRouteExplorer
cargo build --release

The binary is at target/release/angular-route-explorer (or .exe on Windows).

Add to PATH

Add the .exe as a PATH environment variable.

Quick Start

Navigate to your Angular project root (or use -p to point to it) and run:

# Print the full route tree to the terminal
angular-route-explorer route-tree

# Generate a Markdown doc of all routes
angular-route-explorer route-tree --format markdown

# Find which routes use a specific component
angular-route-explorer find-component src/app/shared/header/header.component.ts

Usage

Global Options

Option	Short	Description
--project-root <PATH>	-p	Root directory of the Angular project or Nx workspace. Defaults to .
--verbose	-v	Increase verbosity. Use -v for info, -vv for debug, -vvv for trace
--help	-h	Print help
--version	-V	Print version

---

route-tree -- Generate Route Documentation

angular-route-explorer route-tree [OPTIONS]

Scans the project for route configurations and outputs a hierarchical route tree.

Option	Short	Description	Default
--format <FORMAT>	-f	Output format: terminal, markdown, html, json	terminal
--output-dir <PATH>	-o	Directory for file output (markdown/html)	./route-tree-output
--app <NAME>	-a	App to analyze (required for Nx monorepos with multiple apps)	auto-detect
--max-depth <N>	-d	Maximum nesting depth to display. 0 = unlimited	0

Examples

# Terminal output (default)
angular-route-explorer route-tree

# Markdown file
angular-route-explorer route-tree --format markdown --output-dir ./docs

# HTML file with collapsible tree, guards, and resolver badges
angular-route-explorer route-tree --format html -o ./docs

# JSON to stdout (pipe to jq, etc.)
angular-route-explorer route-tree --format json | jq '.routes'

# Limit depth for large projects
angular-route-explorer route-tree --max-depth 3

# Nx monorepo -- specify which app
angular-route-explorer route-tree -p /path/to/nx-workspace --app my-app

Terminal Output

Route Tree for: my-app
Source: src/app/app.routes.ts

/
+-- (empty path) [HomeComponent]
+-- about [AboutComponent]
+-- admin ** LAZY **
|   +-- (empty path) [AdminDashboardComponent]
|   +-- users [UsersListComponent]
|   |   +-- :id [UserDetailComponent]
|   |       Guards: [canActivate: isAuthenticated]
|   |       Resolvers: {user: userResolver}
+-- ** [NotFoundComponent]

Summary:
  Total routes:      6
  Lazy boundaries:   1
  Guards used:       1
  Resolvers used:    1

Markdown Output

Generates a route-tree.md file with:

• Route hierarchy table (path, component, lazy status, guards, resolvers, redirects)
• Lazy-loading boundaries summary
• Guards summary
• Resolvers summary

HTML Output

Generates a self-contained route-tree.html file with:

• Collapsible tree view using <details>/<summary>
• Color-coded badges (lazy = yellow, guards = red, resolvers = blue, redirects = green)
• Search/filter input to quickly find routes
• No external dependencies -- works offline

---

find-component -- Find Routes for a Component

angular-route-explorer find-component [OPTIONS] <COMPONENT_PATH>

Finds all routes where a given component is used.

Argument/Option	Short	Description	Default
<COMPONENT_PATH>	--	Path to the .component.ts file (relative to project root)	required
--format <FORMAT>	-f	Output format: terminal, json	terminal
--include-selectors	--	Also search HTML templates for the component's selector	off

Examples

# Find direct route assignments for a component
angular-route-explorer find-component src/app/home/home.component.ts

# Also find where the component is embedded in templates of routed components
angular-route-explorer find-component src/app/shared/header/header.component.ts --include-selectors

# JSON output for scripting
angular-route-explorer find-component src/app/home/home.component.ts --format json

# Different project root
angular-route-explorer find-component src/app/dashboard.component.ts -p /path/to/project

Terminal Output

Component: HeaderComponent
File:      src/app/shared/header/header.component.ts
Selector:  app-header

ROUTED REFERENCES (direct route assignments):
  (none found)

NON-ROUTED REFERENCES (template embedding):
  Host Route Path  | Host Component  | Template File
  ---------------- | --------------- | ------------------------------------------
  /home            | HomeComponent   | src/app/home/home.component.html:3

Total: 0 routed, 1 non-routed

---

Supported Angular Patterns

The tool recognizes these route configuration patterns:

Pattern	Example
Standalone routes	export const routes: Routes = [...]
NgModule RouterModule	RouterModule.forRoot(routes) / RouterModule.forChild(routes)
provideRouter	provideRouter(routes)
Lazy components	loadComponent: () => import('./x').then(m => m.X)
Lazy modules	loadChildren: () => import('./x').then(m => m.XModule)
Functional guards	canActivate: [authGuard]
Class-based guards	canActivate: [AuthGuard]
Functional resolvers	resolve: { user: userResolver }
Redirect routes	{ path: '', redirectTo: '/home', pathMatch: 'full' }
Wildcard routes	{ path: '**', component: NotFoundComponent }
Named outlets	{ path: 'popup', outlet: 'modal', component: X }
Custom matchers	{ matcher: customUrlMatcher, component: X }
Route titles	{ path: 'about', title: 'About Us', component: X }
Nested children	{ path: 'admin', children: [...] }
Spread arrays	[...featureRoutes, { path: '**', component: X }]

Workspace Support

Workspace Type	Detection	Notes
Angular CLI	angular.json in project root	Single or multi-project
Nx monorepo	nx.json in workspace root	Use --app to select the target app
Fallback	package.json with @angular/core	Scans from project root

For Nx monorepos, the tool reads tsconfig.base.json path mappings to resolve library imports (e.g., @myorg/shared).

Exit Codes

Code	Meaning
0	Success
1	General error (I/O failure, invalid arguments)
2	Configuration error (not an Angular project, ambiguous Nx app)
3	Component not found or file is not a component
4	No route configurations found in the project

Development

# Run all tests
cargo test

# Lint
cargo clippy

# Format
cargo fmt

# Build optimized release binary
cargo build --release

License

MIT