> > > 3 useful Angular 2 developer tools | Angular 2

3 useful Angular 2 developer tools | Angular 2

Nowadays JavaScript is the most widely used technology for building Web and Mobile based applications. Angular JS is the core reason behind the popularity of JavaScript. It’s time for Angular 2, framework for both Mobile and Web applications. If your are not tried Angular 2 yet, please visit the official site https://angular.io/  for more details. In this write up, we will be talking about couple of angular 2 developer tools which will make Angular 2 life easier.

Visual Studio Code (IDE)

An open source IDE form Microsoft. Angular 2 application are written in Typescript, which is developed by Microsoft on a larger extend. So this make sense for Visual studio code built in support for Typescript. Visual studio code supports syntax, error highlighting and autocomplete for Typescript. And there are plenty of other plugins available for building a better development environment.

Main features of Visual studio code are:

  1. Debug code right from the editor.
  2. Git integration.
  3. Code autocomplete and syntax highlighting.
  4.  Extensive collection of plugins.

For downloading Visual studio code, please visit:


Visual studio code | Angular 2 developer tools


Augury is a Google Chrome developer extension for debugging and profiling Angular 2 applications. It is an open source project, developed by google and rangle.io. Using Augury, we will get details about component trees, router trees and component class properties.



Features of Augury

  • Component Tree

As we know that Angular 2 applications are built on components. So there should be nesting of components to meet that requirements. While nesting the components, it will create a tree structure. So if we need to analyze or understand properties of some of the components, it will be difficult to get the information from code. Here we can use Augury to get the information, by simply selecting the component from Augury console.

Augury Component tree | Angular 2 developer tools

  • Router Tree

Router tree will help us to get information about the routes in our Angular 2 application. Augury will visualize the application route in a tree structure. So it will be easy to understand. By selecting each route in the tree, you will get more information about the same.

Augury Router tree | Angular 2 developer tools



Angular2 CLI

Angular2 CLI help us to create prototype of Angular2 application, which works already and follows the best practices. It provides options to create an application, generate the components, serve and test the application. So using angular-cli we can create a prototype and then we can add our custom functionalities to build the application.

 Angular2 CLI and generated projects have dependencies that require Node 4 or higher and NPM 3 or higer.

we can install angular CLI using the following command:

npm install -g angular-cli 

Then for creating and running project:

ng serve 

Then for accessing the application, please navigate to: http://localhost:4200/.

The application will reload automatically when ever you update the source code.

for adding a new component we just need to run the below command:

ng generate component my-new-component 

ng generate component my-new-component

The same way we can create Directive, Pipe, Service, Class, Interface, Enum and Modules

For more details and options please visit: https://github.com/angular/angular-cli

These are some useful angular 2 developer tools, which mostly used and recommended. we will be back with some useful angular 2 stuffs, please subscribe technobytz.com for any updates.

The following two tabs change content below.

Aravind Radhakrishnan

A smart working techie who is currently working as HTML 5 & Java developer, having sound knowledge in Adobe Flex and Flash. Born and brought up in Kerala. Currently working in Chennai

Leave a Reply

Your email address will not be published. Required fields are marked *


This site uses Akismet to reduce spam. Learn how your comment data is processed.

%d bloggers like this: