NgRev – Analyze and Profile your Angular App

| By Maina Wycliffe | | | Angular

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):

ngRev - Start Window

  1. Open the ngRev Application
  2. Click on the open project button (big large blue button at the center of the application)
  3. Navigate to your project folder and select tsconfig.json located inside the src folder inside the project folder.
  4. Now you can navigate through your project graphically.
Augury – A Tool to Debug and Profile your Angular App

Augury is an open source tool available to Google Chrome that was developed by Google in conjunction with Rangle.IO for debugging and …

Read More
Angular 5 – Handling Token Based Authentication

Token based authentication is popular for single page applications. A token is a security code issued by a server for authenticating and …

Read More
How to build a HTTP Interceptor in Angular 5

Introduction A HTTP Interceptor enables you to catch HTTP requests and responses so that you can modify them. It is very useful especially …

Read More
Image Sliders and Carousels for Angular 4

Web developers require from time to time to create different types of images sliders and carousel in their apps. Most developers coming from …

Read More
How to upgrade your Angular 4 App to Angular 5.0

Angular 5 was finally released earlier this week after several delays. It brings a lot of improvements over Angular 4 and new features as …

Read More
Angular 5 has been released

Angular 5 was finally released after several delays yesterday, November 1, 2017. It was also accompanied by Angular CLI 1.5. This is a major …

Read More