Angular in production — Deploy Angular application in IIS 8+ using base URL

Setting up an Angular application in IIS for production use is quite simple but not entirely straightforward for beginners. This article helps you do a basic yet effective such setup.

Typical IIS Issues

The reasons why an Angular 2+ application does not work out of the box on IIS is because:

• You usually want to set up an application or virtual directory in IIS. This involves playing around with <base href=""> so that the bundle.js files load properly.
• Applications making use of Angular Router package may not work correctly with IIS. Accessing an URL like http://your.domain.com/my-app/home/heros/get/1 directly throws a 404 not found error.
• If your app contains auxiliary routes, accessing a URL like http://your.domain.com/my-app/home/(popup:edit-screen) throws a Potentially dangerous request error.

This post explains how to setup an Angular 2+ app on Windows IIS 8 and above. Let us call our app: my-app.

Set Base Href

Open my-app/index.html and set <base href="/my-app">. It will be helpful for you to understand the basics of <base> element too before you proceed. Also read this answer if you are running into navigation issues in your local development environment.

NOTE:

• The value my-app in base-href should preferably be the same as the application or virtual directory we will be creating in IIS.
• Test your app once after changing base-href, that all your routes are working fine. An example of where this may break your code is if you are doing something custom/funny using window.location.href.
• This is not a necessary step, but only for consistency between your dev environment and your IIS hosted site, I would recommend you set this up.
• By dev environment, I mean your Angular application running on Node’s lite-server when you ng serve or npm start. Typical URL: http://localhost:4200/my-app.
• By IIS hosted site, I mean the site we will be setting up in this post. Typical URL:http://your.domain.com/my-app.

Build Angular App

Compile your app with an added --base-href /my-app/ flag. Notice the trailing /. It is important!

// dev environment build command
ng build --base-href /my-app/
// production environment build command
ng build --prod --base-href /my-app/

After compilation, a dist folder should be created in my-app’s root folder.

IIS Setup

Copy contents of dist folder in to a folder called, say, my-app-iis.

Open IIS > Right-click your website > Choose Add Application from context menu.

New web application in IIS

Set Alias as my-app, Application pool whatever you want and Physical path as location of my-app-iis.

Go to my-app-iis and create a web.config file inside it.

Paste the following configurations in web.config.

<?xml version="1.0" encoding="UTF-8"?>
 <configuration>
     <system.webServer>
         <httpErrors existingResponse="Replace" errorMode="Custom">
             <remove statusCode="404" subStatusCode="-1" />
             <error statusCode="404" prefixLanguageFilePath="" path="/my-app/index.html" responseMode="ExecuteURL" />
         </httpErrors>
     </system.webServer>
     <system.web>
         <sessionState mode="Off" />
         <httpRuntime
             requestValidationMode="2.0"
             requestPathInvalidCharacters="<,>,%,&amp;,\,?,*" />
         <pages validateRequest="false" />
     </system.web>
 </configuration>

The configurations are hopefully self-explanatory, but still:

• The httpErrors section makes sure any first time URL requested is “404” redirected to index.html for the app to load, so that you don’t face router issues.
• The httpRuntime is required for auxiliary routes in URL that contain : symbol that is treated as “dangerous” by IIS.
• The sessionState OFF is not a necessary configuration, but helps to have it.

That’s it. Access http://your.domain.com/my-app/ and your application should run perfectly on IIS now.