NgRev is a graphical tool designed to reverse engineer your Angular application. It is not a browser extension like Augury, but a standalone software available for MacOS, Windows and Linux. It does a static code analysis of your application and doesn’t require your application to be built (compiled) to use it. The tool allows you to navigate in the structure of your application and observe the relationship between the different modules, providers and directives. This can be helpful if you wish to get up to speed on a new project by seeing how it build.
The one downside I found was that it stopped working with my application when I upgraded to Angular 5 application. I have used it on several of my projects in Angular 4 and it was working fine though. May be an update will be released soon to make it compatible with Angular 5 and Angular CLI 1.5. You can follow the issue raised on the apps Github page here.
If you would like to try out NgRev, please go to this link and download the app for your operating system. Install the downloaded application, if you are stuck with installation, follow these detailed instructions located on their github page.
How it works
First, your application needs to be compatible with Angular AOT (Ahead of Time) Compiler. When using Angular, some people compile their application without AOT. It is faster but also ignores lots of errors – I learned that the hard way. To build with AOT, all you need to do is add the -aot flag when serving or building your app.
ng server -aot or ng build -aot
If your app is compatible follow the following instruction (Works for both Angular CLI and Angular Seed Project):
- Open the ngRev Application
- Click on the open project button (big large blue button at the center of the application)
- Navigate to your project folder and select tsconfig.json located inside the src folder inside the project folder.
- Now you can navigate through your project graphically.