When working on large Angular projqects, managing dependencies between files and modules can become a challenge.

Here are 2 tools to help you visualize dependencies in an Angular project.

Madge – visualizes typescript dependencies

• https://www.npmjs.com/package/madge
• Install: npm install -g madge
  • I got an error and had to install grahpviz for windows from here first: https://graphviz.gitlab.io/download/
  • Then restart the command promt
• In root folder of project, run:
npx madge src/main.ts --ts-config tsconfig.json --image ./deps.png
  Above will output the image “deps” in the root of project.
• Can also be run for any typescript class, e.g. a single component such as:
  npx madge src/app/app.component.ts --ts-config tsconfig.json --image ./deps.png

• Detect circular dependencies:
  npx madge --circular src/main.ts--ts-config tsconfig.json

• Detect dead code (code that is never referred to anywhere in your app):
  npx madge --orphans src/main.ts --ts-config tsconfig.json

Compodoc – “The missing documentation tool for Angular..”

https://compodoc.app/

# Install globally compodoc with npm
npm install -g @compodoc/compodoc

# Create a file named tsconfig.doc.json in project root, containing: 
{
"include": ["src/**/*.ts"]
}

# Run compodoc in your project root and serve it on http://127.0.0.1:8080 (will output html based documentation in ./documentation path.
npx compodoc -p tsconfig.doc.json -s

Above was created by ChatGPT 2025-06-13