Angular architecture tool
Last updated 10 months ago by samcodex .
MIT · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install ngarch-dev 
SYNC missed versions from official npm registry.


Install ngArch(Angular application architecture tool) as development dependency.


NgArch is an Angular application architecture tool, analyzing the static structure of the Angular application and visually displaying the modules, components, services and data models in multiple diagrams.

  • Activity Diagram/Application Activity Diagram(Architecture View)
  • Use Application Activity Diagram to illustrate the application activity and refer to the Route(s), NgModules and Components involved in the execution of the views.

    It focuses on 1) routes eager and lazy loading flow and 2)view hierarchy(Component's templates and views). It describes the application activity from the app routes to the component views( component templates and its rendered components).

    The activity diagram starts from one NgModule through its routes. Then, shows component hierarchy base on component's template(showing what and how to render component's view)

  • Service Dependency Diagram(Future feature)
  • Uses service dependency injection tree to illustrate the service dependency relationships.

  • Structure Diagram
  • Apply to: (Application/NgModule Metadata/Component Template Render)
    Showing the structure of NgModule and Component, exposing the whole/part relationship of NgModule and Component.
    • To show NgModule what it includes and provides based on NgModule's metadata
    • To show the component's hierarchy based on component template
    Application Structure Diagram starts from AppModule to show complete static application structure.

  • Class Visualizer
  • Apply to: (NgModuleComponentServiceDirectivePipe)
    Showing the class metadata properties, constructor parameters, attributes and methods.

ngArch Architecture Diagrams

ngArch Architecture

Activity Diagram & Structure Diagram(ngArch architecture)

ngArch Module Overview

ngArch PonentDiagramModule structure


  1. install ngarch-dev to an Angular project
npm install ngarch-dev --save-dev
  1. add launch script to package.json
"scripts": {
  "ngarch": "node node_modules/ngarch-server/server",
  1. start ngArch server
npm run ngarch
  1. access ngArch
In browser, enter 'http://localhost:3000'



Current Tags

  • 0.0.2                                ...           latest (10 months ago)

3 Versions

  • 0.0.2                                ...           10 months ago
  • 0.0.1                                ...           10 months ago
  • 0.0.0                                ...           10 months ago
Maintainers (1)
Today 0
This Week 0
This Month 0
Last Day 0
Last Week 0
Last Month 0
Dependencies (46)
Dev Dependencies (0)
Dependents (0)

Copyright 2014 - 2016 © |