Web user context
Angular IIS SPA

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, some of the most common web applications 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 (JavaScript), content, pages (HTML) and binaries.

Web applications built using ASP.NET have content that is dynamically rendered to the user browser from a combination of server source (.cs), markup (.CSHTML) scripts from the ASP.NET run-time.

Web applications build with Angular are different from the dynamically rendered scripted ASP.NET applications, in that they result in the generation of faster native JavaScript that is run natively from the browser and requires no additional server-side parsing or rendering.

An Angular application is traditionally developed with a hierarchy of sub-folders that contain the components that are written in TypeScript, and consisting of HTML, Typescript, and CSS stylesheet files.

To speed up development, the application builds and auto loads after each source file, markup, or content file changes. The resulting build is not yet optimized for deployment to a production environment, such as an IIS hosted web site.

The /src root folder contains an index page, index.html and a few TypeScript files: main.ts, polyfill.ts, and test.ts which are part of the loading process of the application.

An Angular application, when compiled using Webpack, produce outputs that include a distributable folder containing HTML, JavaScript, and a style sheet. The contents of the \dist sub-folder contain a variety of files including icon resources, fonts (TrueType TTF), linking (MAP files), and JavaScript files main-es5.js, polyfills-es5.js, runtime-es5.js, styles-es5.js, and vendor-es5.js that depend on the version of ECMA script you are building the Angular application in, such ES2015.

URL Routing Differences between Client and Server Hosted Web Applications

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.  

Configuring the Angular Application for URL Rewrites

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/”>

Our next step is to configure IIS to host the Angular application.

Configuring IIS to Host the Angular Application

Following the build of the Angular application, open 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.

Social media & sharing icons powered by UltimatelySocial