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.

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.

Step 3

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

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.

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.

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.

Step 6

Create Empty ASP.NET Web Application project.

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.

Step 9

Restore the required packages.

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.

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

TO

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/'

Step 13

Open tslint.json file to make changes.

Step 14

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

Final output