Tips for Running an Angular app in IIS

Developer Support

Laurie Atkinson, Premier Developer Senior Consultant, A few tweaks are necessary to take an Angular app and move it to IIS. Here is a list of changes required to get everything running smoothly.


Using the Angular-CLI to generate an Angular SPA is an excellent way to scaffold out a well-organized application. This tool also includes a production build step that should allow you to xcopy your application to the web server of your choice.  We’ll start here and discuss the necessary modifications to successfully run your application in IIS.

Use the Angular-CLI to create a production package

First decide whether the application will be located at the root in IIS (e.g. http://server-name) or in a path below the root (e.g. http://server-name/my-app).

If deploying to the root, run the Angular CLI build command:

cid:image003.jpg@01D2D304.8DBDECD0

If deploying to a path beneath the root, run the Angular CLI build command with the base-href option set to the name of application directory.

cid:image004.jpg@01D2D304.8DBDECD0

The base-href option modifies the base element in the index.html, so it looks as follows. This is required for routing to work correctly.

cid:image005.jpg@01D2D304.8DBDECD0

Create an IIS web application

Add the web site, or application, or virtual directory to IIS and set the physical path to the location of the dist folder created by the Angular CLI.

cid:image006.jpg@01D2D304.8DBDECD0

Any one of these three options shown below will work.

cid:image007.jpg@01D2D304.8DBDECD0

Install the URL Rewrite Module into IIS

This next step is required to support deep-linking, which is the capability for the user to navigate directly to a page by typing the route into the address bar instead of using the Angular routing. Deep-linking causes a problem for IIS because the URL that the user attempts to access is not known to the server and therefore the user receives a 404 response. The solution is for the server to always return the root of the application, even if the user requests a path within the application.

Get the URL Rewrite Module installer here: https://www.iis.net/downloads/microsoft/url-rewrite

After installing you should see a new icon in the IIS Manager.

cid:image008.jpg@01D2D304.8DBDECD0

Add web.config file with a URL Rewrite rule

All requests to this web application that are not for files or folders should be directed to the root of the application. For an application or virtual directory under the default web site, the URL should be set to the alias, (e.g. “/MyApp/”). For a web site at the root of the server, the URL should be set to “/”.

<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="/MyApp/" />

        <!--<action type="Rewrite" url="/" />-->

      </rule>

    </rules>

  </rewrite>

</system.webServer>

</configuration>

Troubleshooting

Problem: Navigating directly to a route results in a 404.

Solution: Make sure the web.config is correct and the URL property in the web.config matches both the base href in the index.html and the web application or virtual directory alias if necessary.

Problem: Navigating directly to a route results in a 500 or an error message related to the web.config.

Solution: Install the URL Rewrite module.

Problem: Navigating directly to a route displays a broken page and network/console errors show 404 results for js and css requests.

Solution: Verify that the base href in the index.html exactly matches the URL in the rewrite rule and that the slashes surrounding the name are not missing.

3 comments

Discussion is closed. Login to edit/delete existing comments.

  • Peyman Ranjbar 0

    Hi
    thanks for great Tips.
    but I still have this issue after running the instructions you provided.
    only the loading page of angular loads and when I look in developers tools, I see all files with the same size and same contents as the index.html.
    where is the problem?

  • Michael Gledhill 0

    AMAZING tips… thank you so much.

  • Eric Malalel 0

    Thanks for this tutorial, it works fine, I have read others before but they all failed.

Feedback usabilla icon