Ionic 4 - Url Navigation broken when running via cordova (browser)

Ionic Framework
1

Hey Guys,

I am building the Angular Router Tutorial Application using Ionic 4 in preparation of a real world project build in Ionic 4.
So far I could find workarounds for every problem I encountered, but now I am stuck:
The latest part of the tutorial was adding a dialog, which asks the user, if she really wanna leave.
As I deploy the app to mobile devices too, naturally I wanted to use @ionic-native/dialogs for that.
First problem, after the manual version selection of the newest beta: ionic serve does not work anymore, as Dialogs cannot find cordova.

This is fine, I add the browser platform to cordova and instead of ionic serve I use ionic cordova emulate browser or ionic cordova run browser. As expected, the dialogs are now working, but something strange happened: The URL navigation broke!

As Ionic 4 now uses the angular router, one navigates the app via URL changes. This is create for e.g. sharing an URL and one can directly type an URL into the address bar and navigate to it. This worked fine with ionic serve, I could directly navigate into a sub-url. Using ionic cordova run browser shows an 404 error if using a sub-url directly (and the error page is generic, not the one defined in the app). Accessing the app only works via the root-route.

Another strange think is that when I navigate the app, the url changes accordingly, but doing a F5 refresh yields again the generic 404 error page. Please look at the gifs for a visual representation.

Does anyone have an idea how to fix this?

IONIC SERVE
ionic_serve
IONIC CORDOVA RUN BROWSER
ionic_cordova

2

I donā€™t know much about Cordova but I have been able to publish an app in 4.x without the use of adding cordova browser.

It looks like cordova browser is interfering with Angularā€™s routing.

Have you tried removing the plugin and building the project?

3

Thanks for your reply.
As I stated in my post, I want to use cordova-plugins/ionic-native, in this case the dialogs plugin, as I want to publish to mobile devices too.
So I have to use cordova browser for browser deployment, else cordova is not available in the browser (obviously) and the dialogs code throws at runtime.

I know that I can work around that by checking platforms in my code and not use cordova in the browser at all, but well, that is why I am using cordova, I shouldnā€™t be the one checking the platform, it should ā€œjust workā€, as long as the plugin supports the platforms.

That is why I was asking for a fix, I am aware that I can work around that (i.e. not using cordova in the browser and do explicit platform checking in code), but I believe this not to be the fix.

EDIT: Of course, in this case I could ditch the dialogs plugin and use e.g. window.confirm(), but this is more of a case study of Ionic, there are bound to be native plugins I would not be able to ditch in the real project.

4

Sorry that I did not catch the part about cordova dialogs.

5

So, I think I found it:
History Mode is not working with cordova!
One has to use ā€˜hash modeā€™ for routing.

If one does not know what this is, google it, it involves modern vs. legacy routing approach to server-less SPAs.

6

Looks like youā€™ve figured out your problem, but for future reference using Cordova browser builds isnā€™t recommended by Ionic. If youā€™re looking for an approach where you donā€™t have to worry about using platform checks and just having the code work where the functionality is available, you might prefer to use Ionicā€™s Capacitor instead. It is still in beta, but the general idea is that all the APIs will have a web implementation where the functionality is available and fail gracefully if it isnā€™t available.

2 Likes
7

Nice to know thanks!

Just tried that today, as it sounded pretty cool.
Unfortunately, could not get an android build to run, after several hiccups it did finally build in Android Studio and started on the device, but after the (capacitor) splashscreen I was welcomed with a Connection refused to localhost:7516 message and gave up on this project.

For the production project, I think we will go with cordova and explicit platform checks for now, as this seems the most reliable.
Would love to pick up capacitor in the future though (as a PWA is part of the roadmap), a cordova to capicator guide, when capacitor is more stable, would be awesome by that time!

8

Yeah although there isnā€™t too much required in moving from Cordova to Capacitor, I think a transition guide would definitely be useful (Iā€™ve been considering writing one).

There might be some difficulties in in switching to Capacitor if you arenā€™t familiar with how it works, but even though it is in beta it is very stable today and I think there is already quite a few people already using it in production (Iā€™ve been using it for many months with no real issues). Ionic have said itā€™ll be out of beta soon, but there is very little that is going to be changing as itā€™s mostly already there.

9

Well, this sounds promising. Do you have any idea where my error could come from?

I removed all cordova platforms from my package.json (via ionic cordova platform rm) and plugins from my code, added capacitor according to the guide, build and then synced.
I did notice that it uses the (cordova) www folder by default, is this correct?

10

Yes, by default the www folder is used so you should be able to run ionic build --prod or npm run build:prod (depending on the version you are using) to create the build.

Iā€™ve never tried transitioning from a Cordova to a Capacitor project before (as in, adding Capacitor to the same project rather than starting a new project with Capacitor) so Iā€™m not 100% sure on all the places where you might get stuck. It is worth noting that although most Cordova plugins will work with Capacitor, not all of them will. The Splash Screen plugin for example causes conflicts with Capacitor and needs to be removed.

This is why a Cordova -> Capacitor guide might be interesting, because Iā€™m sure there are at least a few things Iā€™m not thinking of that could trip people up.

11

Yes, the documentation is clear about that.
Well, thank you for your time. I think I will commit a little more time to capacitor.

I am using ionic 4 and ionic build.

12

Thanks. I am facing the same issue. Capacitor seems to have some limitations around browser support for Cordova plugins. @joshmorony, could you please suggest some workaround.

13

Hi i tried to google your hint about History mode not working with cordova but i canā€™t get anything from there.

My app router worked fine until i tried to add aws amplify. I removed every trace of amplify but my router still doesnā€™t work if I just do a simple

<ion-item [href]="link.url" routerDirection="root">
  <ion-label>{{ link.title }}</ion-label>
</ion-item>

with link.url = ā€œ/loginā€ for exemple

Do you have any workaround ?

14 
{ provide: LocationStrategy, useClass: HashLocationStrategy }

Add this code to ā€˜app.module.tsā€™ providersā€™s array , now everything works fine.

11 Likes
15

Thank you ! Works perfectly

16

works for me a simple solution
Thanks bro

17

Hi, So I was reading all the comments here and I found my self still in this mess. The routing doesnā€™t seem to work even when I provided the following code as some of you said:
{ provide: LocationStrategy, useClass: HashLocationStrategy }

Did anyone find a solution till now because at the moment I have tabs in my application and they are working fine, but once I click on an item link to route me to a page, the page doesnt show up, basically i am still in the same problem.

Thanks

18

It work for me also, thank you.

Now the url have a # in it, like this : http://localhost:8000/#/tabs/tab1
Is there some way to get rid of the hash symbol ?

1 Like
19

Thank you so much ā€¦