How To Setup Angular 2 With Visual Studio 2015

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,

1. Go to Tools menu and click on Options.
2. In the left tree, Select Project and Solutions and then External Web Tools
3. In the right location window, Move the $(PATH) entry above the $(DevEnvDir)\....\External
   
   
   
   
4. 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

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 "Angular2StudentDemo"
5. 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

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.



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



Step 4. Restore the packages

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



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



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 –

1. Change the base path from <base href=”/”> to <base href=”/src/”> in the html file under src/app folder.
2. Change the scripts also to use /node_modules with a slash instead of node_modules without the slash in the html file.
3. 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.



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 - 


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 -

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

Now Typescript is automatically compiled to JavaScript when changes are saved.

Note

To read more articles on Angular 2, please check out below links,

• Difference between AngularJS and Angular 2
• Learn Angular 2 *ngFor Directive
• trackBy with *ngFor Directive in Angular 2 and other local variables

Write me in comment box in case you have any questions or concerns. Have a great day!