Web App Angular 404 on refresh

Brendan 0

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

1 answer

brtrach-MSFT 16,926 Reputation points Microsoft Employee

2024-10-18T00:04:07.5433333+00:00
@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 {}
Please sign in to rate this answer.
Anonymous

2024-10-22T15:20:18.1266667+00:00

Hi. Can you confirm this will work on an Azure App Service?

Hosted on Windows, Dotnet - v8.0, PremiumV3 (P1v3)?

Are there any other prerequisites / extensions / configurations that are required?
Sign in to comment

Use comments to ask for clarification, additional information, or improvements to the question.

Share via

Web App Angular 404 on refresh

1 answer

Your answer