Angular2 - how to start and with which IDE
AngularIdeAngular Problem Overview
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.
Angular Solutions
Solution 1 - Angular
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
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 - Angular
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