Setting up Angular 2 in Visual Studio

Suggested Videos
Part 1 - Introduction to Angular 2 | Text | Slides

In this video we will discuss how to set up Angular 2 in Visual Studio.

Step 1 : The first step is to install Node.js and npm. It is recommended that you have node version 4.6.x or greater and npm 3.x.x or greater. To check the versions that you have on your machine type the following commands in a command window.
node -v 
npm -v



You can get the latest version of Node.js from the following website. Click on the correct download link depending on the Operating System you have.
https://nodejs.org/en/download/

I have Windows 64 bit Operating system, so I have downloaded 64 - bit windows installer.



To find out if you have 32 - bit or 64 - bit operating system 

1. Click the Start icon , 
2. Type "System" in the Start Search box, and then click System Information in the Programs list.
3. Select "System Summary" 
4. In the right pane if 
• System type is x64-based PC, then you have 64-bit operating system
• System type is x86-based PC, then you have 32-bit operating system

Step 2 : Make sure you have Visual Studio 2015 Update 3 installed. To check the version of Visual Studio you have click on the "Help" menu and then select "About Microsoft Visual Studio". The following are the download links if you don't have Visual Studio 2015 Update 3.

Visual Studio Enterprise 2015 - Update 3
Visual Studio Professional 2015 - Update 3
Visual Studio Community 2015 - Update 3



Step 3 : Configure environment settings for node and npm in Visual Studio

1. In Visual Studio click on Tools - Options.
2. In the "Options" window, expand "Projects and Solutions" and select "External Web Tools"
3. In the right pane, move the global $(PATH) entry to be above the internal path $(DevEnvDir) entries. This tells Visual Studio to look for external tools (like npm) in the global path before the internal path.
4. Click "OK" to close the "Options" window and then restart Visual Stduio for the changes to take effect

Step 4 :  Install TypeScript for Visual Studio 2015

1. To develop Angular applications you need TypeScript 2.2.0 or later
2. To check the version of TypeScript, clik on the "Help" menu in Visual Studio and select "About Microsoft Visual Studio"
   
   
   
3. Download and install the latest version of TypeScript for Visual Studio 2015 from the following URLhttps://www.microsoft.com/en-us/download/details.aspx?id=48593
4. After installing TypeScript, the installation wizard prompts you to restart Visual Studio. So, please restart Visual Studio for the changes to take effect.

Step 5 : Create Empty ASP.NET Web Application project

1. Run Visual Studio as Administrator
2. Click on File - New Project
3. Select "Web" under "Visual C#". From the right pane select "ASP.NET Web Application"
4. Name the project "Angular2Demo"
5. On the next screen, select "Empty" template and click "OK"

Step 6 : Download the "Quick Start Files" from the Angular web site using the link below. Extract the contents of the downloaded .ZIP folder.
https://github.com/angular/quickstart

Step 7 : Copy the required "Starter files" to the web application project

We do not need all the starter files that we downloaded. As you can see from the image below, we need 4 folders/files

• src folder and it's contents
• bs-config.json
• package.json
• tslint.json

Copy the above files/folders and paste them in the root directory of "Angular2Demo" web application project. Now click "Show All File" icon in "Solution Explorer" and include all the copied files/folders in the project. At this stage your project structure in Visual Studio should be as shown below.



When including the files in the project if you get a prompt to "Search for Typescript Typings" click "No"


Step 8 : Restore the required packages. 
In the "Solution Explorer" right click on "package.json" file and select "Restore Packages" from the context menu. This takes a few minutes to load all the modules. You can see the status in "Visual Studio Output" window. After the restoration is complete, you will see a message "Installing Packages Complete". To see all the installed node modules, click on "Show all Files" icon in Solution Explorer. DO NOT include "node_modules" folder in the project.



Step 9 : Run the project

1. In the "RUN" window type "cmd" and press enter
2. Change the directory in the command prompt to the directory where you have the web application project. I have my web application project in "C:\Angular2Demo\Angular2Demo". So I have typed CD C:\Angular2Demo\Angular2Demo and upon pressing the enter key I am in the root folder.
3. Type "npm start" and press "Enter" key
   
4. This launches the TypeScript compiler (tsc) which compile the application and wait for changes. It also starts the lite-server and launches the browser where you will see the output - Hello Angular.
5. At this point, open "app.component.ts" file from "Solution Explorer". This file is present in "app" folder in "src" folder.
6. Change "name" value from "Angular" to "Angular 2!" and you will see the changes reflected on the web page automatically.

At the moment we do not have the capability to run the project by pressing F5 or CTRL + F5. We will discuss how to do this in our next video.