During last couple of months, I have received a lot of requests how to use angular2 in ASP.NET MVC in visual studio environment, Its quite easy to integrate angular2 in asp.net core project, so I am publishing step to step guide to integrate Angular 2 in ASP.NET MVC.

Ensure you have the latest version of Visual Studio 2015 installed. Then open Visual Studio and install the latest set of TypeScript tools as follows:
Open Tools | Extensions and Updates .
Select Online in the tree on the left.
Search for TypeScript using the search box in the upper right.
Select the most current available TypeScript version.
Download and install the package.
Install Package Installer extension (optional) Download Visual Studio extension that makes it easy and fast to install Bower, npm, JSPM, TSD, Typings and NuGet packages.

Step 1: Create an ASP.NET MVC project

Create the ASP.NET 4.x project as follows:

In Visual Studio, select File | New | Project from the menu.
In the template tree, select Templates | Visual C# (or Visual Basic ) | Web .
Select the ASP.NET Web Application template, give the project a name, and click OK.
Select the desired ASP.NET 4.5.2 template (>= 4.x.x) and click OK.
Avoid Adding any authorization and authentication at this point of time to keep project quite simple
Please note all configuration and package versions are according to Angular Quickstart Guide

Please note that @types/core-js are not mentioned in Angular Quickstart Guide in devDepenedcies section, Add this to avoid duplicate identifier error otherwise you are going to get as “Angular 2 can’t find Promise, Map, Set and Iterator”

Step 3: Create tsconfig.json file

This file defines how the TypeScript compiler generates javascript from the project’s files.

Open CMD and redirect to your application folder and Using npm from the command line, install the packages listed in package.json with the command:

> npm install

After executing command, output will be like this.

Note:
Error messages―in red―might appear during the install, and you might see npm WARN messages. As long as there are no npm ERR! messages at the end, you can assume success.
Do not include the node_modules folder in the project. Let it be a hidden project folder.But you may view the hidden folder in Visual Studio using “ Show All Files ” option in Solution Explorer.

Root module needs to import the BrowserModule from @angular/platform-browser to the imports array.

This is the smallest amount of Angular that is needed for a minimal application to run in the browser.

Create a component and add it to your application Every Angular application has at least one component: the root component , named AppComponent here.Components are the basic building blocks of Angular applications. A component controls a portion of the screen―a view ―through its associated template. Create the file A pp/app.component.ts with the following content: import { Component } from '@angular/core';@Component({ selector: 'my-app', template: '<h1>My First Angular App - Demo</h1>'})export class AppComponent { }
Create a Start up file Now we need to tell Angular to start up your application. Create the file A pp/main.ts with the following content: import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';import { AppModule } from './app.module';const platform = platformBrowserDynamic();platform.bootstrapModule(AppModule);

This code initializes the platform that your application runs in, then uses the platform to bootstrap your AppModule .

Note:
Please note that transplied typescript files will automatically be available in App folder as we have mentioned attribute CompileOnSave in tsconfig.json
Files visible in Visual Studio:
Files visible in Folder:

Step 7: Create systemjs.config.js file

This fille provides information to a module loader about where to find application modules, and registers all the necessary packages. It also contains other packages that will be needed by later documentation examples.

Create the file Scripts/systemjs.config.js with the following content:

/** * System configuration for Angular samples * Adjust as necessary for your application needs. */(function (global) { System.config({ paths: {// paths serve as alias'npm:': '/node_modules/' }, // map tells the System loader where to look for things map: {// our app is within the app folderapp: '/Scripts',// angular bundles'@angular/core': 'npm:@angular/core/bundles/core.umd.js','@angular/common': 'npm:@angular/common/bundles/common.umd.js','@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js','@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js','@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js','@angular/http': 'npm:@angular/http/bundles/http.umd.js','@angular/router': 'npm:@angular/router/bundles/router.umd.js','@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',// other libraries'rxjs': 'npm:rxjs' }, // packages tells the System loader how to load when no filename and/or no extension packages: {app: { main: './main.js', defaultExtension: 'js'},rxjs: { defaultExtension: 'js'} } });})(this);
Note:
npm attribute highlighted in red color in above image should point to folder which has all installed packages, in our case it is node_modules folder.
app attribute highlighted in red color in above image should point to folder which has all application transcript code, in our case it is Scripts folder.
main attribute highlighted in red color in above image should point to js file which contains angular application startup code, in our case it is main.ts file.

Click the Run button or press CTRL + F5 to build and run the application.

This launches the default browser and runs the QuickStart sample application.

Try editing any of the project files. Save and refresh the browser to see the changes.

In case of Error such as:
Compiler errors such as “ Property map does not exist on type Observable<Response> ” and “ Observable cannot be found ” indicate an old release of Visual Studio. Exit Visual Studio and follow the instructions here .

IDE issues such as ‘component can not be properly resolved, probably its located in an inaccessible module’

occurs when angular2 keyowrd are highlighted red as no intellisense is available for them by Visual Studio 2015 visible in below images

Inorder to resolve them make sure you have Resharper -> Check your Resharper Typescript Language settings. Resharper might be set to older version of typescript 1.6. Download latest version of resharper and restart Visual Studio. In case it doesnt work try to set Typescript language level to 2.0 under Inspection Tab from Resharper Options menu. Stackoverflow