How To: Visual Studio 2015 & Angular 2

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.
open-website

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

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:
contextimage

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

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.

running

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!

Tweet Post Share Update Email RSS

Hi, I'm Shayne Boyer, I write this site, work on ASP.NET Core content and Open Source, speak at national and community events while helping teams architect web and cloud applications.

Tags:
angular2 vs2015