Angular on Azure: make the routing works

With Angular I can implement a Single Page Application. To manage the navigation between the various views, the Angular Router is used, which interprets the URL of the browser as an instruction to change the view. When you go to publish the app on Azure, the default behavior does not take a browser url change as a view change within the SPA, so the view breaks. It is therefore necessary to intervene to change the behavior and make Angular routing work again.

To do this, it may be sufficient to intervene by adding a web.config file in the base folder of the app:

with the following settings:

<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="/" />
              </rule>
            </rules>
          </rewrite>
    </system.webServer>
</configuration>

With this setup, you will use a URL rewrite module. It is already pre-installed and available in Azure (alternatively it can be activated as an extension on IIS server).

Basically, we enter a rule to take the URL and check if there is a file or directory corresponding to the address. If not, apply a redirect to the root '/'.

In this way the default routing is bypassed and the SPA routing is made functional.

For more information see:
Creating Rewrite Rules for the URL Rewrite Module
Angular Routing