Angular 2 Quickstart in Visual Studio 2015

I have decided to write this article because I ve spent a lot of time trying to figure out the correct configuration for angular 2 typescript project in VS 2015.I have already found many articles about angular 2 & core but my intention was to set up angular 2 to a blank html typescript project.

So lets start…

We will use as a road map the official Angular 2 5 min Quickstart .

First of all we have to create a new project: File -> New -> Project .


We select from the TypeScript tab the HTML Application with Typescript option.VS 2015 creates a project with the following files


We will change the structure of the project but first lets add the libraries we need. We add a new json file named package.json and we copy the content of package.json from angular quickstart


VS will get the libraries automatically but it s very possible to see some console errors.Do not worry and continue to the next step: Go to project settings -> TypeScript Build and change Module system to CommonJS


Save and then go and right click to the project and select unload project.Then right click again and select to edit the .proj file.


You have to insert one line that enables experimental decorators,then save and reload the project.


Now we have to create a folder named app.In this folder we add 2 .ts files: app.component.ts and main.ts . We copy their content from angular quickstart


import {Component} from 'angular2/core';
selector: 'my-app',
template: '<h1>My First Angular 2 App</h1>'
export class AppComponent { }


/// <reference path="../node_modules/angular2/typings/browser.d.ts" />
import {bootstrap} from 'angular2/platform/browser';
import {AppComponent} from './app.component';

As you can see in main.ts we have added an extra reference in order to avoid build errors.

In the root folder we erase the app.ts and app.css files and we copy  from quickstart the content of index.html to our blank index.html file. We just make a small but important change 

We replace the Configure SystemJS snippet with the following lines

// Configure SystemJS 


packages: {
'app': {
defaultExtension: 'js'


Finally we add a style.css file and copy its content from angular quickstart. Our final folder and file structure is



The final step is to press CTRL+F5 .Our first Angular 2 + Typescript app in VS 2015 is ready!

Our first angular 2 app


Giorgos Basagiannis

I am a full stack engineer with broad technical skill set. I am passionate about developing high quality software that is scalable and easy to maintain. My main areas of interest include Microsoft Web & Cloud Technologies,JavaScript based frameworks,SharePoint and Office 365.

Leave a Reply

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