5 Best IDE for Angular 2

Presenting the List of 5 Best IDE For angular 2 . As we know Our favorite IDE or code editor can become an unparalleled ally when it comes to undertaking an agile workflow entailing TypeScript compilation at runtime, static type checking and introspection, and code completion and visual assistance for debugging and building our app. That being said, let’s highlight some major code editors and take a bird’s eye view of how each one of them can assist us when developing Angular 2 applications. If you’re just happy with triggering the compilation of your TypeScript files from the command line and do not want to have visual code assistance .


Recommended Angular 2 Tutorials

5 Best IDE for Angular 2

Click to Tweet

BEST - Angular 2 ide by Webclipse

The Angular IDE by Webclipse is built specifically for Angular 2. Simple for beginners; powerful for experts. Available as a stand-alone IDE or as part of our Eclipse plugin, Webclipse, or our robust Full Stack IDE, MyEclipse 2017.

  • TypeScript 2.0 validation and debugging
  • Advanced coding of HTML templates with validation and auto-complete
  • Integrated usage of the angular-cli for Angular best practices
  • Optimized for developers to make the most of Angular

This IDe supports Advanced editing of TypeScript 2.0 by Angular IDE augments your development simply and effectively.

  • Real-time validation and display of errors as you type code
  • Auto-completion of code across your project
  • Syntax-aware source coloring and occurrence highlighting
  • Block and full-file formatting with advanced settings
  • Built first for tsconfig.json management


1 - sublime text 3

Sublime Text is a sophisticated text editor for code, markup and prose.
You'll love the slick user interface, extraordinary features and amazing performance.

 This is probably one of the most widespread code editors nowadays, although it has lost some momentum lately with users favoring other rising competitors such as GitHub's very own Atom. If this is your editor of choice, we will assume that it's already installed on your system and you also have Node (which is obvious, otherwise, you could have not installed TypeScript in first place through NPM). In order to provide support for TypeScript code editing, you need to install Microsoft's TypeScript plugin,available at

Once successfully installed, it only takes Ctrl + space bar to display code hints based on type introspection (see the following screenshot). On top of that, we can trigger the build process and compile the file to the JavaScript we are working on by hitting the F7 function key. Real time code error reporting is another fancy functionality you can enable from the command menu.

Sublime Text is available for OS X, Windows and Linux. One license is all you need to use Sublime Text on every computer you own, no matter what operating system it uses. Sublime Text uses a custom UI toolkit, optimized for speed and beauty, while taking advantage of native functionality on each platform.

2 - Atom editor

Developed by GitHub, the highly customizable environment and ease of installation of new packages has turned Atom into the IDE of choice for a lot of people. It is worth mentioning that the code examples provided in this dunebook were actually coded using Atom only.

In order to optimize your experience with TypeScript when coding Angular 2 apps, you need to install the Atom TypeScript package. You can install it by means of the APM CLI or just use the built-in package installer. The functionalities included are pretty much the same as we have in Sublime after installing the Microsoft package: automatic code hints, static type checking, code introspection, or automatic build upon save to name a few. On top of that, this package also includes a convenient built-in tsconfig.json generator.

Atom is a text editor that's modern, approachable, yet hackable to the core—a tool you can customize to do anything but also use productively without ever touching a config file

3 - Visual Studio code

Visual Studio Code, a relatively new code editor backed by Microsoft, is gaining momentum as a serious contender in the Angular 2 medium, mostly because of its great support for TypeScript out of the box. TypeScript has been, to a greater extent, a project driven by Microsoft, so it makes sense that one of its popular editors was conceived with built-in support for this language. This means that all the nice features we might want are already baked in, including syntax and error highlighting and automatic builds.

visual studio code supports syntax highlighting and autocomplete with IntelliSense, which provides smart completions based on variable types, function definitions, and imported modules.

4 - WebStorm

This excellent code editor supplied by IntelliJ is also a great pick for coding Angular 2 apps based on TypeScript. The IDE comes with built-in support for TypeScript out of the box so that we can start developing Angular 2 components from day one. WebStorm also implements a built-in transpiler with support for file watching, so we can compile our TypeScript code into pure vanilla JavaScript without relying on any third-party plugins.

WebStorm helps you write code better thanks to the smart code completion, on-the-fly error detection, powerful navigation and refactoring , The IDE provides first-class support for JavaScript, Node.js, HTML and CSS, as well as their modern successors. Supported frameworks include AngularJS, React, Meteor and more.


The singular purpose of removing all barriers of entry into TypeScript.

  • A complete dev and analysis environment for TypeScript
  • Easy to install npm install alm -g
  • Easy to use: alm

This project is also a demonstration on real world usage TypeScript + React + Redux + Socket IO + FreeStyle (CSSinJS) + Microsoft Monaco. If you want to experiment with these and create your own code editor, head on to the source code

Quick tip For using Gulp with other IDEs

May be your IDE is not listed here and you do not want to switch from your favorite code editor now, not having the chance, for whatever reason, to automate TypeScript compilation for your project. Or perhaps you do not feel very comfortable messing around with the TypeScript commands on the console.

If this is not the case, feel free to skip to the next section. However, if you relate to this case scenario, don’t worry. Modern JavaScript task runners have your back. Let’s pick Gulp (http://gulpjs.com) and see how we can create a super simple script to automate TypeScript compilation in our project.

First, let’s proceed with the dependencies installation. Basically, we will install Gulp and then gulp-typescript, a typescript compiler for gulp with incremental compilation support. On your console window, type the following commands:

$ npm install -g gulp
$ npm install gulp gulp-typescript --save-dev

Let’s create a JavaScript file named gulpfile.js at the root of your project with the following content:

var gulp = require('gulp');
var ts = require('gulp-typescript');
var tsProject = ts.createProject('tsconfig.json');
gulp.task('build', function() {
var tsResult = tsProject.src().pipe(ts(tsProject));
return tsResult.js.pipe(gulp.dest('./built'));

You will need a tsconfig.json file at the root of your project, so our Gulp task can fetch our compilation preferences from it. From this moment onwards, we can launch the build processing over the files listed at the files’ array property in our tsconfig.json file by executing the following command:

$ gulp build

Unfortunately, the gulp-typescript plugin does not support file watching, so if we want to trigger the build processing automatically every time a TypeScript file change, we need to rely on Gulp’s native watch method. To do so, just add the following chunk of code at the end of our gulpfile.jsfile:

gulp.task('watch', ['build'], function() {
gulp.watch('./**/*.ts', ['build']);

Now, you can launch the build process and watch the file changes by executing the following command:

$ gulp watch

5 Best IDE for angular 2

Click to Tweet

About the author

Deven Rathore

Deven Rathore

Deven rathore is Entrepreneur , Web developer , Blogger and founder and editor of dunebook.com . You can Find Him On facebook and twitter.

  • Rubén López

    Your descriptions suggest that Webstorm and VS code are by far the best editors for Angular+Typscript with advanced code completion and the best understanding of the TS language. However, you rank sublime text and atom higher. Can you elaborate on what makes them better, if anything?

    • Deven Rathore

      Ease of using Them 🙂

      • Rubén López

        I agree, a plain editor is much easier to use and learn than an IDE. But that has nothing to do with Angular2, and your post is about the best IDEs *for Angular2* 🙂

        • Deven Rathore

          exactly , just install a package and start building .& yeah IDE are better then plain editor in term of features . but for beginners we always recommend easy to use tools first .

  • Tim Webb

    Hey! Really nice post. Awesome to see how much interest there is in helping Angular 2 developers.

    We just released Angular IDE by Webclipse, which is a freemium IDE — 8 days per month for free, a great way for people learning Angular 2 or just augmenting their stack to use for free. You can get it standalone from https://www.genuitec.com/products/angular-ide/ or as a plugin via Webclipse.

    Would love to know your thoughts!

    • Deven Rathore

      hi , i have featured your ide . a follow back link in your blog or website will be great . thanks

      • Anabella Watson

        I don’t see it anymore. Angular IDE

        • Deven Rathore

          hi we are updating article 🙂

  • Pingback: Complete Migration guide from Angularjs To Angular2()

  • Pingback: 5 best Javascript IDE & Javascript Editors ( LATEST)()

Pin It on Pinterest


Get the best in web dev

Join dunebook.com and recieve best in web dev , once a week FREE

An email has been Sent to your Inbox ! Please Confirm your Subscription :)