Angular 7 web app page refresh gives "The resource you are looking for has been removed, had its name changed, or is temporarily unavailable."

Question

I'm working on a angular 7 web application which is hosted in IIS in Windows Server 2012 R2. This is on ASP.NET CORE 2.2.

When I navigate the application with the domain name it works fine, but if refresh the page I visited, then it gives me "The resource you are looking for has been removed, had its name changed, or is temporarily unavailable."

If I check the developer tools in chrome, it shows me the following error. Please refer the image below:

This user-type-selection:1 is the route path and the param value.

I tried to add the web.config in the src folder on the ClientApp and it as an asset in angular.json. It add the web.config in the release folder but it give me 500 internal server error for that.

Anyone has any thoughts about this?

Answer 1

This issue fixed with the following in the web.config:

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
  <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=”/my-app/” /> -->
          <action type="Rewrite" url="/" />
        </rule>
      </rules>
    </rewrite>
  </system.webServer>
</configuration>

Please make user URL Rewrite extension is installed in IIS.

I tried the above web.config before but without the above extension and it gave me the 500 error because of that.

Happy coding.