Angular2 - page refresh 404ing when hosted in Azure

Question

I am working on an Angular2 app. It uses "@angular/common": "2.0.0-rc.4" and "@angular/router": "3.0.0-beta.2".

My problem is that when I use the browser refresh on some of the pages I see an error saying...

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

This also happens if I hit the url directly.

An example url is... https://tilecasev2.azurewebsites.net/profile/therichmond

However if you view pages via the homepage they work ok but only until refreshed (https://tilecasev2.azurewebsites.net).

I have the below in my index.html head...

<base href="/"> 

Why does this happen and how can I fix it?

Answer 1

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>

Answer 2

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

Answer 3

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/