https://github.com/politie/ngmodule-viz

Visualize the dependencies between the NgModules in your Angular 2+ application
https://github.com/politie/ngmodule-viz

angular angular2 angular4 dependency-graph graph ngmodule typescript visualization

Last synced: 8 months ago
JSON representation

Visualize the dependencies between the NgModules in your Angular 2+ application

• Host: GitHub
• URL: https://github.com/politie/ngmodule-viz
• Owner: politie
• License: apache-2.0
• Created: 2017-03-02T14:50:20.000Z (over 8 years ago)
• Default Branch: master
• Last Pushed: 2017-05-16T07:34:15.000Z (over 8 years ago)
• Last Synced: 2025-03-18T09:46:11.258Z (8 months ago)
• Topics: angular, angular2, angular4, dependency-graph, graph, ngmodule, typescript, visualization
• Language: HTML
• Size: 1.96 MB
• Stars: 40
• Watchers: 6
• Forks: 4
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• angular-awesome-list - NgModule-Viz

README

          
# NgModules visualization 

[![npm version](https://badge.fury.io/js/ngmodule-viz.svg)](https://badge.fury.io/js/ngmodule-viz)

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

## Usage

* Install the tool: `npm install ngmodule-viz -g`.

### Generate dependency information

* Run `ngmodule-viz  `, where:

  * `` points to your Angular 2+ app (e.g. /Users/johndoe/ui-dashboard) 

  * `` 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 `` dir.

* Open http://localhost:8080/

* Enjoy the graph of your NgModules!

## Example

Let's visualize the NgModules in this [angular2-realworld-example-app](https://github.com/gothinkster/angular2-realworld-example-app).

* `git clone https://github.com/gothinkster/angular2-realworld-example-app`

* `ngmodule-viz angular2-realworld-example-app/ .`

* `http-server`

* open http://localhost:8080/ and you'll see this:

![ngmodule-viz demo](https://github.com/politie/ngmodule-viz/blob/master/demo/ngmodule-viz-demo.gif "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.

## Building

* 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.