Deploying Angular with ASP.NET MVC 5 on IIS

Integrating Angular into an ASP.NET MVC 5 application using Angular CLI, adding Component, Services to Angular was seamless. In this article, we will be deploying the Angular in ASP.NET MVC 5 on IIS.
Consider this as a continuation of Using Angular in ASP.NET MVC 5 for deploying the IIS.

Topics covered

  • Angular CLI command for Production
  • Updating BundleConfig
  • View renders Angular bundle
  • Release mode csproj modification
  • Deploy on IIS

Angular CLI command for Production

Till now we used ng build –watch command to run the Angular application, this is perfect for development as it gives source maps, looks for code changes in watch mode.
It can’t be used in production due to heavy JS files (not recommended approach). That’s where we run the following the command

ng build --prod --vendor-chunk=true

Upon running the command, we will see similar output image
ng build --prod

Observe some alphanumeric hashes are appended to output files name, they are done with a purpose of Cache Busting. It’s done to serve the latest files and over come the cache script files. Look for file size which is reduced drastically.
The command ng build –prod does tree shaking, uglifies and removes comments to reduce file size.

Updating BundleConfig

Angular CLI command to get production build appends hashes to file name. These hashes are random, presently a problem to include the filenames in MVC views.
ASP.NET MVC 5 provides a feature to bundle CSS, JS files to serve them over the network. Open the BundleConfig.cs in App_Start folder to include specific bundle for Angular related files as shown below

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
using System.Web.Optimization;

namespace ngGitHouse
{
public class BundleConfig
{
public static void RegisterBundles(BundleCollection bundles)
{
//Code removed for brevity
bundles.Add(new ScriptBundle("~/bundles/angular").Include(
"~/Scripts/libs/runtime*",
"~/Scripts/libs/polyfills*",
"~/Scripts/libs/vendor*",
"~/Scripts/libs/main*"));
}
}
}

Remember the file order should be same as per Angular docs.

This solves our issue of referring the random hashed filenames for the Angular app scripts.

MVC View renders Angular bundle

We would want to the MVC view (cshtml) to refer this Angular bundle instead of individual files. Open Contact.cshtml, make below changes

1
2
3
4
5
6
7
@{
ViewBag.Title = "Contact Page";
}
@section Scripts {
@Scripts.Render("~/bundles/angular")
}
<app-root></app-root>

Release mode csproj modification

We always do PUBLISH of ASP.NET MVC 5 project to create a deployable application.

Build Events

Every time before Publish step, the Angular production ready files need to be generated by running the above command.

Visual Studio IDE (.NET application in general) provides Build Events (Pre/ Post) to run command. Using build events, we will first run the Angular’s ng build command, before actual Publish process starts.
Open Project Properties –> Build Events to copy below Pre-build event.

1
2
3
if $(ConfigurationName) == Release (
npm run prod
)

Pre Build Event in Visual Studio

I am running the command only if Configuration Name is RELEASE, the npm run prod is a scripts entry in package.json.

Exclude src folder

The “src” folder is Angular source code, which is not necessary for MVC 5 deployable output. So let’s exclude “Src” and “scripts\out-tsc” from updating csproj file by editing in notepad.

The Github source code will have these changes, don’t worry :)

Actual Publish

Till now we had done the groundwork for publishing ASP.NET MVC 5 containing Angular.
Right Click on ngGitHouse project, click to Publish option to open dialog. Provide necessary settings, I have selected File System for this example, it copies to the bin\Release\publish folder.
Cross verify if the “scripts\libs” folder is created or not, it actually contains the Angular app

Deploy on IIS

Copy the MVC 5 published folder to copy to wwwroot or any other location. Add Application on IIS, provide site name, published folder location.
ngGitHouse Deployed on IIS

Once done, browse the URL to see ASP.NET MVC 5 in action with the Angular code as shown below.

ngGitHouse running from IIS

Source Code

ngGitHouse Source Code, click here to play around with it