Web App Angular 404 on refresh

Brendan 0 Reputation points
Oct 16, 2024, 11:48 AM

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

Azure App Configuration
Azure App Configuration
An Azure service that provides hosted, universal storage for Azure app configurations.
239 questions
0 comments No comments
{count} votes

1 answer

Sort by: Oldest
  1. brtrach-MSFT 16,686 Reputation points Microsoft Employee
    Oct 18, 2024, 12:04 AM

    @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 {}
    

Your answer

Answers can be marked as Accepted Answers by the question author, which helps users to know the answer solved the author's problem.