ngArch

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.

Description

ngArch(Angular application architecture tool) includes the following parts and projects.

• ngArch server, called ngarch-server, is a node and express application. It parses the Typescript source code and extracts the elements of the Angular application.
(To install, using 'npm install ngarch-server')
• ngArch application, called ngarch, is an Angular 6 application. It visually shows the elements and the structure of the application in multiple diagrams.
(To install, using 'npm install ngarch')
• Dependency package, called ngarch-dev, is Angular project development dependency, which contains server(ngarch-server) and application(ngarch).
(To install, using 'npm install ngarch-dev')

Demo

ngArch Architecture

Structure Diagram

more demos

Contributing

The project is maintained by samcodex

When contributing to this repository, please first discuss the change you wish to make via issue, email, or any other method with the owners of this repository before making a change.

Please note we have a code of conduct, please follow it in all your interactions with the project.

Google JavaScript Style Guide, Angular Style Guide

Getting started

1. Fork the ngArch project

Click on the "fork" button on top to clone your own fork of the ngArch project. It contains ngArch source code and the dependencies, including ngArch-server<br>

2. Install the dependencies

npm install

3. Start ngArch server

npm start ngarch-server
(using port 3000 for websocket)

When the server is running, it first parses the current Angular project which is ngArch application itself.

4. Start ngArch application

npm start
(using port 5200)

5. Access ngArch application in browse

http://localhost:5200

Since ngArch is already parsed, the displaying content is the structure of ngArch itself.
Change the analyzing project from drop down menu on the top.

Use ngArch as development dependency

Install ngArch as development dependency to your Angular project

1. Installation

npm install ngarch-dev --save-dev

2. Add launch script to package.json

"scripts": {
  ...
  "ngarch": "node node_modules/ngarch-server/server",
  ...
}

3. Start ngArch server

npm run ngarch
(using port 3000 for web and websocket)

When the server is running, it first parses the host angular project.

4. Access ngArch application in browse

http://localhost:3000

The displaying content is the structure of your Angular project

License

MIT