When working on large Angular projects, managing dependencies between files and modules can become a significant challenge. Madge is a developer tool that visualizes and analyzes module dependencies in JavaScript applications, making it an excellent companion for Angular developers.
Here is how to give it a try:
- Install madge:
npm install -g madge - In the root folder of your project, run:
npx madge src/main.ts --ts-config tsconfig.json --image ./deps.png
This command will go through your entire application and create a dependency graph as an image in deps.png:
This can be used to identify circular dependencies, visualize relationships between your different components and services, and identify spaghetti code scenarios.
Note that Madge has other specific commands, such as one to detect circular dependencies:npx madge --circular src/main.ts --ts-config tsconfig.json
Or that one to detect dead code (code that is never referred to anywhere in your app):
npx madge --orphans src/main.ts --ts-config tsconfig.json
You can find more information on Madge’s NPM page here.
