Setting up AngularJS 2.0 in Visual Studio

How to setup Angular 2.0 in Visual Studio setp by step

Category: AnglarJS Tags: AnglarJS2

Installation Steps

        In this tutorial, we are discussing on tools required and steps to setup AngularJS 2.0 in Visual Studio

Step1: Install Node.js and NPM
1.  Node version 4.6x or greater: To develop AngularJS apps we need Node V4.6 or greater
2.  To get the latest version of Node.js refer the below link
3.  To know for which version windows we need to download Node.js then follow the below step
a.  Open Run window and type msinfo32 then it opens the below screens



Verify the System Type from above screen and if your system is 64-bit then System Type is “x64-based PC” and if your system is 32-bit the System Type is “x86-based PC”
4.  To check the version of node.js installed, open command prompt and run the command  node -v
5.  Install npm 3.x.x or greater: To develop AngularJS apps we need or npm 3.x.x or  greater
6.  To check the version npm installed, open command prompt and run the command  npm –v

Step2: Install Visual Studio 2015 update 3

To verify the visual studio version then open Visual Studio then go to menu Helpà About Microsoft Visual studio



Note: If Visual Studio Update 3 is installed then it displays the “Update3” as mentioned in the above screen. In-case Update 3 is not displayed in the above screen then install Visual Studio update3

Step3: Configure visual studio environment settings for Nodejs and Npm
1.  Open options from visual studio



2.  Make sure $(PATH) is above to $(DevEnDir) options. In case if $(PATH) is below to $(DevEnDir) options then move above to $(DevEnDir) options and click on “OK” button as shown above figure.

Step4: Install TypeScript for Visual Studio 2015
1.  To develop AngularJS 2.0 applications, TypeScript 2.2.0 or greater version is required.
2.  To verify the version of Typescript has been installed then follow the below steps



Note: If the TypeScript version is below 2.2.0 then download the latest version of TypeScript from the below link

Step5: Create Empty Asp.Net web application project
1.  Create a new empty web application




Step 6: Download “Quick Start Files” from Angular website mentioned below


Step7: Copy required “Starter Files” to the web application project
1.  Extract the zip file downloaded in step6 and copy the below selected files / folders from extracted folder and paste in root folder of web application as shown below

2.  Open web application folder. Right click on project and select “Open Folder in File Explorer” as shown below


3.  Paste the selected files from above screen and paste it in folder as shown below


4.  Click on “Show All” files icon in solution explorer and it will displays all the files which we have added to project folder as shown below


5.  Select app newly added files and right click and then click on “Include In Project”
Note: When we click on “Include in Project” then we will get a prompt for “TypeScript” then click on “No”



Step8: Restore the required package
1.  To do this right click on “package.json” file and click on “Restore Packages” as shown below
2.  After clicking on this button , please observe “Output” window



Note: After this command executed we should get an success message like ====npm command completed with exit code 0====

Like 1 Person
Last modified on 11 October 2018
Venkatesh Velpula

Venkatesh Velpula
Atricles: 2
Questions: 0
Given Best Solutions: 0 *


Nikhil Joshi
Nice Article.. Keep it up
Like 0 People on 27 August 2017

You are not loggedin, please login or signup to add comments:

Existing User

Login via:

New User