Need to fix routing issue with Angular 2 running on an Azure App service

Question

I have an angular 2 website that is based on the Angular 2 "Tour of Heroes" Quick Start.

It works fine when running locally. After fixing things to no longer use local node_modules (per the deployment steps from the quick start) and deploying to the Azure web app the app works fine if I start at the root URL ("/"). However, using Angular routing the URL changes (to "/home" for example) and if I do an F5 refresh of that URL, the app fails to load. When I do that I get a 404 with:

The resource you are looking for has been removed, had its name changed, or is temporarily unavailable.

I tried using a web.config as described here but that did not help. It definitely seems like it is an IIS issue where it tries to serve up a page instead of starting with index.html. My routes are defined in Angular and they work locally.

Answer 1

Can you try this web.config file

<configuration>
    <system.webServer>
         <rewrite>
            <rules>
              <rule name="AngularJS 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="/" />
              </rule>
            </rules>
          </rewrite>
          <caching enabled="true" enableKernelCache="true">
              <profiles>
                  <add extension=".js" policy="DisableCache" kernelCachePolicy="DisableCache" />
              </profiles>
          </caching>
    </system.webServer>
</configuration>