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..”
# 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