Skip to main content

How to use Angular 4 with ASP.NET MVC 5

ASP.NET MVC 5  Angular 4


This post is about how to use Angular 4 with ASP.NET MVC5. In one of my existing projects we were using Angular 1.x, due to some plugin compatibility issues, we had to migrate to latest version of Angular. We couldn’t find any good article which talks about development and deployment aspects of Angular 4 with ASP.NET MVC.
The pre-requisites are
  • npm (Node Package Manager) - I am using npm version 5.5.1
  • Angular CLI - I am using angular cli version 1.5.3
  • Visual Studio 2017 / 2015 - For developing ASP.NET MVC project.
First you need to create ASP.NET MVC project.


Once you created the project, using Angular CLI you need to create Angular project. You need to do it in the root folder. And you need to execute following commands to create an Angular project.

ng new HelloAngular
This will create a folder with name HelloAngular. And it contains all the required files for Angular project. Here is the folder structure after creating the angular project.



Here is the updated folder structure after creating the Angular project.



Unlike earlier versions of Angular, you need to reference the generated files with Angular CLI. You can generate the build files using ng build command. Before executing the ng build command, you need to configure your output folder, the scripts will be generated to the configured folder, by default it will be dist. I am configuring it to
  ../Bundles folder.




Next you need to run ng build command. Once you run the command, it will generate required files to the bundles folder.



Next you need to open index.html under bundles folder, you need to copy the script and style references from the file and add it to the _layout.cshtml file. I am using the ASP.NET MVC bundling and minification framework for this. Here is the code snippet for that.




And here is my _layout.cshtml file.



Now you have completed the initial infrastructure.
If you notice, I have removed the Bootstrap reference from _layout file. You can add it via .angular-cli.json file. First you need to install JQuery, Popper JS and Bootstrap 4 via npm install command.



Once you installed it, you can modify the file like this.



Again you can run the ng build command, which ideally should bundles the scripts and styles we configured in the .angular-cli.json file.



If notice, even though we added the style reference, ng build command didn’t generated any css files. You need to provide -ec command line parameter to ng build command. This will generate the styles.



Now you can modify your bundleconfig file like this, including the style reference.



And _layout file like this.



Also you need to copy Angular app-root element to the Index.cshtml file, like this.



Now you can run the ASP.NET MVC application to view the results.
You can run the ng build --prod command to make your script file minified, which is required to deploy the application in server. You don’t need -ec parameter to generate the styles. Also the --prod parameter will reduce the file size as well.



You can find the difference of file sizes.
Next you can modify the project file to automate the deployment. You need to edit your project file. For that first you need to unload the project by right clicking on the project node and select Unload Project option. Then select the Edit HelloWorldApp.csproj. Next add the following code inside the project element.



The above code will execute ng build -ec and ng build --prod commands based on the Visual Studio configuration. If the configuration is Debug, I will be executing the ng build -ec command and for Release configuration I am executing the ng build --prod command.
Next reload the project and build it. You will be able to see the ng build command output in the output window of Visual Studio.



That’s it. Now you can add modules and components to angular application and you can debug it with chrome developer tools.




Comments

Popular posts from this blog

How to Impliment pagging in SQL queries using ROW_NUMBER

  Create  PROCEDURE dbo.GetPaggingOnProc (     @startRowIndex int,     @maximumRows int ) AS    select RowRank,Column1,Column2,Column3  FROM    (       select Column1,Column2,Column3  ,               ROW_NUMBER() OVER (ORDER BY SADShiftCtrl) AS RowRank        from tblTestABC     ) AS tblTestABCWithRowNumbers WHERE RowRank > @startRowIndex AND RowRank <= (@startRowIndex + @maximumRows)

Kendo UI DropDown With Multiple Check Boxes

In this blog, I will demonstrate how to create a Multiple Selection DropDownList with the help of Kendo UI. This dropdown will allow you to select more than one item and will also show the number of checked items in a dropdown list. Ex. (2 items selected). There is an option to Select all checkboxes to check all items at a time and a  Search filter is also integrated with this dropdown. Background Well, first of all, I am using a hidden field where I can put all the checked value with comma separated. This hidden field is used for managing all checked and unchecked values and keeps the values checked when the user opens the dropdown again. Below is the bunch of code. function  bindddlMultiSkill()   {       $( "#ddlMultiSkill" ).kendoDropDownList({           name:  "skill" ,           dataTextField:...

(3).Prepare c# besics and advanced questions

Question 1. What Is Attribute In C#? Answer : An attributes is a declarative tag that is used to convey information about the behaviors of various elements (classes, methods, assemblies, structures, enumerators, etc). it is access at compile time or run-time. Attributes are declare with a square brackets [] which is places above the elements. [Obsolete(“Don’t use Old method, please use New method”, true)] For example consider the bellow class. If we call the old method it will through error message. public class myClass {     [Obsolete("Don't use Old method, please use New method", true)]     public string Old() { return "Old"; }     public string New() { return "New"; } } myClass omyClass = new myClass(); omyClass.Old(); Question 2. Why Attributes Are Used? Answer : In a program the attributes are used for adding metadata, like compiler instruction or other information (comments, description, etc). C#. NET Inter...