History.back() error

Thanks! This is the link.

1 Like

Don’t do this. Ionic is extremely fragile in a desktop browser. Navigate with NavController and ViewController. Depending on the structure of your page and providers, you might need to do special things to handle the user clicking back button, forward button or refresh. It can get technical.

1 Like

Interesting, I can reproduce the error by just using the browser back button.

Here is an issue about this:

Seems like a pretty clear bug.

IMHO, Ionic aiming to be used as PWA (in addition to Cordova usecase), the browser navigation would be expected to work the same way as the ionic navigation API, since deep linking is configured.
And the Android device back button causes the same issue. I tested on a website, not a Cordova app, but my guess is that it behaves the same on that part.

You can expect anything you want, but the historical reality is that the Ionic dev team met with the Angular dev team and designed a different router for Ionic that prioritized a native device feel, and pretty much ignored the desktop. One of the main objectives in 2017 is to get Ionic to behave more like a PWA also. But it’s not there yet. For example, if you use NavParams in your code, your code is almost certainly not robust with respect to the desktop refresh button.

1 Like

Noted, thanks. So once this issue is solved, Ionic will be one step closer to a great web navigation. And it seems it will also help to address the native app navigation on Android, when using the device hardware back button.

1 Like

My guess would be that “great web navigation” will arrive in Ionic Framework 4.x, where x is around 3, 4 or 5. That means some breaking changes for all our version 3 code, but Framework 4 is intended to be web component compliant, so that will help a lot.


Can you please explain as to how are you referencing the actual TestPage in your home component?

Not at all because of lazy loading:

I know, that’s why was trying to elicit an explanation from @Johnny13 :wink: But now that you’ve already explained it, my next question to @Johnny13 is “What is import { HomePage } from '../pages/home/home'; doing in your app.components.ts then?” :thinking:

(We need a “rethorical or educational question” tag I think :wink: - Sorry for messing with your plan)

Haha! no problems, you are always welcome! Just wanted to simplify everything rather than think in a complex way from the start.



Hey @Johnny13 your screenshot does not match up with the git source you’ve linked, please make sure which code you are actually using and let us know.

Ah now i see what’s the Problem

Try using

$(document).keypress(function(e) {
if (e.which == 27) {

By default, the navbar class has a bottom-margin of 20px. That’s what’s creating the space beneath the navbar area. You can override this in your own stylesheet. Just add this to your CSS:

.navbar {margin-bottom: 0;}
You could also set a negative margin on the content class, but that’s a bit of a hack.

.content {margin-top: -20px;}
Good luck.
see: ShowBox VidMate Mobdro

Dude, but if we use 20px as margin, it will become to narrow one and that may not look better. In my point of view, it’s always better to first check the space and do some trail and error method to come to conclusion of the px.
We should also make sure to include the {margin-botton: 0;}

As a matter of course, the navbar class has a base edge of 20px. That is what’s making the space underneath the navbar region. You can supersede this in your very own template. Simply add this to your CSS:




Hey I also faced the same issue in my browser! But now I’ve repaired it! https://www.jlsprockets.com/