Angular2 - how to start and with which IDE

I had the same problem, because since Angular 2 was released I am looking good freeware IDE which supports Angular 2. I will describe my experience.

NETBEANS

It's very good IDE for Java and quite good for Web development. There is many features that boost your work. I installed plugin Everlaw Typescript that is maintained on github:

Plugin: https://github.com/Everlaw/nbts/releases

Advantages

  • Typescript actions (build, run etc.) are available from project explorer.
  • Plugin can build TS files on save.

Disadvantages

  • Lack of support Angular 2, because this plugin support only typescript.
  • Troubles with intelisense and syntax highlighting in angular template files and ts files.
  • Lack of boilerplate templates for NG2.

ECLIPSE

IMHO Eclipse with Angular2Eclipse plugin now is one of the best IDE for Angular 2 purpose. It is mature solution with many features that boost your work.

Plugin: https://marketplace.eclipse.org/content/angular2-eclipse

Advantages

  • Integration with angular-cli
  • Support for Angular2 syntax inside the component templates.
  • Support for typescript files.
  • Available Angular 2 boilerplate templates.

Disadvantages

IMHO there is no disadvantages.

If you are looking for good tutorial how to configure IDE try this

https://jaxenter.com/angular-2-intellij-netbeans-eclipse-128461.html

VS Code + Angular Language Service

Since angular released language service, I've changed IDE to VS Code. I've worked on eclipse but now I think VS Code is better because is quite faster and more lighter than eclipse with angular addon.

The Angular Language Service is a way to get completions, errors, hints, and navigation inside your Angular templates whether they are external in an HTML file or embedded in annotations/decorators in a string.

You can read more here https://angular.io/guide/language-service

If You want to install that addon, launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.

ext install Angular.ng-template

Addon page https://marketplace.visualstudio.com/items?itemName=Angular.ng-template


1) IDE

I was wondering myself which IDE is the best suited for Angular2.

I'm a big Sublime Text supporter and even tho there's a Typescript plugin ... It didn't feel perfect with Typescript power.

So I tried with my second favourite editor : Atom (+ Typescript plugin). Better BUT no support for auto import (maybe it has some now ?) and also, I had to wait 30s before I get any autocompletion.

Then I tried Webstorm as the company I'm currently working at has some licences. It was great and I was really happy for a month. But using an editor that is not free felt ... weird. I wouldn't use it at home for personal projects, I couldn't recommend it to other people easily. And honnestly, I'm not a super fan of Webstorm interface.

So I gave (another) try to Visual Studio Code that I didn't find so great when I first tried it few months ago. It has seriously evolved and :
- it's simple
- it's complete
   - Code
   - Debugger (remote --> super powerful)
   - Git integration
   - Plugin store
- it has great great Angular2 support
- intellisense is really awesome

I'm using it since a month and so far, I'm really happy and do not feel the need to change.

Just to help you start with good plugins, here's mine : enter image description here

2) Angular 2 : Discover the basics

As you're familiar with AngularJs, I don't know how you felt about the official documentation but I couldn't learn from it. I had to follow many (different) tutorials and then I used to doc once I understood AngularJs.

With Angular2, they understood the challenge to have a great documentation and they pay attention to it since alpha version (even tho it was evolving continuously =) !).

So I'd recommend you to go on https://angular.io and simply read the doc.

It's well done and is not only for advanced user. You will find good tutorials there !

3) How to use Typescript with Visual Studio Code ?

I'd strongly recommend you to use angular-cli for developing an Angular2 app. Not only for simplicity, but because in a community we need to have a basic starter which gives us the ability to have similar structured repo. So we can understand easily the structure of an other project.

Plus, angular-cli handles Typescript compilation for you and you don't have to deal with it in command line or from your IDE.

npm i -g typescript

(no need for typings anymore since Typescript 2.0 !)

npm i -g angular-cli
ng new my-super-project --style=scss
cd my-super-project

Then just run

ng serve

And access to your app at : http://localhost:4200

Angular-cli compiles your Typescript and even your (sccs|sass|less) files.

When you want to deploy your app :

ng serve --prod

Will also minimify JS and CSS.

4) What's next ?

Once you feel more comfortable with Angular2 in general, I'd strongly recommend you to learn (more) about
- Redux
- RxJs

And once you're familiar with those concepts, you should start playing with ngrx.

Good luck in this long (and awesome) journey !

I've released an ngrx starter! For those familiar with Redux and willing to discover angular and/or ngrx it might help you get started! I'm sure it might also be a good idea to use this template as a starter for any kind of ngrx project (small, medium or even large!). I tried to describe in the Readme how to use it and there is plenty of comments into the code itself: https://github.com/maxime1992/angular-ngrx-starter

Tags:

Ide

Angular

Recent Posts