Angular2 - page refresh 404ing when hosted in Azure

HashLocationStrategy avoids the issue by including a # in all of your angular routes but doesn't really fix it.

To make angular routes without hashes work in azure the same way they do in your local development environment, you just need to configure IIS to rewrite all requests as root. This lets angular handle the routing.

To do this, add a Web.config file to your site's root folder with the following contents:

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

If you deploying in same app service plan both angular and API project then this the solution.

<configuration><system.webServer>  <rewrite>    <rules>      <rule name="Angular" stopProcessing="true">        <match url=".*" />        <conditions logicalGrouping="MatchAll">          <add input="{REQUEST_URI}" pattern="^/api" negate="true" />          <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>

for more details refer this link https://less0.github.io/azure-angular-II/

As Gunter pointed out HashLocationStrategy needed to be setup.

I followed the steps in the Angular2 docs and it all works now...

https://angular.io/docs/ts/latest/api/common/index/HashLocationStrategy-class.html