Angular2: Step by Step guide of using Angular2 with Typescript for ASP.NET MVC in Visual Studio 2015


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 core project, so I am publishing step by step guide to integrate Angular 2 in ASP.NET MVC.

Pre Step:

    • Install Visual Studio

Download latest version of Visual Studio 2015 Community Edition with recent update (Update 3)

    • Install NodeJS and NPM

Download latest version of Nodejs and NPM (Make sure that you are running node version 4.4.x5.x.x, and npm 3.x.x by running node -v and npm -v in a terminal/console window. Older versions produce errors.)

    • Install Node.js Tools for Visual Studio (optional)

Download – Turn Visual Studio into a powerful Node.js development environment.

    • Install Typescript

Download latest version of Typescript (version >= 2.0)
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.

 Download Demo from Github

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

Step 2: Create Package.json file

package.json identifies npm package dependencies for the project.

  "name": "ang2demo",
  "version": "1.0.0",
  "scripts": {},
  "license": "ISC",
  "dependencies": {
    "@angular/common": "~2.0.1",
    "@angular/compiler": "~2.0.1",
    "@angular/core": "~2.0.1",
    "@angular/forms": "~2.0.1",
    "@angular/http": "~2.0.1",
    "@angular/platform-browser": "~2.0.1",
    "@angular/platform-browser-dynamic": "~2.0.1",
    "@angular/router": "~3.0.1",
    "@angular/upgrade": "~2.0.1",
    "bootstrap": "^3.3.7",
    "core-js": "^2.4.1",
    "reflect-metadata": "^0.1.8",
    "rxjs": "5.0.0-beta.12",
    "systemjs": "0.19.39",
    "zone.js": "^0.6.25"
  "devDependencies": {
    "@types/core-js": "^0.9.34",
    "typescript": "^2.0.3",
    "typings": "^1.4.0"



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.

For Visual Studio 2015 we must add "compileOnSave": true to the TypeScript configuration (tsconfig.json) file as shown here.

  "compileOnSave": true,
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": false,
    "typeRoots": [
    "types": [



  • On creating this file you will receive alert from Visual Studio such as below, Just Press No:


  • Please note that below code is not note mentioned in Angular Quickstart Guide in tsconfig.json, 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 4: Create typings.json file

This file provides additional definition files for libraries that the TypeScript compiler doesn’t natively recognize.

  "globalDependencies": {
    "core-js": "registry:dt/core-js#0.0.0+20160725163759",
    "jasmine": "registry:dt/jasmine#2.2.0+20160621224255",
    "node": "registry:dt/node#6.0.0+20160909174046"


Step 5: Install package.json file

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.



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


Step 6: Create Sample Angular 2 Code using Typescript

I am using sample code from Angular Quickstart Guide

1. Create a folder name “App” in Scripts folder

2. Create application module file

Angular itself is split into separate Angular Modules. This makes it possible for you to keep payload size small by only importing the parts of Angular that your application needs.Every Angular application has at least one module: the root module, named AppModule here.

Create the file App/app.module.ts with the following content:

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent }   from './app.component';
  imports:      [ BrowserModule ],
  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent ]
export class AppModule { }

This is the entry point to your application.

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.

3. Create a component & 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 App/app.component.ts with the following content:

import { Component } from '@angular/core';
  selector: 'my-app',
  template: 'My First Angular App - Demo' }) 
export class AppComponent { }

4. Create a Start up file

Now we need to tell Angular to start up your application.

Create the file App/main.ts with the following content:

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';
const platform = platformBrowserDynamic();

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


  • Please note that transplied typescript files will automatically be available in App folder as we have mentioned attribute CompileOnSave is true in tsconfig.json

Files visible in Visual Studio:


Files visible in Folder:


Step 7: Create systemjs.config.js file

This file provides information to a module loader about where to find application modules, and registers all the necessary packages.

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) {
        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 folder
            app: '/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'



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

Step 8: Load and Render Angular2 application in ASP.NET MVC Views


  • In order to load angular 2 application in MVC, integrate angular 2 libraries references and system.js configurations in Views/Shared/_Layout.cshtml file
   @ViewBag.Title - My ASP.NET Application

        System.import('../../Scripts/App/main').catch(function (err)

  • In order to kickstart angular code in browser, integrate component in Views/Home/index.cshtml file
    ViewBag.Title = "Home Page";

<span class="jumbotron">

Step 9: Build and run the app

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:

  • Error 1

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

You’ll be asked to replace the file

c:\Program Files (x86)\Microsoft Visual Studio 14.0\Common7\IDE\CommonExtensions\Microsoft\TypeScript.typescriptServices.js

This operation requires admin privileges.

OR Stackoverflow link

  • Error 2

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

screenshot_4 screenshot_6

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

Cheers. Happy Coding.


20 thoughts on “Angular2: Step by Step guide of using Angular2 with Typescript for ASP.NET MVC in Visual Studio 2015

  1. chaitra shivanand

    Hi Muhammad, I followed the steps as mentioned above and I am not getting the message “My First Angular App – Demo”.

    I see you have used selector ‘my-app’, but I don’t see you declaring it anywhere, something like Loading AppComponent content here …. I declared the same in Layout.cshtml it did not help.

    Liked by 1 person

  2. Rudra

    I follow the steps and implemented the solution. This works fine. But when I tried to add another Angular2 component e.g. aboutComponent and connecting to About.cshtml is not working .



    Awesome!!! Its working fine. Can you give an example of multiple MVC view (.cshtml) routing using Angular 2? I want to use multiple views from mvc controller action in Angular 2 component? like as we use in normal ASP.Net MVC.


    • Thanks. If you are looking to consume multiple mvc views then it means you are not looking for pure SPA, if you are not implementing SPA then there is no strong reason to use Angular2 with MVC, until unless you want to implement collection of mini-SPA’s, because for validation/two-way databinding/dom manipulation/js code modularization, jquery or knockout js serves the need.

      Well regardless of above feedback, declare new selector in each view, register new selector’s component in bootstrap process. Google by searching ‘bootstrap multiple component in angular2’


      • Indra

        Thanks Muhammad. When I tried to package this project, node_modules folder was not packaged. So the app was not working on IIS, I manually copied the folder and it started working. How will node_modules gets packaged. Do I need to follow any other steps or just use just the publish feature. Please advise.


        • For that, you have to either use Gulp or grunt for bundling/minify/download node packages and dependencies and simple solution is once it’s published, go to deployed folder and run command
          npm install --production
          to download all node packages mentioned under dependencies tag in package.json


  4. Indra

    Thanks. When I did that, it is creating node_modules folder. But I have two question here

    * It is actually not minifying the files. So in production should use the same node_modules folder generated by “npm install –production ” .

    * When I compare the node_modules in dev folder and deploy folder, there were very few files in deploy folder.


    • Hey Indra,

      As I said earlier you have to use your own strategy using glup or grunt for bundling and minify. For point#2, before publishing you were using dev dependencies packages such as typings, typescript and core-js typings, these packages are not part of published version, so in local version you would see lot of files, but once you inspect the published folder, you would see less number of files as packages relevant to dev dependencies are not part of published node_module.


      • Indra

        Just curious to know.. Can I used the vendor bundle generated from Angular-cli and use that as a reference in this project instead of gulp or grunt.


  5. Hina Shahid

    I was actually looking for something that helps me getting started with Angular2 because I have been working on Anguar 1.x versions for long time. Quite helpful. Thanks Hassan 🙂

    Liked by 1 person

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s