Angular2 - how to start and with which IDE
Solution 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
Solution 2:
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