Configuring Angular 2 with Visual Studio 2015

Configuring Angular 2 with Visual Studio 2015

1.       Install Node.js from below Path based on your system requirement.

https://nodejs.org/en/download/

Check which version of node has installed.

It should be 3.x.x.x

2.       Install Visual Studio 2015 Update 3.

You can verify it from 

If you don’t have you can download Visual Studio 2015 Update 3 from below link.

Community

http://download.microsoft.com/download/b/e/d/bedddfc4-55f4-4748-90a8-ffe38a40e89f/vs2015.3.com_enu.iso

Professional

http://download.microsoft.com/download/e/b/c/ebc2c43f-3821-4a0b-82b1-d05368af1604/vs2015.3.pro_enu.iso

Enterprise

http://download.microsoft.com/download/8/4/3/843ec655-1b67-46c3-a7a4-10a1159cfa84/vs2015.3.ent_enu.iso

3.       Configure visual studio for node and npm.

Tools à Options à Projects and Solution à External Web Tools

Changes the Order of left side listed items as like screen.

4.       Need to install type script for Visual Studio 2015.

To work with angularjs 2 you need to have type script 2.2 and above.

You can see the type script version from.

You can install the type script from below path.

https://www.microsoft.com/en-us/download/details.aspx?id=48593

5.       Create an Empty Visual studio application.

Start Visual Studio à select Web Application  à Select template from below window

6.       Download the helper files of angular2 from below path of GIT. Which will help to configure the Angular application.

https://github.com/angular/quickstart

7.       Copy that quick start files that we have downloaded from GIT. We need to copy the below files and paste into root folder of project.

Once you paste into application location click on Icon as “Show all files”. You can see the list of file their.

Include all this files and folder into project.

Right Click on File à Include into Project

When you include the src folder it will as with message as below and click on “No”

8.       Restore the packages of nugget package like below.

One it will install the Packages successfully. You can see the Node Module Folder. ** Don’t include the Node module folder into project.

9.       Run the project from command Window.

-          It launch the type script compiler and compile the code.

-          It will launch the lite server and communicate  to the browser.

-          Than it will launch the browser and we will see the output as below.

Now change the context of the file you don’t need to run the application again it will directly reflect to you browser.

Changed the name as Angular 2

10.   Need to configure the application now so it will run on F5 of visual studio.

Do the changes in index.html

Changes in systemjs.config.js

Changes in tsconfig.json file.

Now set the start page as Index.html.