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
https://nodejs.org/en/download
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
https://www.microsoft.com/en-us/download/details.aspx?id=48593


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


  


  


  


Step 6: Download “Quick Start Files” from Angular website mentioned below
https://github.com/angular/quickstart


  


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 asp.net web application as shown below


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


  


3.  Paste the selected files from above screen and paste it in asp.net 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 asp.net 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 *

Comments:

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



x