Using Angular in ASP.NET MVC 5 with Angular CLI and Visual Studio 2017

Using Angular in ASP.NET MVC 5 with Angular CLI and Visual Studio 2017

Angular is one of most in-demand web front-end frameworks developed by Google, it gets integrated with any Server side technology. In this article, let’s learn how to use Angular (Version 6) with ASP.NET MVC 5 using Angular-CLI.
I had written a post a year back on Using Angular4 in ASP.NET MVC 5, I felt it was little tedious to get it working as so many technologies are involved. This article describes minimal steps to get started.
Software pre-requites
  • Microsoft Visual Studio 2017 (Community Edition)
  • Install Latest NodeJs
  • TypeScript 2.6 minimum.

Installing Angular CLI

Angular CLI is a tool for developing an Angular-based (web, PWA) application, everything is out of the box like generating components, services, pipes, unit tests etc. For installing CLI, its must-have NodeJS installed previously. Use this command to install CLI
npm install -g @angular/cli

Create ASP.NET MVC 5 & Angular app together

With Visual Studio 2017 installed, create an ASP.NET MVC 5 application. Named it as ngGitHouse. Nothing fancy in this but its first step. Once the CLI is installed, we create a brand new Angular application by running this command ng new gitHouseApp –minimal inside MVC 5 application folder structure.
Create Angular app inside MVC 5
It would take few minutes to get all node modules downloaded. You can see in the folder structure that githouseapp folder is created in MVC 5 application folder structure.
To ensure that the githouseapp is set up properly; navigate to folder path in command prompt and run the following command ng build. If this succeeds then your good to go.

Moving essentials files & folder to root

Our intention is to use Angular Framework inside MVC 5 views, to make it easy for understanding and maintenance lets move some essentials files and folder to root of MVC 5 application. The files & folder to be moved are
  • Src folder – This is actual source folder of the Angular application, entire project structure is present in this folder.
  • package.json – file containing the list of NPM packages needed to develop client application
  • angular.json – file containing Configuration settings for the Angular application. This file is essential for Angular-CLI to work seamlessly.
  • tsconfig.json – configuration file must for all TypeScript files to transpile to JavaScript.
  • node_modules – folder containing all downloaded node modules. This folder is always heavy.
Do NOT forget to include the above files & folder in Solution Explorer except node_modules

ASP.NET MVC 5 & Angular files together in the folder strucutre

Update configuration settings

We have altered how AngularCLI generates the folder structure because we indent to use it in ASP.NET MVC 5 application. For CLI to work well, we have to update settings in the below configuration file
tsconfig.json – This file is used by TypeScript compiler to transpile to JavaScript. It’s a mandatory file wherever TypeScript is used. The include config entry tells us to compile TypeScript from src folder only instead of entire project structure. If you plan to use TypeScript in another folder, do add in this section. The outDir entry in compilerOptions provides a folder for placing all transpiled files with source maps.
Source Maps helps us to debug the TypeScript (Angular in this case) code in the browser just like JavaScript code.
angular.json – This is the heart of AngularCLI, it contains all options necessary to play around Angular artifacts like generating components, pipes, service provider, class, directives etc. The sourceRoot now points to src folder, the outputPath is now pointing to ./Scripts/libs folder as part of MVC 5 project. The output files of ng build command will be copied here.
OutputPath updated in Angular.json
I recommend removing the githouseapp created by CLI project.

Building the application

As we moved folder location, configuration files got updated, its best to run the command ng build in project root folder from command prompt. If done successfully, you would see a similar image as below. Don’t forget to include scripts/libs folder in Solution Explorer.
ng build –watch will run the build when file changes
angular ng build
ng build running successfully

Loading Angular in MVC 5 views

Now that everything is building properly, let’s load the Angular app in ASP.NET MVC 5 views. I will be using Contact.cshtml file generated while scaffolding MVC application. I removed the existing code to include our code to load the component as below. The app-root is an Angular Component generated by default using CLI
The Scripts section includes the link to files created in libs folder run from above step. The JS files referencing order is important here. 
Run the application, click on the Contact link on the navbar to load the Angular.
Source code for this on my Github account, click here to play around with it

Debugging the app

We successfully ran the Angular code in ASP.NET MVC 5, debugging the code in the browser (chrome) involves press F12, select Sources tab. Check out below image for file location while running application. Do run the command ng build –watch to compile Angular code automatically


  1. Hey! I know this is kinda off topic however , I’d figured I’d ask. Would you be interested in exchanging links or maybe guest writing a blog post or vice-versa? My blog covers a lot of the same topics as yours and I believe we could greatly benefit from each other. If you are interested feel free to send me an e-mail. I look forward to hearing from you! Superb blog by the way! web design in new york

  2. I found so many interesting stuff in your blog especially its discussion. From the tons of comments on your articles, I guess I am not the only one having all the enjoyment here! keep up the good work... trafficize bonus

  3. very good written article. It will be a good support to anyone who utilizes it including me. Keep doing what you are doing can't wait to read more posts very nice article 아인프리서버

  4. that is really a good tip especially to those fresh to the blogging simple but very accurate info many thanks for sharing hope to read more 온라인카지노

  5. Wow! Such an amazing and helpful post this is. I really really love it. It's so good and so awesome. I am just amazed. I hope that you continue to do your work like this in the future also Chen Zhi Cambodia

  6. Pretty good post. I just stumbled upon your blog and wanted to say that I have really enjoyed reading your blog posts. Any way I'll be subscribing to your feed and I hope you post again soon. Big thanks for the useful info.

  7. It's a bit superbly preserved, and my guy will continually cherish it and the recollections. web design agencies ireland

  8. Hey what a brilliant post I have come across and believe me I have been searching out for this similar kind of post for past a week and hardly came across this. Thank you very much and will look for more postings from you. Web Design Melbourne

  9. A portion of the hosting are truly reasonable and some even free contingent upon your application decision.


Thank You For Your Great Contribution

Featured Post

how to find n number of nodes have child or cildren

 how to find n number of nodes have child or cildren for that we use recursive function  const   data = {     'id' : '0' ,...

Popular Posts