How To Set Up Angular2 Development Environment In Visual Studio 2015

Introduction

In this article, we are going to learn how to set up an Angular 2 development environment in Visual Studio and run the project by pressing ctr+F5. We don’t need to run the project from Command Prompt.

Step 1

Install node.js and npm. Both can be done with a single file installation.

Download and install node from this link: https://nodejs.org/en/download/ based on your Windows version. Right-click on "My Computer" >> select Property >> check the bit of operating system.

ANGULAR

 Step 2

Check the version of node installed. For that, open command prompt by pressing Windows+ R key and typing cmd. The command prompt will open; type node -v  and hit Enter.

ANGULAR

 

Step 3

Check the version of npm installed. For that, open the command prompt and type npm -v followed by hitting the Enter key.

ANGULAR

 

Step 4

Install Microsoft Visual Studio 2015 update 3 from http://download.microsoft.com/download/b/e/d/bedddfc4-55f4-4748-90a8-ffe38a40e89f/vs2015.3.com_enu.iso

After installation of VS 2015 update 3, open it and click on Tools >> Options.

ANGULAR

 

Open the project and solution, go to External Web Tools, move $(PATH) on the second position by clicking on the up arrow. This tells Visual Studio to look for an external tool like npm globally, before other external tools.

ANGULAR

ANGULAR

 Step 5


Install TypeScript for Visual Studio 2015 from https://www.microsoft.com/en-us/download/details.aspx?id=48593

For developing Angular 2 applications, we need TypeScript 2.2.0 or later version. To verify TypeScript version, open Visual Studio, click on Help >> About Microsoft Visual Studio and check TypeScript.

ANGULAR

ANGULAR

Step 6

Create Empty ASP.NET Web Application project.

ANGULAR

ANGULAR

 Step 7

Download the "Quick Start Files" from the Angular web site.

 https://github.com/angular/quickstart

Step 8

Copy the required "Starter files" to the web application project.

ANGULAR

 

Step 9

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.
ANGULAR

ANGULAR

ANGULAR

ANGULAR

 Step 10

 

  • Run the project in the "RUN" window, type "cmd" and press Enter.  Change the directory in the command prompt to the directory where you have the web application project.
  • Type "npm start" and press "Enter" key. This launches the TypeScript Compiler (tsc) which compiles the application and waits for changes. It also starts the lite-server and launches the browser where you will see the output - Hello Angular.
  • At this point, open "app.component.ts" file from "Solution Explorer". This file is present in "app" folder in "src" folder. Change the "name" value from "Angular" to "Angular 2!" and you will see the changes reflected on the web page automatically.
  • You can also run it by opening the project location and typing cmd on location bar and pressing enter. It will open directly in the command prompt.

 

ANGULAR

ANGULAR

ANGULAR

ANGULAR

ANGULAR

 Step 11

At the moment, if we run the application from Visual Studio, using F5 or CTRL+F5, we get the message "Loading AppComponent content here ..." but nothing happens beyond that. To be able to run the application using F5 or CTRL+F5, we need to make the following changes. Open index.htm file under source, make some changes as below for running as ctr+F5.

index.html file, change [base href="/"] to [base href="/src/"]

CHANGE

  1. [script src="node_modules/core-js/client/shim.min.js"][/script]  
  2. [script src="node_modules/zone.js/dist/zone.js"][/script]  
  3. [script src="node_modules/systemjs/dist/system.src.js"][/script]  

TO

  1. [script src="/node_modules/core-js/client/shim.min.js"][/script]  
  2. [script src="/node_modules/zone.js/dist/zone.js"][/script]  
  3. [script src="/node_modules/systemjs/dist/system.src.js"][/script]  
ANGULAR

ANGULAR

Step 12

Open systemjs.config.js file makes changes as below. Also, in systemjs.config.js file, CHANGE 'npm:': 'node_modules/' TO 'npm:': '/node_modules/'
ANGULAR

ANGULAR

 Step 13

Open tslint.json file to make changes.

ANGULAR

ANGULAR

 

Step 14

Build the project and run the project by pressing ctr+F5.

Final output

ANGULAR

 

X

Build smarter apps with Machine Learning, Bots, Cognitive Services - Start free.

Start Learning Now