Open Closed

Page Refresh Error #406


User avatar
1
gvnuysal created
  • ABP Framework version: v3.1.0
  • UI type: Angular
  • Tiered (MVC) or Identity Server Seperated (Angular): yes
  • Exception message and stack trace:
  • Steps to reproduce the issue:

Hi Support, When I publish on IIS, If I refresh the page at http://localhost:4200, I do not get an error. If I renew it at http://localhost:4200/setting-management page, I get HTTP Error 404.0 - Not Found error If I refresh all pages except http://localhost:4200, the page was not found I get an error. I create the build file with the npm run build command. I throw the generated files onto IIS.


2 Answer(s)
  • User Avatar
    1
    maliming created
    Support Team Fullstack Developer

    hi @gvnuysal

    Angular uses client side routing. If you refresh a page (F5) then IIS will handle the request and will not find the requested path and returns a HTTP 404 error. We should configure IIS to redirect all requests to the index.html page (or, to the root path). At the same time, IIS needs to install the URL Rewrite module, please refer to https://www.iis.net/downloads/microsoft/url-rewrite

    You can try the following web.config.

    <?xml version="1.0" encoding="utf-8"?>
    <configuration>
      <system.webServer>
        <staticContent>
          <remove fileExtension=".json" />
          <mimeMap fileExtension=".json" mimeType="application/json" />
    	  <mimeMap fileExtension="woff" mimeType="application/font-woff" />
          <mimeMap fileExtension="woff2" mimeType="application/font-woff" /> 
        </staticContent>
        <!-- IIS URL Rewrite for Angular routes -->
        <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" />
                <add input="{REQUEST_URI}" pattern="^/(api)" negate="true" />
              </conditions>
              <action type="Rewrite" url="/" />
            </rule>
          </rules>
        </rewrite>
      </system.webServer>
    </configuration>
    
  • User Avatar
    0
    gvnuysal created

    Hi @maliming, I was able to do it by trying the steps on this link.

    https://medium.com/wineofbits/angular-2-routing-404-page-not-found-on-refresh-a9a0f5786268

    thanks,

Made with ❤️ on ABP v9.1.0-preview. Updated on November 11, 2024, 11:11