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 & asp.net 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 .

angular2htmlapplication

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

ang2FilesOfProject

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

package

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

commonJs.jpg

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.

angular2editproject.jpg

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

angular2experimentalDecorators.jpg

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

app.component.ts

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

main.ts

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

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 

 <script>

System.config({
packages: {
'app': {
defaultExtension: 'js'
}
}
});
System.import('app/main');

 </script>

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

angular2finalstructure

 

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

firstangularapp
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 *