Deploying Angular 8 Application To IIS Server

Deploying Angular 8 application to IIS server is very straight forward. All we need to do is take care of few things,

1. First, we need URL Rewrite Module installed in our application. It helps us for Router routing. You can download and install it from
   https://www.iis.net/downloads/microsoft/url-rewrite
2. We need web.config file to leverage Angular Routing.
3. We will build our application and deploy it to IIS.
4. We will deploy Angular application in IIS subfolder( to avoid giving path and permission hassles)

Deploying Angular 8 application to IIS server

Go to the https://www.iis.net/downloads/microsoft/url-rewrite download and install URL Rewrite Module.

We need web.config file in our build files to leverage Angular Routing. This file contains certain rules defined for the routing.
You can put this file in your build files directly or If you want it to appear every time you build your application create web.config file under source directory. Mention the same in angular.json file under assets something like this,

"assets": [
              "src/favicon.ico",
              "src/assets",
              "src/web.config",
              {
                "glob": "**/*",
                "output": "/assets/img/"
              }
            ],

You can use the below mentioned this web.config file and make sure it is src/web.config

<?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>

Now we will build our angular application by using following command.

ng build --prod --base-href / Your Application Name/

Make sure that base-href name in the above mentioned command should be same as your application name. If you want to build your application for production build you can use production flag or else, you can leave it.

Once you build your application dist folder will appear under the project directory. Within the dist folder there will be project build folder.

All you need to is copy it and paste it in IIS.(Use below mentioned path.)

C:\inetpub\wwwroot\<Your built application folder name>

Deploying Angular 8 application to IIS server

Open the IIS Refresh the Website Content and Restart the server

You are able to find your application running in the browser.

http://localhost/<Your built application folder name>

If you want to bind your localhost to your IP you can do it IIS in edit bindings for the default website.

Your comments are appreciation for us.

That’s All,
Happy Coding..!