IONIC Angular deployment – 404 on page Refresh

Table of Contents

This will work on following servers.

Apache Server

Add .htaccess on root to your project

<IfModule mod_rewrite.c>
    <IfModule mod_negotiation.c>
        Options -MultiViews -Indexes
    </IfModule>

    RewriteEngine On

    # Handle Authorization Header
    RewriteCond %{HTTP:Authorization} .
    RewriteRule .* - [E=HTTP_AUTHORIZATION:%{HTTP:Authorization}]

    # Redirect Trailing Slashes If Not A Folder...
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteCond %{REQUEST_URI} (.+)/$
    RewriteRule ^ %1 [L,R=301]

    # Handle Front Controller...
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteRule ^ index.html [L]
</IfModule>

IIS Server

Add web.config

<configuration>
  <system.webServer>
    <rewrite>
      <rules>
        <rule name="Imported Rule 1" stopProcessing="true">
          <match url="^(.*)/$" ignoreCase="false" />
          <conditions>
            <add input="{REQUEST_FILENAME}" matchType="IsDirectory" ignoreCase="false" negate="true" />
          </conditions>
          <action type="Redirect" redirectType="Permanent" url="/{R:1}" />
        </rule>
        <rule name="Imported Rule 2" stopProcessing="true">
          <match url="^" ignoreCase="false" />
          <conditions>
            <add input="{REQUEST_FILENAME}" matchType="IsDirectory" ignoreCase="false" negate="true" />
            <add input="{REQUEST_FILENAME}" matchType="IsFile" ignoreCase="false" negate="true" />
          </conditions>
          <action type="Rewrite" url="index.html" />
        </rule>
      </rules>
    </rewrite>
  </system.webServer>
</configuration>

Nginx Server

make changes on server file

Instead of using: try_files $uri $uri/ =404;

try using: try_files $uri $uri/ /index.html;

    server {
            listen 80;
            listen [::]:80;

            root /var/www/example.com/html;

        index index.html index.htm index.nginx-debian.html;

            server_name example.com www.example.com;

            location / {
                try_files $uri $uri/ /index.html;
             }
    }


Warning: Undefined variable $comments_number in /shared/webdir2/dothanhlong.org/wp-content/themes/business-hub/comments.php on line 35

Warning: Undefined variable $comments_number in /shared/webdir2/dothanhlong.org/wp-content/themes/business-hub/comments.php on line 39
0 thoughts on “IONIC Angular deployment – 404 on page Refresh”

Leave a Reply

Your email address will not be published. Required fields are marked *