Ionic-framework: bug: Ionic 4 back button restart app (DOM) when you are in root [Cordova/App]

Created on 13 Jul 2019  路  11Comments  路  Source: ionic-team/ionic-framework

Bug Report

Ionic version:


[x] 4.6.2 | 4.1

Current behavior:

the android back button reboots doom when it is in the last component

Gif
Expected behavior:
Close app

Steps to reproduce:

  • Run ionic start "new project"
  • Choose tab app
  • run in android platform

example image

Other information:

I noticed the error when I was developing my app and I stopped at the root page and press the button back. Apart from this, it is not detecting the backbutton subscribe
Ionic info:

Ionic:

   Ionic CLI                     : 5.0.1 (/usr/lib/node_modules/ionic)
   Ionic Framework               : @ionic/angular 4.6.2
   @angular-devkit/build-angular : 0.13.9
   @angular-devkit/schematics    : 7.3.9
   @angular/cli                  : 7.3.9
   @ionic/angular-toolkit        : 1.5.1

Cordova:

   Cordova CLI       : 9.0.0 ([email protected])
   Cordova Platforms : android 8.0.0
   Cordova Plugins   : cordova-plugin-ionic-keyboard 2.1.3, cordova-plugin-ionic-webview 4.0.1, (and 24 other plugins)

Utility:

   cordova-res : not installed
   native-run  : 0.2.7

System:

   Android SDK Tools : 26.1.1 (/home/juan/Android/Sdk)
   NodeJS            : v11.15.0 (/usr/bin/node)
   npm               : 6.10.0
   OS                : Linux 4.19

core bug

Most helpful comment

Hi @SidiBecker,

here is a little guide for you:

  1. clone the ionic repo/your forked repo

    • open your favorite command line application

    • run git clone https://github.com/ionic-team/ionic or git clone url-to-your-fork and change the directory to the cloned repo (cd ionic)

    • make sure to checkout the tagged commit for the current released version with git checkout v4.6.2

  2. install node modules

    • runnpm install in the base directory of the cloned repo

    • change the directory to the core directory and run npm install again

  3. make the appropriate changes to the app.tsx file located under core/src/components/app (see https://github.com/ionic-team/ionic/pull/18794/files, the ionic devs already merged the pr and did some cleanings)
  4. build the core pagacke of ionic

    • make sure you are in the core directory of the ionic repo with your command line application

    • run npm run-script build

    • wait for build to complete. a dist folder should be created inside the core folder of the repo.

  5. copy the dist folder to the node_modules folder of your app project

    • locate the node_modules folder in the project directory of your app and open it. delete the dist folder inside @ionic/core.

    • copy the dist folder created by the build script in step 4 to the @ionic/core folder inside the node_modules of your app

  6. Finish :). With the next build of your app the hardware back button should work again.

Caution: Modifying your node_modules is a pretty dirty way and could result in other bugs/unexpected behaviors. I recommend you wait for the next offical release and just update your package.json reference of ionic.

All 11 comments

Hi there. The hardware back button was not imported in the app.tsx after the minify with arrow functions.
I`m providing a pull request.

Hi @tntwist thanks for your contribution, how could you test your contribution of the ionic core? or I have to wait for the approval of the pull request. Thank you

Hi @Juanperezc. You can clone the ionic repo and then make the appropriate changes (See #18794 ) in your local clone. After this you can build the ionic core package manually and copy the contents of the resulting dist folder to the node_modules folder of ionic core in your app. I know it麓s a bit dirty though you can get the hardware back button working again without waiting for an update of ionic.

Hi @tntwist, would it be too much to ask how I do it?

Hi @SidiBecker,

here is a little guide for you:

  1. clone the ionic repo/your forked repo

    • open your favorite command line application

    • run git clone https://github.com/ionic-team/ionic or git clone url-to-your-fork and change the directory to the cloned repo (cd ionic)

    • make sure to checkout the tagged commit for the current released version with git checkout v4.6.2

  2. install node modules

    • runnpm install in the base directory of the cloned repo

    • change the directory to the core directory and run npm install again

  3. make the appropriate changes to the app.tsx file located under core/src/components/app (see https://github.com/ionic-team/ionic/pull/18794/files, the ionic devs already merged the pr and did some cleanings)
  4. build the core pagacke of ionic

    • make sure you are in the core directory of the ionic repo with your command line application

    • run npm run-script build

    • wait for build to complete. a dist folder should be created inside the core folder of the repo.

  5. copy the dist folder to the node_modules folder of your app project

    • locate the node_modules folder in the project directory of your app and open it. delete the dist folder inside @ionic/core.

    • copy the dist folder created by the build script in step 4 to the @ionic/core folder inside the node_modules of your app

  6. Finish :). With the next build of your app the hardware back button should work again.

Caution: Modifying your node_modules is a pretty dirty way and could result in other bugs/unexpected behaviors. I recommend you wait for the next offical release and just update your package.json reference of ionic.

Thank you so much @tntwist!

You're welcome @SidiBecker :)

Thank you so much, its work for me, waiting for the new version v4.6.3

Thank you so much @tntwist

Thanks! This has been fixed and will be available in the Ionic 4.7.0 release.

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.

Was this page helpful?
0 / 5 - 0 ratings