How To: Visual Studio 2015 & Angular 2

by Shayne Boyer

There has been a few request I have seen lately on how to get an Angular 2 development environment going using Visual Studio 2015.

My recent post "Angular 2 : Getting off the Starting Line" takes the Angular Team's Quickstart and adds a gulp build process, this is the project I'll use for the walkthrough.

First, clone https://github.com/spboyer/ng2-startingline . You can either do this on the command line or within the Visual Studio 2015 Git add in.

Next, File > Open website and select the folder you cloned the project to.

When you open the site, npm restore will automatically start to restore the dependencies from package.json

In order to run the project, the previous post states to use npm start. Within the VS2015 GUI there is no built in way to do this. Luckily there is an add-in available from the gallery.

Use NPM Task Runner Visual Studio 2015 add-in from Mads Kristensen.

After installing, and restarting Visual Studio.

Open Task Runner Explorer by right-clicking the package.json file and select Task Runner Explorer from the context menu:

Now you can see all of the tasks that are declared in package.json

To run the application. Select start and right click and select "Run". The application will compile, and launch your default browser with Browser Sync attached. This will allow you to make changes to the /app/*.ts code and have it automagically compile and the browser will auto-refresh. With your changes.

To quit the process close the tab inside of Task Runner Explorer that was launched with the process.

Saving the solution will provide a *.sln which you can then re-open the project by simply using that file instead of File > Open > Website. Enjoy!