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
inbase-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 usingwindow.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
ornpm 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.
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="<,>,%,&,\,?,*" />
<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.