Commandline tool to visualize the dependencies between the @NgModules in your Angular 2+ application.
- Install the tool:
npm install ngmodule-viz -g
.
- 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.
- Start a http-server (
npm install -g http-server
followed byhttp-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 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:
- 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. Ornpm run build:watch
to keep the typescript compiler running during development.