How To Setup Angular 2 With Visual Studio 2015

Rahul Saraswat
7y
33.1k
0
7

Article

This article describes the step-by-step solution to set up Angular 2 with your Visual Studio 2015 IDE. This is for those who love Visual Studio as IDE.

Prerequisites

Node JS
Node.js is required to setup this project. To install node.js, use this link here. Make sure that node version is 4.6.x or greater. To check the node version on your system, open command prompt and type the below command.

node - v

NPM (Node Package Manager)
NPM is also required to setup this solution. Make sure NPM version must be 3.x.x or greater. To check the NPM version on your system, open command prompt and type the below command,

npm - v

Visual Studio 2015 Update 3
Visual Studio with update 3 is required for this setup as earlier versions of VS do not follow the best practices for developing applications with TypeScript.

To check Visual Studio version installed on your system, go to Help Menu -> About Microsoft Visual Studio

If you do not have VS 2015 with update 3, click here to install.

Typescript
TypeScript for Visual Studio is also required to setup this solution. Make sure TypeScript version must be 2.2 or greater. To check the TypeScript version on your system, Click on Help menu in Visual Studio and select About Microsoft Visual Studio,

To install TypeScript with Visual Studio 2015, click here

Configure External Web Tools in Visual Studio
It is required to configure Visual Studio to use the global external web tools instead of only those tools which come with visual studio.

To configure it, Please follow the below steps,

Go to Tools menu and click on Options.
In the left tree, Select Project and Solutions and then External Web Tools
In the right location window, Move the $(PATH) entry above the $(DevEnvDir)\....\External
Click ok to close the window and restart visual studio.

Now the visual studio is ready for step-by-step setup.

Setup Angular 2 files with Visual Studio

Step 1. Create Empty ASP.NET Web Application project

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

Step 2

Download the Angular QuickStart files from Github using below link. Download and extract the folder.

Step 3

Copy the required files (mentioned below and also shown in below screenshot) from QuickStart Files folder and paste to your just created web application project.

src folder and it’s all contents
bs-config.json file
package.json file
tslint.json file

Angular

Copy these above files and paste into your web application root directory. Now click on show all files in the solution explorer and right click on all those folder and files which you just pasted to your web app project.

Angular

While including above files in your project, if you get a window like below, then click “No”.

Angular

Step 4. Restore the packages

In the "Solution Explorer" right click on "package.json" file and select "Restore Packages" from the context menu.

Angular

After the restoration is complete, you will see a message "Installing Packages Complete" like below,

Angular

To see all the installed node modules, click on "Show All Files" in Solution Explorer.

Note

DO NOT include "node_modules" folder in the project.

Step 5. Build and run the project with Visual Studio F5

Firs, make your index.html file as your start up page. Right click on src/app/index.html file in the Solution Explorer and select option “Set As Start Page”.

To run your Angular project using Visual Studio via F5, you need to do the following changes –

Change the base path from <base href=”/”> to <base href=”/src/”> in the html file under src/app folder.
Change the scripts also to use /node_modules with a slash instead of node_modules without the slash in the html file.
Change the NPM path from node_modules/ to /node_modules/ in the src/systemjs.config.js file.

Post above changes, Build the solution using Ctrl+Shift+B.

If you see the below compile error message while building, you need to do one small change in your tsconfig.json file as a workaround to fix this.

Angular

Open src/tsconfig.json file from the Solution Explorer and do the following highlighted changes,

{
"compilerOptions": {
"target": "es5",
"module": "commonjs",
"moduleResolution": "node",
"sourceMap": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"lib": ["es2015", "dom"],
"noImplicitAny": true,
"suppressImplicitAnyIndexErrors": true,
"noStrictGenericChecks": true
}
}

tsconfig.json

And now clean your solution, rebuild and run your app by F5 to see the following output window in the browser -

Angular
As you saw the output in above index page in the browser, I replaced default message with my following message i.e. “Hello Angular 2 Student Demo” in the src/app/app.component.ts file. See the highlighted line -

import {
Component
} from '@angular/core';
@Component({
selector: 'my-app',
template: `<h1>Hello {{name}}</h1>`,
})
export class AppComponent {
name: string = 'Hello Angular 2 Student Demo';
}

How Visual Studio compile Typescript to JavaScript without re-run your project, when changes are saved?

Let’s take the same above example -

When you change the above message under name variable in app.component.ts file, save changes and reload the web page. Notice, we do not see the changes on the web page. If you run the application again by F5 or Ctrl + F5, you can see the changes now in the browser.

The reason is, Typescript is not compiled to JavaScript until we re-run the application by Ctrl + F5 or F5. If you want Visual Studio to compile Typescript to JavaScript when changes are saved, you need to include the following highlighted settings in the src/tsconfig.json file in the solution explorer -