How to Host an Angular Application in IIS

Welcome to today’s post.

Today I will discuss how to host an Angular 8 application on an IIS web server.

When we think of IIS web servers the most common web application that is deployed are HTML and ASP.NET applications which have been deployed using the traditional IIS application and folder structures containing a web configuration file, scripts (java script), content, pages (HTML) and binaries.

An Angular application is traditionally developed using TypeScript and compiled using Webpack to produce a distributable folder containing HTML, Javascript and content script.

An ASP.Net MVC or Web API application uses server-side URL routing, whereas Angular uses client-side scripts to control URL routing.

By default, if a page cannot be found in an Angular application, the index.html host page is returned. 

By default, the root folder in IIS for Angular applications is \inetpub\wwwroot.

To overcome this default will require the installation of the URL Rewrite module into IIS web server.

The installer for URL Rewrite for IIS is obtained from the following link:

https://www.iis.net/downloads/microsoft/url-rewrite

The above version of URL Rewrite will work with IIS versions 7.0 up to 10 (current as of this post).

Once that is installed into IIS then Angular will be ready to rewrite URL links to matching router page patterns requested from the client and fallback to the index page.  

To prepare an Angular application for deployment into IIS the following tasks will need to be completed before building the source in the development IDE:

1. Create a web.config file in the src folder to support index.html fallback.
2. Include the web.config in the Angular.json assets key.

For 1. Create a new file Web.config in the src folder with the following XML markup:

<?xml version="1.0" encoding="utf-8"?>
<configuration>
<system.webServer>
  <rewrite>
    <rules>
      <rule name="Angular Routes" stopProcessing="true">
        <match url=".*" />
        <conditions logicalGrouping="MatchAll">
          <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
          <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
        </conditions>
        <action type="Rewrite" url="/index.html" />
      </rule>
    </rules>
  </rewrite>
</system.webServer>
</configuration>

The configuration mark up is identical to that from the Angular site

https://angular.io/guide/deployment

which explains in detail Angular deployment to the various web servers.

For 2. We just add web.config as shown to Angular.json and save:

"assets": [
  "src/favicon.ico",
  "src/assets",
  "src/web.config"	
],

When a build is run from within the IDE (e.g. Visual Studio) the destination output for the application distributable files is specified in outputPath in the Angular.json file:

"projects": {
    "AngularMaterialApp1": {
      "projectType": "application",
      "schematics": {
        "@schematics/angular:component": {
          "style": "scss"
        }
      },
      "root": "",
      "sourceRoot": "src",
      "prefix": "app",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/AngularMaterialApp1",

...

Next, we build the application and set the starting (root) folder for the web application to:

C:\inetpub\wwwroot\materialapp

To achieve this, we will require the following command line to be run:

ng build --base-href "/materialapp/" --prod

After building, the following changes will be applied to the distribution folder:

1. web.config file will be copied over to the \dist folder.
2. The index.html will be altered to include the root reference:
   <base href=”/materialapp/”>

After the build, open the IIS Manager.

Next create an IIS application.

Set the physical path and app pool:

Create a sub-folder to contain the application contents.

wwwroot\materialapp

Now copy over the dist folder contents into the wwwroot\materialapp folder.

Next, enable directory browsing on the wwwroot\materialapp folder:

Lastly, open the browser and refresh. The application should open.

The above are the manual steps necessary to be able to deploy and host an Angular web application into an IIS web server.

You have successfully deployed an Angular web application to IIS!

That’s all for today’s post.

I hope you found this post useful and informative.

Andrew Halil

Andrew Halil is a blogger, author and software developer with expertise of many areas in the information technology industry including full-stack web and native cloud based development, test driven development and Devops.