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 stackoverflow.com/questions/31415052/… — Günter Zöchbauer
– Günter Zöchbauer, Commented Aug 8, 2016 at 7:35
I think the router has changed since then and the fix doesn't work anymore. — Ben Cameron
– Ben Cameron, Commented Aug 8, 2016 at 7: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
– Günter Zöchbauer, Commented Aug 8, 2016 at 7:45
Yes that's it, fantastic, thank you. I followed these steps and it all works now. angular.io/docs/ts/latest/api/common/index/… — Ben Cameron
– Ben Cameron, Commented Aug 8, 2016 at 8:26

Steve Lillis · Accepted Answer · 2016-10-12 20:00:43Z

38

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>

answered Oct 12, 2016 at 20:00

Steve Lillis

3,2645 gold badges25 silver badges41 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

TheRealDanBiss Over a year ago

I put the web.config in the 'src' folder and everything is working now.

Corey Witherow Over a year ago

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"...]

Muni Chittem · Accepted Answer · 2019-07-02 07:51:25Z

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/

Collectives™ on Stack Overflow

Angular2 - page refresh 404ing when hosted in Azure

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related