1

I have an ionic app that I use as a pwa, I have install @angular/pwa with ng add @angular/pwa then I run ionic build --prod and I upload all y www folder on my server but when I refresh a page I got 404 Not Found The requested URL was not found on this server.

Someone knows why ? I don't know which file and folder I should share with you to help so let me know if needed. Thank ou everyone

Yann92
  • 383
  • 4
  • 15
  • can you expand on what is the issue? the build succeeds and you can go to www on your computer and launch http-server from that www folder and access pwa but after you upload it to your hosting it does not work or? – Sergey Rudenko Jul 08 '20 at 17:26
  • Thanks for answering. Yes the build succeeds, the launch http-server works but when I refresh the page it gives error page instead of refreshing the page... same thing on the real server ... – Yann92 Jul 08 '20 at 17:33
  • so you just press browser refresh and it goes 404? does this look similar: https://stackoverflow.com/questions/50907736/refreshing-the-page-results-in-404-error-angular-6? – Sergey Rudenko Jul 08 '20 at 17:39
  • yes it's quiet the same, but they use a trick of angular using # in url and I don't want to use it.. – Yann92 Jul 10 '20 at 06:37

2 Answers2

1

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 $uri /index.html?$args;
    }
    ...

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

Tatayoyoh
  • 11
  • 2
0

This may be too late for you, but I had the same trouble with my PWA. If you look in your www folder and open your index.html file you will need to make this change.

<base href="/">

to

<base href="">

If the above doesn't work you can try putting a .htaccess file in your project root directory that sends all request back to the index.html page. Just create the file .htaccess and put the below code inside the file.

DirectoryIndex index.html
ErrorDocument 404 https://in-info-web4.informatics.iupui.edu/~username/appName/
Todd Shelton
  • 1
  • 1