Setup Visual Studio 2015 for Angular2

I’ve recently started in a new job which requires knowledge of TypeScript and Angular2 and would like to share my findings on setting up the tools for this.

The following is based on a great guide by Cory Rylan which can be found at his blog and several post on StackOverflow and misc Google results.

What to install and configure

NodeJS

Download it from this location and make sure you choose the Current version (v6.3.0 as this is written). Install when you have downloaded it.

Visual Studio 2015

Download it via your msdn account or get the community edition from this location.

Select the following Features during install

After the installation has finished, open Visual Studio and navigate to Tools > Options > Projects and Solutions > External Web Tools and set it up as the following image shows. This is to make Visual Studio use the latest NodeJS instead of the build-in older version.

visual-studio-set-up-nodejs-version

Python

Download it from this location and choose the 2.7.xx version. After installing, run the following commands in a Command Prompt to configure NPM.

NPM Task Runner extension for Visual Studio (optional)

Download it from this location. This will allow you to run scripts configured in package.json inside Visual Studio.

TypeScript for Visual Studio

Download it from this location or search for it in Tools > Extensions and Updates in Visual Studio.

After installing it, replace typescriptservices.js located at C:\Program Files (x86)\Microsoft Visual Studio 14.0\Common7\IDE\CommonExtensions\Microsoft\TypeScript\typescriptServices.js with the one available at https://raw.githubusercontent.com/Microsoft/TypeScript/Fix8518-U3/lib/typescriptServices.js. This is in order to avoid errors like Invalid module name in augmentation (see this Stack Overflow post regarding this) NOTE: The one I’ve linked to is for Visual Studio 2015 Update 3. If you’re using another version you should check the linked Stack Overflow post for info.

Other issues

Behind a proxy?

If you’re behind a proxy, you need to setup NPM and Typings up for this.

NPM in the Command Prompt

You need to run the following commands in a Command Prompt:

NPM in Visual Studio

You need to add the following to machine.config located at C:\Windows\Microsoft.NET\Framework\v4.0.30319\Config

Typings

(this works for both the Command Promt and Visual Studio.)

You need to create a file named .typingsrc in the root folder (same as the one containing the package.json and typings.json). It should contain the following

Visual Studio is chrashing when saving packages.json

You need to right click packages.json and choose Include in Project.

tsc.exe exits with error -1

When this happens the packages.json is often missing as well.

Install Microsoft.TypeScript.MSBuild and Microsoft.TypeScript.Compiler using the NuGet package manager console.

What else?

I’ll try to keep this post updated with my finding as I go along. But do check out the blog post by Cory Rylan I mentioned in the beginning. He does a much better job at explaining why some of the settings are needed.

Have a great time writing Angular2 in Visual Studio 🙂

By the way: Images for this post was taken while following the excellent introduction to Angular2 The Hero Editor at angular.io.

You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *