Angular website problem with Azure on page reload

Question

Problem: whenever I reload any page except main I get 404 Not Found error. It happens only on Azure (local host works fine). I am using Angular 5. Here is what browser shows me on page reload: "The resource you are looking for has been removed, had its name changed, or is temporarily unavailable."
Website url: http://learnwithmentor.azurewebsites.net/
Web.config: https://github.com/ss-ita/learnwithmentor-server/blob/master/LearnWithMentor/Web.config

rickvdbosch rickvdbosch · Accepted Answer · 2018-11-29T14:15:19

You're probably using Angular routes, right? You need to add some URL rewrites because IIS is currently checking if the file or directory your URL points to exists. And since they don't it gives you an error message.

This goes into your web.config under 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>

Angular website problem with Azure on page reload

1 Answers