Web App Angular 404 on refresh

Question

Hi

So ran into an issue, we currently have an angular website which is currently running as a standard web app on our azure portal.

We currently are getting an issue on it when we refresh the a page that extends beyond the initial index page we get a 404 page not found error

e.g. initial page https://indexpage.net/ after navigating https://indexpage.net/prod/cons/stopprocess.

After looking around on the net suggestion was to use a staticwebapp.config.json but like mention the site is deployed as a wen app and not as a static web site.

Others was was to try and modify the web.config file but this causes the site to crash. Below is a method we have tried.

Example

<?xml version="1.0" encoding="utf-8"?>
<configuration>
  <location path="." inheritInChildApplications="false">
    <system.webServer>
      <handlers>
        <add name="aspNetCore" path="*" verb="*" modules="AspNetCoreModuleV2" resourceType="Unspecified" />
      </handlers>
      <aspNetCore processPath=".\someexename.exe" stdoutLogEnabled="false" stdoutLogFile=".\logs\stdout" hostingModel="inprocess" />
     
      <rewrite>
      <rules>
        <rule name="AngularJS" 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>
  </location>
</configuration><?xml version="1.0" encoding="utf-8"?> 
<configuration>   
	<location path="." inheritInChildApplications="false">     
		<system.webServer>       
			<handlers>         
<?xml version="1.0" encoding="utf-8"?>
<configuration>
  <location path="." inheritInChildApplications="false">
    <system.webServer>
      <handlers>
        <add name="aspNetCore" path="*" verb="*" modules="AspNetCoreModuleV2" resourceType="Unspecified" />
      </handlers>
      <aspNetCore processPath=".\StruMISWebService.exe" stdoutLogEnabled="false" stdoutLogFile=".\logs\stdout" hostingModel="inprocess" />
     
      <rewrite>
      <rules>
        <rule name="AngularJS" 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>
  </location>
</configuration>

We also tried something along these lines as well:

<httpErrors>
<remove statusCode="404" subStatusCode="-1" />
<error statusCode="404" prefixLanguageFilePath="" 
path="http://yoursite.com/index.asp?syserror" responseMode="Redirect" />
</httpErrors>

Thank you for any assistance that anyone can provide

Answer 1

@Brendan The 404 error on page refresh typically occurs because the server doesn’t know how to handle client-side routing. Here are a few steps you can take to resolve this issue:

Your approach with the web.config file is on the right track, but it seems there might be some redundancy or misconfiguration. Here’s a streamlined version of the web.config file that should help:

<configuration>
  <system.webServer>
    <rewrite>
      <rules>
        <rule name="AngularJS" 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>

Lastly, if modifying the server configuration is not an option, you can switch to using HashLocationStrategy in your Angular app. This will avoid the need for server-side URL rewriting:

import { LocationStrategy, HashLocationStrategy } from '@angular/common';

@NgModule({
  providers: [{ provide: LocationStrategy, useClass: HashLocationStrategy }]
})
export class AppModule {}