Angular Augury - image

Augury, Rangle’s Chrome Developer Tool extension, allows developers to look deeply into their Angular 2 application by visualizing their component tree and the data associated with it.

The idea for the tool was born in 2015 when Bradley Green, head of AngularJS, was looking for partners to work with Google on tools for Angular applications. Rangle jumped on the opportunity and a few developers began working on the tool while Angular 2 was still being developed.

Initially named 'Batarangle,' Augury was officially launched by May 2016. Since its launch, the tool has been downloaded over eleven thousand times, and is now available without charge in the Chrome Store.

Igor Kamenetsky, Sumit Arora and Vanessa Yuen presented a talk and demo of Augury at its official launch during ngConf in Salt Lake City. They covered the application and its insights, plus a future road map of the project, and held an in-depth workshop exploring all of the official Angular 2 tool’s features.

Sumit, a member of Rangle’s Augury team, explained the three main problems Augury has successfully solved:

  • Visualizing a tree of components in an Angular 2 application;
  • Getting insight on an application using debugging tools; and
  • Helping developers easily understand the internals of Angular 2 applications.

Prior to launch, the team had to take into consideration the set of basic features required for completion, as well as work with Beta Angular 2 in order to achieve a stable build.

Augury's creators say they love being able to visualize tree components in Angular 2 applications, the dependency graph for dependency injection in Angular 2, and other features of the tool. Another anticipated feature they’re excited about is a router graph for all routes in the application.

“We hope to offer a way to measure performance in an Angular 2 application..." says Vanessa, "How exactly Augury will evolve largely depends on the community and the feedback we get.”

“The community is especially excited about the visualizations Augury offers. Someone at ngConf told me they used to draw mental graphs, but Augury just offloaded that work from their brain and packaged it into nice-looking visualizations,” says Vanessa.

Although the Augury community is small at this early stage, Vanessa says it's constantly growing, little by little. “It’s rewarding to see Augury gain traction.”

As an open-source effort, Augury creators want feedback from the community.

“We really want community participation, and as we add more features there will be more demos,” Sumit says.

So far his favourite part of working on Augury was teaming up with the Angular Core team at Google and creating the Injector Tree, which is a challenging area for developers starting on Angular 2 applications.

“I feel I’m helping developers to not only deeply understand their Angular applications, but also helping them transition to Angular 2 easily.”

Find out how you can start using and contributing to Augury by visiting