When i refresh a page, i get Error 404

Ionic Framework Ionic Angular
1

I made a web app using Angular, and i uploaded the www folder in a Aruba Hosting.
When i type the URL, example: websiteurl.com i press Enter and the browser go to websiteurl.com/home
First question: Why it adds “home” at the end? I know that that’s the main page which is called home inside my project, but usually in other sites you get the main url without home for the first page.

But the problem is that if i refresh the page, i get the 404 Error.
How to solve this?

2

Hi

The angular project you uploaded has its routes defined and the default route seems to be /home

That page appears because you navigate to / which resolves to index.html, which as next step bootstraps the angular app (a Single Page App - SPA) and then shows the page you defined in angular

The 404 appears because the hosting server is likely not configured to host a SPA. The /home route does not resolve to anything, so the server returns a 404. The server needs to be configured to handle all request to your domain to /index.html.

If your hosting console does not offer this to you, then you should ask the provider if they can arrange it for you.

If not, then you need to move to a different hosting solution.

1 Like
3

Working well with Ionic LocationStrategy provider for app.module.ts as described here

Build your Ionic sources with ionic build --prod, and serve the generated www folder with NGINX.

NGINX default.conf configuration example :

 server {
    ...
    location / {
        root   /usr/share/nginx/html;
        index  index.html index.htm;
        try_files /index.html =404;
    }
    ...

NGINX’s try_files directive will do the job with Ionic PWA routing. Page refresh with F5 will not display 404 anymore :slight_smile:

4

For hosts that support .htaccess file:

.htaccess in /src folder

RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^ index.html [L]

This will redirect all request to index.html while maintaining the same page structure.

You can also add this config in angular.json to automatically include the .htaccess file in future builds (considering that you put the file in /src folder):

{
  "glob": ".htaccess",
  "input": "src/",
  "output": "/"
}

This config should be included in the build option, not in test!