Skip to content
Visualize the dependencies between the NgModules in your Angular 2+ application
HTML TypeScript CSS JavaScript
Branch: master
Clone or download
Type Name Latest commit message Commit time
Failed to load latest commit information.

NgModules visualization

npm version

Commandline tool to visualize the dependencies between the @NgModules in your Angular 2+ application.


  • Install the tool: npm install ngmodule-viz -g.

Generate dependency information

  • Run ngmodule-viz <input> <output>, where:
    • <input> points to your Angular 2+ app (e.g. /Users/johndoe/ui-dashboard)
    • <output> to the dir where the visualization should be placed (e.g. your current working dir)
  • The tool outputs a ngmodules.json file with all the dependencies between your NgModules. It also outputs an index.html for visualising these dependencies.

Visualize dependency information

  • Start a http-server (npm install -g http-server followed by http-server) in your <output> dir.
  • Open http://localhost:8080/
  • Enjoy the graph of your NgModules!


Let's visualize the NgModules in this angular2-realworld-example-app.

  • git clone
  • ngmodule-viz angular2-realworld-example-app/ .
  • http-server
  • open http://localhost:8080/ and you'll see this:

ngmodule-viz demo

Jenkins integration

  • Run ngmodule-viz in your Jenkins pipeline
  • Use the HTML publisher plugin to publish the resulting html file
  • To avoid CORS issues disable Jenkins CSP using the Jenkins CLI: System.setProperty("hudson.model.DirectoryBrowserSupport.CSP", ""). WARNING: the latter assumes you have otherwise secured your Jenkins instance. Don't execute this on public instances.


  • Clone this project
  • Install typescript: npm install -g typescript
  • Run npm run build to compile the typescript to javascript. Or npm run build:watch to keep the typescript compiler running during development.
You can’t perform that action at this time.