Reload 404 ERROR: Cannot GET /home

[Apro123]

So when you run and install the cordova plugin for google maps, it works fine. However, when you hit the reload button, it gives you a 404 error.

I see that there was a 404.html page created on this [demo:] (https://mapsplugin.github.io/ionic-googlemaps-quickdemo-v4/home).

I was wondering how that is done. I have tried many solutions but none of them yielded any results.

Solution attempt 1: In app-routing.module.ts

{
    path: '**',
    redirectTo: '',
    pathMatch: 'full'
  },

Solution attempt 2: created similar 404.html file in the www folder In config.xml

<widget>
     ...
    <preference name="ErrorUrl" value="404.html" />
    <error-page>
        <error-code>404</error-code>
        <location>/404.html</location>
    </error-page>
</widget>

I'm submitting a ... (check one with "x")

• [X] question
• [X] any problem or bug report
• [x] feature request

If you choose 'problem or bug report', please select OS: (check one with "x")

• [ ] Android
• [ ] iOS
• [X] Browser

My repo is [here] (https://www.github.com/Apro123/SusMap).

Any help is greatly appreciated.

[wf9a5m75]

Thank you for your suggestion. I already found a solution, but it applied to new demo (not it's not ready for linked to it yet)

This URL should open the marker demo page https://mapsplugin.github.io/ionic-googlemaps-quickdemo-v5/marker

[wf9a5m75]

The reason of 404 is GitHub page system does not provide catch all function.

My solution is to create a symbolic link to index.html as 404.html

[Apro123]

Yes but how do I do that in my app. I did what you implemented in your package.json

{
    path: ':catchall_must_be_last',
    redirectTo: '',
    pathMatch: 'full'
  }

and I created the symbolic link for 404.html to index.html manually and I am unable to produce the same effect when I run it locally.

[wf9a5m75]

  {
    path: ':catchall_must_be_last',
    redirectTo: 'basics',
    pathMatch: 'full'
  }

:catchall_must_be_last hits any paths starts with /. It's the same as :params. Then redirect to /basics

[wf9a5m75]

package.json is not related with this.

Only app-routing.module.ts and docs/404.html and docs/index.html (docs for Github pages)

[Apro123]

Yeah sorry. I meant app-routing.module.ts. I have achieved somewhat of that effect. When I reload it, sometimes it works sometimes it doesnt.

Check it out at https://apro123.github.io/SusMap

Moreover, if you visit https://apro123.github.io/SusMap/ (with the "/" then the code breaks)

Also how do I achieve this in a regular setting (not github pages).

[wf9a5m75]

The reason of sometimes does not work is here.

public htmlInfoWindow = new HtmlInfoWindow();

You need to wait platform.ready before using HtmlInfoWindow

[wf9a5m75]

404.html is for Github pages system.

The way of implement catchAll depends on the http server. If you use Apache, we usually use .htaccess file.

[Apro123]

Thanks for that. I changed the code to make sure HTMLInfoWindow gets created after platform.ready by putting it within the then of the platform.ready promise.

If you hit reload on url with "/" it works!.

However, I have multiple pages in my application which take in a specific url. If you hit reload on that, then it give you an error. Steps to reproduce:

1. Click on building
2. Click on building info window
3. Click on arrow
4. Reload the page

[Apro123]

Also I am getting this warning Could not find cordova.js script tag. Plugin loading may fail.

Which may not be too harmful, but my assets folder is not getting loaded before the config xml looks for the specific image to show for the splash screen.

[wf9a5m75]

How do you build? Do you use ionic cordova build browser --prod --release?

[Apro123]

yes. then I copy everything in www to the docs folder. Make the 404 link to index.html. Copy platforms/browser/config.xml to docs folder

[wf9a5m75]

Umm, it seems the web page works correctly from my side.

[Apro123]

So the splash screen image is working correctly for you? (on github pages)

[wf9a5m75]

I removed the splash screen image.

It does not work on browser, which is the bug of the splash screen plugin (check the Chrome Dev Tools, and find out why)

[Apro123]

It works when use ionic cordova run browser on my local machine.

Some things I noticed:

1. The splash screen image is in the assets images folder and for some reason, github pages doesnt send that first to the client.
2. I am using that same splash screen image in another part of my application and it works perfectly.

[Apro123]

Soon I am going to try using a service worker to store that image, since I am planning on distributing this app as a pwa. Otherwise, I see no other possible solution for the splash screen image