ionic error with back button hardware

[aragon5956]

Prerequisites

• [X] I have read the Contributing Guidelines.
• [X] I agree to follow the Code of Conduct.
• [X] I have searched for existing issues that already report this problem, without success.

Ionic Framework Version

v7.x my package.json

{
  "name": "FacilNdf",
  "version": "0.0.1",
  "author": "Ionic Framework",
  "homepage": "https://ionicframework.com/",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular-devkit/build-angular": "^17.0.9",
    "@angular-devkit/core": "^17.0.9",
    "@angular-eslint/eslint-plugin": "^17.2.0",
    "@angular/animations": "^17.0.8",
    "@angular/cdk": "^17.0.4",
    "@angular/common": "^17.0.8",
    "@angular/core": "^17.0.8",
    "@angular/forms": "^17.0.8",
    "@angular/platform-browser": "^17.0.8",
    "@angular/platform-browser-dynamic": "^17.0.8",
    "@angular/router": "^17.0.8",
    "@auth0/angular-jwt": "^5.2.0",
    "@awesome-cordova-plugins/calendar": "^6.6.0",
    "@babel/runtime": "^7.23.7",
    "@capacitor-community/http": "^1.4.1",
    "@capacitor/camera": "^5.0.8",
    "@capacitor/core": "^5.6.0",
    "@capacitor/filesystem": "^5.2.0",
    "@capacitor/ios": "5.6.0",
    "@capacitor/keyboard": "^5.0.7",
    "@capacitor/preferences": "^5.0.6",
    "@ionic-native/android-permissions": "^5.36.0",
    "@ionic-native/base64-to-gallery": "^5.36.0",
    "@ionic-native/camera": "^5.36.0",
    "@ionic-native/core": "^5.36.0",
    "@ionic-native/ftp": "^5.36.0",
    "@ionic-native/native-storage": "^5.36.0",
    "@ionic-native/screen-orientation": "^5.36.0",
    "@ionic/angular": "^7.6.3",
    "@ionic/angular-toolkit": "^10.0.0",
    "@ionic/cordova-builders": "^10.0.0",
    "@ionic/storage-angular": "^4.0.0",
    "@jridgewell/sourcemap-codec": "^1.4.15",
    "@npmcli/fs": "^3.1.0",
    "@types/ssh2": "^1.11.18",
    "@types/ssh2-sftp-client": "^9.0.3",
    "@typescript-eslint/parser": "^6.18.0",
    "angular-calendar": "^0.31.0",
    "bcryptjs": "^2.4.3",
    "crypto-js": "^4.2.0",
    "date-fns": "^3.1.0",
    "ion7-calendar": "^3.6.29",
    "ionic-native-sftp-leapfroggr": "^1.0.1",
    "ionicons": "^7.2.2",
    "jwt-decode": "^4.0.0",
    "moment": "^2.30.1",
    "mongodb": "^6.3.0",
    "ngx-toastr": "^18.0.0",
    "odometer": "^0.4.8",
    "path-exists": "^5.0.0",
    "rxjs-compat": "^6.6.7",
    "rxjs-observable": "^0.0.7",
    "serve": "14.2.1",
    "signature_pad": "^4.1.7",
    "sweetalert2": "^11.10.2",
    "swiper": "^11.0.5",
    "ts-md5": "^1.3.1",
    "tslib": "^2.6.2",
    "uuid": "^9.0.1",
    "zone.js": "^0.14.2"
  },
  "description": "application mobile facile",
  "devDependencies": {
    "@angular/cli": "17.0.9",
    "@capacitor/android": "5.6.0",
    "@capacitor/cli": "^5.6.0",
    "@types/node": "^20.10.7",
    "cordova-android": "^12.0.1",
    "cordova-plugin-device": "2.1.0",
    "cordova-plugin-ionic-keyboard": "^2.2.0",
    "cordova-plugin-ionic-webview": "^5.0.1",
    "cordova-plugin-splashscreen": "6.0.2",
    "cordova-plugin-statusbar": "^4.0.0"
  },
  "cordova": {
    "plugins": {
      "cordova-plugin-statusbar": {},
      "cordova-plugin-device": {},
      "cordova-plugin-splashscreen": {},
      "cordova-plugin-ionic-webview": {},
      "cordova-plugin-ionic-keyboard": {}
    },
    "platforms": [
      "android"
    ]
  }
}

Current Behavior

Impossible to go to the previous url wit this code:

import { AfterViewInit, Component, OnInit } from '@angular/core'; import { FormBuilder, FormGroup, Validators } from '@angular/forms'; import {ActivatedRoute, Router} from "@angular/router"; import {Platform} from "@ionic/angular"; @Component({ selector: 'app-conges', templateUrl: './conges.page.html', styleUrls: ['./conges.page.scss'], }) export class CongesPage implements OnInit ,AfterViewInit{ congesForm: FormGroup; parameters: any; username: any; selectedDates: [];

constructor(private formBuilder: FormBuilder,private route: ActivatedRoute, private router: Router,private platform: Platform) { try { this.platform.backButton.subscribeWithPriority(50, () => { const param = this.route.snapshot.params.param; console.log("on rentre dans le code du bouton retour"); this.router.navigate(['/accueil', {param}]) }); }catch (error :any){ console.error(error); } } ngAfterViewInit(): void { this.parameters=JSON.parse(this.route.snapshot.params.param); this.username=this.parameters.username; this.selectedDates=this.parameters.selectedDates; }

ngOnInit() { this.congesForm = this.formBuilder.group({ typeConges: ['', Validators.required], dateDebut: ['', Validators.required], dateFin: ['', Validators.required] }); }

onSubmit() { if (this.congesForm.valid) { console.log(this.congesForm.value);

const param=JSON.stringify( { username: this.username, selectedDates: this.selectedDates, congesFormValue: this.congesForm.value }); console.log(param); this.router.navigate(['/signature', {param}]); } console.log(this.congesForm.value); // Appel à l'API pour enregistrer les congés }

ngOnDestroy(): void { if (this.platform.backButton) { this.platform.backButton.unsubscribe(); } }

}

Expected Behavior

Go to the previous url

Steps to Reproduce

go to github issue of the repo but i can't share my repo

Code Reproduction URL

it's the proof that the back button hardware doesn't work and close the whole of the application

https://github.com/ionic-team/ionic-framework/assets/6029093/36758094-8635-4d7b-96b6-49e77494aad7

Ionic Info

Lastest versions of packages

Additional Information

No response

[ionitron-bot[bot]]

Thanks for the issue! This issue has been labeled as holiday triage. With the winter holidays quickly approaching, much of the Ionic Team will soon be taking time off. During this time, issue triaging and PR review will be delayed until the team begins to return. After this period, we will work to ensure that all new issues are properly triaged and that new PRs are reviewed. In the meantime, please read our Winter Holiday Triage Guide for information on how to ensure that your issue is triaged correctly. Thank you!

[liamdebeasi]

Can you please create a minimal reproduction of the issue? Since you can't share the entire application, I recommend removing code from that application until you arrive at a minimal reproduction. That way you don't need to share and private code.

[aragon5956]

i don't understand , is ti not sufficient sufficient with the video and the code ? for me it's enough

[aragon5956]

the code that is problematic is:"try { this.platform.backButton.subscribeWithPriority(50, () => { const param = this.route.snapshot.params.param; console.log("on rentre dans le code du bouton retour"); this.router.navigate(['/accueil', {param}]) }); }catch (error :any){ console.error(error); }"

[liamdebeasi]

Normally we ask for a runnable sample. However, looking at your package.json I can see the problem is @capacitor/app is not installed. This package is required for proper hardware back button functionality. Installing that package should resolve the issue.

[aragon5956]

yeaaaah thanks you very much !

[ionitron-bot[bot]]

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.