Angular and Asp.Net MVC Hybrid Application

This post explains how to develop an Angular and ASP.Net MVC Hybrid Application using .Net Framework 4.6.
If you are looking for a guide to develop Angular application using .Net core and ASP.Net core then refer below link.

http://hive.rinoy.in/building-a-web-app-using-asp-net-core-2-and-angular5-frameworks/

You can download the seed project from here

Prerequisites and Installation

 Visual Studio 2015 with Update 3

1) Check the details of Visual Studio 2015 by opening Visual Studio  and navigating to Help -> About Microsoft Visual Studio. You need Visual Studio 2015 with update 3. Else Download latest version of Visual Studio 2015 Community Edition with recent update (Update 3).

Install NodeJS and NPM

Install NodeJS from https://nodejs.org/en/.  Node and NPM are required for angular development.

Install Node.js Tools for Visual Studio

Install NodeJS Tools for Visual Studio as well. Below are the steps to install NodeJS Tools for visual studio,

1) Open Visual Studio 2015. Navigate to Tools -> Extensions and Updates
2) Choose Online
3) In search box enter NodeJS
4) Click on download and install the latest version. The version I installed is 1.2.

Install Typescript

1) Open Visual Studio 2015. Navigate to Tools -> Extensions and Updates
2) Choose Online
3) In search box enter typescript
4) Click on download and install the latest version. The version I installed is 2.2.
This version is needed for building application using Angular4, else you may get build errors.

You can check the installed version of typescript by navigating to help -> About Microsoft Visual Studio. Look for the Typescript details.

Latest version of TypeScript is available from https://www.typescriptlang.org/index.html#download-links. You can also install choosing options available in this page.

Configure External Web tools

Open Visual Studio -> Tools -> Options
Options dialog window will open. Select External Web Tools from left pane.
On the right, move the $(PATH) entry above the $(DevEnvDir) entries. This tells Visual Studio to use the external tools (such as npm) found in the global path before using its own version of the external tools.
Click OK to close the dialog.
Restart Visual Studio for this change to take effect.

Open Visual Studio -> Create an ASP.Net MVC project.


Choose No Authentication.

 Create package.json file in the project root.
Create a package.json file and add below contents. A package.json file is used to install the project with a comprehensive starter set of packages as specified in the dependencies and devDependencies sections. The package.json includes two sets of packages, dependencies and devDependencies. You can read more about Package.json here. The dependencies are essential to running the application. The devDependencies are only necessary to develop the application.

 Add systemjs.config.js file to the project root and add below lines.
Systemjs.config.js allows to configure SystemJS to load modules compiled using the TypeScript compiler. For anonymous modules (one module per JS file), it allows to map the name of modules to JS files that actually contains the module JavaScript code.

Create ‘tsconfig.json’ file in the project root and add below contents.
The presence of a tsconfig.json file in a directory indicates that the directory is the root of a TypeScript project. The tsconfig.json file specifies the root files and the compiler options required to compile the project.

Create a new folder ‘app’ in the project root and create below files in it.

  1. app.component.ts
  2. app.module.ts
  3. main.ts

Content of app.component.ts

Content of app.module.ts

Content of main.ts

If you are getting  below confirmation dialog click on No.

Go to Views -> Shared -> _Layout.chtml and insert below code after  @Scripts.Render(“~/bundles/modernizr”).

Go to Views -> Home -> Index.chtml and replace the code with below lines.

8. Right click on package.json and click on Restore Packages.

Now all set to run the application. Build and run the application and you should see below page if all goes well.

You can learn more aspects of Angular with Asp.Net MVC application in below links. These blogs explain routing, how to make HTTP GET request, HTTP POST request in angular application.

Routing in Angular – Asp.Net MVC Application
HTTP GET in Angular -Asp.Net MVC Application
HTTP POST in Angular – ASP.Net MVC Application

Leave a Reply

Your email address will not be published. Required fields are marked *