Angular2 - how to start and with which IDE

Question

I have used AngularJS 1.x now for a couple of months. Now I will switch to Angular2 (with TypeScript) and actually I am not sure which IDE to use. It is also not clear for me how to compile the TypeScript Code into JavaScript - actually is this necessary? I have read that Visual Studio Code would be a nice editor for Angular2 projects - is there a TypeScript compiler included? I would be glad for any information in this direction.

Answer 1

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 :

---

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