{"id":2337,"date":"2025-08-15T01:38:13","date_gmt":"2025-08-15T08:38:13","guid":{"rendered":"https:\/\/www.angulartraining.com\/daily-newsletter\/?p=2337"},"modified":"2025-08-15T01:38:14","modified_gmt":"2025-08-15T08:38:14","slug":"visualizing-internal-dependencies-with-madge","status":"publish","type":"post","link":"https:\/\/www.angulartraining.com\/daily-newsletter\/visualizing-internal-dependencies-with-madge\/","title":{"rendered":"Visualizing internal dependencies with Madge"},"content":{"rendered":"\n

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.<\/p>\n\n\n\n

Here is how to give it a try:<\/p>\n\n\n\n

    \n
  1. Install madge: npm install -g madge<\/code><\/li>\n\n\n\n
  2. In the root folder of your project, run: npx madge src\/main.ts --ts-config tsconfig.json --image .\/deps.png<\/code><\/li>\n<\/ol>\n\n\n\n

    This command will go through your entire application and create a dependency graph as an image in deps.png<\/code>:<\/p>\n\n\n\n

    \"\"<\/figure>\n\n\n\n

    <\/p>\n\n\n\n

    This can be used to identify circular dependencies, visualize relationships between your different components and services, and identify spaghetti code scenarios.<\/p>\n\n\n\n

    Note that Madge has other specific commands, such as one to detect circular dependencies:
    npx madge --circular src\/<\/code>main.ts --ts-config tsconfig.json <\/code><\/p>\n\n\n\n

    Or that one to detect dead code (code that is never referred to anywhere in your app):<\/p>\n\n\n\n

    npx madge --orphans src\/main.ts --ts-config tsconfig.json<\/code><\/p>\n\n\n\n

    You can find more information on Madge’s NPM page<\/a> here.<\/p>\n","protected":false},"excerpt":{"rendered":"

    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: This command will go through your entire application […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4,21,31,17],"tags":[],"class_list":["post-2337","post","type-post","status-publish","format-standard","hentry","category-angular","category-architecture","category-best-practices","category-tools"],"aioseo_notices":[],"aioseo_head":"\n\t\t\n\t\n\t\n\t\n\t\n\t\n\t\n\t\t