Getting Webstorm to work with Angular2, and TypeScript

Wednesday, September 2, 2015

Update: I have updated this post with new information at the bottom about WebStorm 11 EAP

Well, I finally found the time to start looking into Angular 2, so naturally I went to the website to do the quick start demo. I got it working but I did have a some hangups getting my IDEs (yes that plural) to work with Angular 2. This is understandable considering at this writing Angular 2 is in "Alpha".

The quickstart I am doing is located on the Angular 2 site.

Get the Correct Version

First off, by default, Webstorm runs TypeScript 1.4, so you are going to have to get the latest version of the typescript via NPM.

$ npm install -g tsc

The current version as of this writeing is 1.5.3.

Once it is install you will neet to tell Webstorm to use this version.

TypeScript Languages and Preference settings - Sett the bin folder location

Run the Correct Command Parameters

Once you have the correct version, Webstorm will still complain about the attributes. So you will need to tell it the following:

  • What module system you are using. In this case I am using "system".
  • You will need to tell it what version of JavaScript to compile to. I am compiling to "ES5"
  • Next to prarameters take care of the decorators of the class statment.

Webstorm Typescript settings - setting the command parameters.

After that, following the directions on the quickstart example, everything worked fine.

 

Update:

With Webstorm 11 EAP you can now use the tsconfig.json file to tell Webstorm what TypeScript settings to use.

I just installed version 11 EAP:

WebStorm Version 11 EAP Logo

Notice, Webstorm now uses TypeScript 1.5.3.

TypeScript settings for WebStorm in version 11EAP

Also, you can now tell WebStorm to use your tsconfig.json file that is in the root of your project.

 

 

comments powered by Disqus