·         After added the code, right click on file and choose “Restore Package” option,

      ·         After updated you will see the folder “node_modules” in the project

Step 3: Add system configuration java script file.

      ·         Add systemjs.config.js file to specify the reference path to the components 

       ·         Right click on project, Add à JavaScript File

      ·         Give name as “systemjs.config.js” and click OK.

      ·       Paste the below code snippet in the created systemjs.config.js file.

      ·         Add tsconfig.json file to specify the compiler options for building  

      ·      Choose Typescript JSON Configuration file and Paste the below code snippet in the created tsconfig.json file.

Step 5: Route the URL for accepting angular

     ·         Open “RouteConfig.cs” file and add the below code to allow URL which accept angular input,

routes.MapRoute(

                name: "angular",

                url: "{*anything}",

                defaults: new { controller = "Home", action = "Index" } // The view that bootstraps Angular 2

            );

Step 6: Add Angular Reference

·         Add angular reference by including below snippet in the layout file.

    <script src="/node_modules/zone.js/dist/zone.js"></script>

    <script src="/node_modules/systemjs/dist/system.src.js"></script>

    <script src="/systemjs.config.js"></script>

    <script>

   System.import('app').catch(function(err){ console.error(err); });

    </script>

·         Add folder namely “app”,

Step 7: Setup Angular structure

·         Create angular app module file “app.module.ts”

·         Paste the below code snippet in the app module,

import { NgModule } from '@angular/core';

import { APP_BASE_HREF } from '@angular/common';

import { BrowserModule } from '@angular/platform-browser';

import { ReactiveFormsModule } from '@angular/forms';

import { HttpModule } from '@angular/http';

import { AppComponent } from './app.component';

import { routing } from './app.routing';

import { HomeComponent } from './Component/home.component';

import { AboutComponent } from './Component/about.component';

@NgModule({

    imports: [BrowserModule, ReactiveFormsModule, HttpModule, routing],

    declarations: [AppComponent, HomeComponent, AboutComponent],

    providers: [{ provide: APP_BASE_HREF, useValue: '/' }],

    bootstrap: [AppComponent]

})

export class AppModule { }

·         Create angular main file “main.ts”

·       Paste the below code snippet in below file,

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app.module';

platformBrowserDynamic().bootstrapModule(AppModule);

·         Create app component file “app.component.ts” and paste the below code snippet,

import { Component } from "@angular/core"

@Component({

    selector: "user-app",

    template: `

               <div>

                  <nav class='navbar navbar-inverse'>

                       <div class='container-fluid'>

                         <ul class='nav navbar-nav'>

                           <li><a [routerLink]="['home']">Home</a></li>

                           <li><a [routerLink]="['about']">About</a></li>

                      </ul>

                      </div>

                 </nav>   

              <div class='container'>

                <router-outlet></router-outlet>

              </div>

             </div>         

`

})

export class AppComponent {

}

·         Create app component file “app.routing.ts” and update the routing for created modules.

·         Create Home and About Component

·         Create app component file “home.component.ts” and paste the below code snippet,

import { Component } from "@angular/core";

@Component({

    template: `<p>This is home page.</p>`

})

export class HomeComponent {

}

·         Create app component file “about.component.ts” and paste the below code snippet,

import { Component } from "@angular/core";

@Component({

    template: `<p>This is about page.</p>`

})

export class AboutComponent {

}

Step 8: Adding code reference in index.cshtml file.

·         Remove existing code and paste the below code snippet in index.cshtml file

@{

    ViewBag.Title = "Index";

}

<body>

    <user-app> This is normal ASP.Net MVC</user-app>

</body>

Step 9: Build and run application

·         Load Angular Output by entering url “http://localhost:portnumber/home”

·         Click on about link to see the navigation,

·        Load MVC Output by entering url “http://localhost:portnumber/home/index”