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?

Sounds like a dup of http://stackoverflow.com/questions/31415052/angular-2-0-router-not-working-on-reloading-the-browser — Günter Zöchbauer, Aug 08 '16 at 07:35
I think the router has changed since then and the fix doesn't work anymore. — Ben Cameron, Aug 08 '16 at 07:43
It's not related to the router. The server needs to support HTML5 pushState or you need to switch the Angular2 router to use `HashLocationStrategy` then there is no server support required. — Günter Zöchbauer, Aug 08 '16 at 07:45
Yes that's it, fantastic, thank you. I followed these steps and it all works now. https://angular.io/docs/ts/latest/api/common/index/HashLocationStrategy-class.html — Ben Cameron, Aug 08 '16 at 08:26

score 38 · Accepted Answer · answered Oct 12 '16 at 20:00

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>

I put the web.config in the 'src' folder and everything is working now. — TheRealDanBiss, Nov 15 '17 at 20:34
I add that after you add this web.config in the src folder of the application that you update the webpack to include it. If you use angular-cli update the angular-cli.json file and include it in the assets section. "assets":["web.config"...] — Corey Witherow, Jan 17 '18 at 16:43

score 2 · Answer 2 · answered Jul 02 '19 at 07:51

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/

Angular2 - page refresh 404ing when hosted in Azure

2 Answers2

Linked