IONIC 5 hardware back button causes the app close - ionic-framework

i'm using this code in my app.component.ts to handle hardware back button :
this.platform.backButton.subscribeWithPriority(10, (processNextHandler) => {
console.log('Back press handler!');
if (this.location.isCurrentPathEqualTo('/home')) {
// Show Exit Alert!
console.log('Show Exit Alert!');
this.showExitConfirm();
processNextHandler();
} else {
// Navigate to back page
console.log('Navigate to back page');
this.router.navigateByUrl['/home'];
this.location.back();
}
});
but it's not working it works only when lunch the app for the first time,later when I press back button the app closes ,I've tried many solutions but none of them works , both on simulator and real device with different versions of android (8,9,10) and same behaviour
my ionic info :
Ionic CLI : 5.4.16
Ionic Framework : #ionic/angular 5.6.13
#angular-devkit/build-angular : 0.803.29
#angular-devkit/schematics : 8.3.29
#angular/cli : 8.3.29
#ionic/angular-toolkit : 2.3.3
Cordova:
Cordova CLI : 10.0.0
Cordova Platforms : android 9.1.0
Cordova Plugins : cordova-plugin-ionic-keyboard 2.2.0, cordova-plugin-ionic-webview 4.1.3, (and 14 other plugins)
Utility:
cordova-res : 0.15.1
native-run : 1.4.0
System:
Android SDK Tools : 26.1.1 ()
NodeJS : v12.16.1 ()
npm : 6.13.4
OS : Windows 10

This is my Working Code here
this.plt.backButton.subscribeWithPriority(5, () => {
console.log("Back button Clicked")
var backRoute = this.prevRoute.getPreviousUrl();
if (this.auth.isAuthenticated.value && backRoute == '/login') {
navigator['app'].exitApp();
} else {
this.router.navigateByUrl(backRoute)
}
})

the same code works for me , the issue was in ionViewWillLeave() function , when I remove it , the code works

Related

Cant show QRScanner camera view in ionic

I have been facing certain difficulties with the qrcode camera for some time. I have a login page and I want that when the user clicks on the read button qr the ion-content of the login page becomes transparent and a close reading button appears in the footer however I did not succeed. Follow attempts:
My method Structure
lerQR() {
this.qrScanner.prepare()
.then((status: QRScannerStatus) => {
if (status.authorized) {
this.leuQR.next(1);
document.getElementsByTagName("ion-content")[0].style.opacity = "0";
this.qrScanner.show();
this.qrScan = this.qrScanner.scan().subscribe((text: string) => {
console.log('Scanned something', text);
});
} else if (status.denied) {
this.qrScanner.openSettings()
} else {
// permission was denied, but not permanently. You can ask for permission again at a later time.
}
})
.catch((e: any) => console.log('Error is', e));
}
Attempt 1:
Run qrScanner.show command and then hide ion-content with getelement;I can read qr code but I can't see camera:
this.qrScanner.show();
document.getElementsByTagName("ion-content")[0].style.opacity = "0";
Attempt 2:
Hiding ion-content from the login page with get element and then calling qrscanner.show() command;I can read qr code but I can't see camera:
document.getElementsByTagName("ion-content")[0].style.opacity = "0";
this.qrScanner.show();
Attempt 3:
Removing two layers of ion-content (Remembering that I only have the login page) and then giving the qrscanner.show()
document.getElementsByTagName("ion-content")[0].style.opacity = "0";
document.getElementsByTagName("ion-content")[1].style.opacity = "0";
this.qrScanner.show();
In this attempt I can see the camera but I cannot read the qr code, receiving the following error:
Error is TypeError: Cannot read properties of undefined (reading 'style')
at api.service.ts:683:60
at ZoneDelegate.invoke (zone-evergreen.js:364:1)
at Object.onInvoke (core.js:27558:1)
at ZoneDelegate.invoke (zone-evergreen.js:363:1)
at Zone.run (zone-evergreen.js:123:1)
at zone-evergreen.js:857:1
at ZoneDelegate.invokeTask (zone-evergreen.js:399:1)
at Object.onInvokeTask (core.js:27546:1)
at ZoneDelegate.invokeTask (zone-evergreen.js:398:1)
at Zone.runTask (zone-evergreen.js:167:1)
How can I display the camera and read the qrcode hiding the ion-content since I have a stop reading button in the footer?
Enviroment settings:
Ionic:
Ionic CLI : 6.20.4 (C:\Users\micro-85\AppData\Roaming\npm\node_modules\#ionic\cli)
Ionic Framework : #ionic/angular 5.9.4
#angular-devkit/build-angular : 0.1000.8
#angular-devkit/schematics : 10.0.8
#angular/cli : 10.0.8
#ionic/angular-toolkit : 2.3.3
Cordova:
Cordova CLI : 11.0.0
Cordova Platforms : android 10.1.2
Cordova Plugins : cordova-plugin-ionic-keyboard 2.2.0, cordova-plugin-ionic-webview 5.0.0, (and 20 other plugins)
Utility:
cordova-res : 0.15.4
native-run : 1.7.1
System:
Android SDK Tools : 26.1.1 (C:\Users\micro-85\AppData\Local\Android\Sdk)
NodeJS : v16.17.1 (C:\Program Files\nodejs\node.exe)
npm : 9.1.2
OS : Windows 10
What plugin are you using? There are several of them. For the cordova-plugin-qrscanner
They have methods to show/hide:
QRScanner.show(function(status){
console.log(status);
});
QRScanner.hide(function(status){
console.log(status);
});

Ionic backgorund mode crash

I am trying to make run a background mode with Ionic, but when I am playing a song, and I enabled the Backgound Mode, the app crashes.
Actually, is posible make the background mode with Ionic?
This is my code:
import { Component } from '#angular/core';
import {NavController} from '#ionic/angular';
import {NativeAudio} from '#ionic-native/native-audio/ngx';
import {BackgroundMode} from '#ionic-native/background-mode/ngx';
#Component({
selector: 'app-home',
templateUrl: 'home.page.html',
styleUrls: ['home.page.scss'],
})
export class HomePage {
constructor(public navCtrl: NavController,
public nativeAudio: NativeAudio ,
public backgroundMode: BackgroundMode) {
this.nativeAudio.preloadSimple('audio1', 'assets/audio1.mp3').then((msg) => {
console.log('message: ' + msg);
}, (error) => {
console.log('error: ' + error);
});
}
public playAudio(){
this.backgroundMode.enable();
this.backgroundMode.on('activate').subscribe(() => {
this.nativeAudio.play('audio1');
});
this.nativeAudio.play('audio1', () => console.log('audio1 is done playing'));
}
}
This is my current config.
/bg-mode-example$ ionic info
Ionic:
Ionic CLI : 6.11.11 (/usr/local/lib/node_modules/#ionic/cli)
Ionic Framework : #ionic/angular 5.3.5
#angular-devkit/build-angular : 0.1000.8
#angular-devkit/schematics : 10.0.8
#angular/cli : 10.0.8
#ionic/angular-toolkit : 2.3.3
Cordova:
Cordova CLI : 10.0.0
Cordova Platforms : android 9.0.0
Cordova Plugins : cordova-plugin-ionic-keyboard 2.2.0, cordova-plugin-ionic-webview 4.2.1, (and 6 other plugins)
Utility:
cordova-res (update available: 0.15.1) : 0.6.0
native-run (update available: 1.2.1) : 0.2.8
System:
Android SDK Tools : 26.1.1 (/home/gabriel/Android/Sdk)
NodeJS : v10.19.0 (/usr/bin/node)
npm : 6.14.8
OS : Linux 5.4
Addionationally, I have a gitlab repo https://gitlab.com/gabrielrincon/bgmode-testing/
What is wrong?
Thanks very much.
I can make it.
The problem is a permission. The FOREGROUND_SERVICE.
I add to platforms/android/app/src/main/AndroidManifest.xml and work
<uses-permission android:name="android.permission.FOREGROUND_SERVICE" />
I hope that it help you

Error io.branch.referral.InstallListener Class Not Found Crash Ionic v5

I have an issue with an ionic app and branch SDK, at test ENV everything works as expected but users' in PROD crash continuously.
As stated in the branch docs I have initialized branch on platform ready event at app.component.ts:
app.component.ts
import { Component } from "#angular/core";
import { Platform } from "ionic-angular";
import { StatusBar, Splashscreen } from "ionic-native";
import { TabsPage } from "../pages/tabs/tabs";
#Component({
template: `<ion-nav [root]="rootPage"></ion-nav>`
})
export class MyApp {
rootPage = TabsPage;
constructor(platform: Platform) {
platform.ready().then(() => {
StatusBar.styleDefault();
Splashscreen.hide();
branchInit();
});
platform.resume.subscribe(() => {
branchInit();
});
// Branch initialization
const branchInit = () => {
// only on devices
if (!platform.is("cordova")) {
return;
}
const Branch = window["Branch"];
Branch.initSession().then(data => {
if (data["+clicked_branch_link"]) {
// read deep link data on click
alert("Deep Link Data: " + JSON.stringify(data));
}
});
};
}
}
The error is as follows:
Unable to instantiate receiver io.branch.referral.InstallListener: java.lang.ClassNotFoundException: Didn't find class "io.branch.referral.InstallListener"
Here's my ionic info
Ionic:
Ionic CLI : 5.4.15 (/Users/path/.nvm/versions/node/v9.6.0/lib/node_modules/ionic)
Ionic Framework : #ionic/angular 4.11.5
#angular-devkit/build-angular : 0.12.4
#angular-devkit/schematics : 7.2.4
#angular/cli : 7.2.4
#ionic/angular-toolkit : 1.3.0
Cordova:
Cordova CLI : 9.0.0 (cordova-lib#9.0.1)
Cordova Platforms : android 8.1.0
Cordova Plugins : cordova-plugin-ionic-keyboard 2.2.0, cordova-plugin-ionic-webview 4.1.1, (and 30 other plugins)
Utility:
cordova-res : not installed
native-run (update available: 0.3.0) : 0.2.7
System:
Android SDK Tools : 26.1.1 (/Users/path/Library/Android/sdk)
NodeJS : v9.6.0 (/Users/path/.nvm/versions/node/v9.6.0/bin/node)
npm : 2.15.12
OS : macOS High Sierra
Xcode : Xcode 10.1 Build version 10B61
I didn't find good documentation about the issue and I am not sure if removing the library will result in not getting the install referrer, but after some investigation, I decided to remove these lines from AndroidManifest.xml
<receiver android:name="io.branch.referral.InstallListener" android:exported="true">
<intent-filter>
<action android:name="com.android.vending.INSTALL_REFERRER" />
</intent-filter>
</receiver>
The following link talks about a communication sent by branch and outdated documentation and makes allusion to the above solution.
https://github.com/BranchMetrics/unity-branch-deep-linking-attribution/issues/171
I think it can be fixed with switching to new Install referrer. Because this crash started from builds that have been released in March, and it tells that from March 1, 2020 it's deprecated: https://android-developers.googleblog.com/2019/11/still-using-installbroadcast-switch-to.html

Ionic 3 : geolocation isn't stable across the different Android versions

I'm working on an Ionic project based on geolocation and after testing my App on four real devices, I distinguished three different behaviors:
1) Android 4.x ( J1 Samsung) => works Correctly
2) Android 5.0.1 => The first time I install the App all works as expected but when I disable GPS and enable it again, the geolocation returns a position which is far about 1Km of my position and it still bugged until I restart the Phone and then it works correctly again until I restart GPS.
3) Android 5.1 => Same scenario of the Android 5.0.1 but after turning GPS OFF and enabling it again, the geolocation still returning an error "timeout" until I restart the Phone.
Please, I have to know if there is no solution or I can continue with this plugin?
Home.ts:
import { Component, ViewChild, ElementRef } from '#angular/core';
import { NavController, Platform } from 'ionic-angular';
import { Geolocation } from '#ionic-native/geolocation';
declare const google;
#Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {
#ViewChild('map') mapElement: ElementRef;
map: any;
constructor(public navCtrl: NavController,
private platform:Platform,
private geolocation:Geolocation) {
}
ionViewDidLoad(){
new Promise(resolve => {
setTimeout(() => {
this.initMap();
resolve();
},2000);
})
.then(()=>{
setTimeout(() => {
this.getGeolocation();
},2000);
});
}
initMap() {
// map implementation
}
getGeolocation(){
this.platform.ready().then(() => {
alert('start geolocation');
var options = {
timeout: 20000,
enableHighAccuracy:true,
};
this.geolocation.getCurrentPosition(options).then(resp => {
alert('done');
console.log(resp.coords.latitude);
console.log(resp.coords.longitude);
let origin = new google.maps.LatLng( resp.coords.latitude,resp.coords.longitude);
this.addMarker(origin);
this.map.setCenter(origin);
}).catch((error) => {
this.debugError(error);
alert('error geoloc');
});
});
}
addMarker(location) {
//addMarker implementation
}
debugError(object){
var output = '';
for (var property in object) {
output += property + ': ' + object[property]+'; ';
}
alert(output);
console.log(output);
}
}
ionic info:
cli packages: (/usr/lib/node_modules)
#ionic/cli-utils : 1.19.2
ionic (Ionic CLI) : 3.20.0
global packages:
cordova (Cordova CLI) : 7.1.0
local packages:
#ionic/app-scripts : 3.1.8
Cordova Platforms : android 6.3.0
Ionic Framework : ionic-angular 3.9.2
System:
Android SDK Tools : 26.1.1
Node : v8.9.4
npm : 5.7.1
OS : Linux 4.13
Environment Variables:
ANDROID_HOME : xxx
Misc:
backend : pro
cli packages: (/usr/lib/node_modules)
#ionic/cli-utils : 1.19.2
ionic (Ionic CLI) : 3.20.0
global packages:
cordova (Cordova CLI) : 7.1.0
local packages:
#ionic/app-scripts : 3.1.8
Cordova Platforms : android 6.3.0
Ionic Framework : ionic-angular 3.9.2
System:
Android SDK Tools : 26.1.1
Node : v8.9.4
npm : 5.7.1
OS : Linux 4.13
Environment Variables:
ANDROID_HOME: xxx/Sdk
Misc:
backend: pro

FB.ui share_open_graph errorMessage : "Facebook error: Error publishing message"

I am trying to publish a story with share_open_graph using cordova_plugin_facebook4 showDialog. But when I post I got this error message: errorMessage: Facebook error: Error publishing message. I googled a lot but till now no answer. Please anyone can tell me how to fix it?
Here is the code i am using:
publish() {
this.facebook.getLoginStatus()
.then(res => {
console.log(res);
if(res.status === 'connected') {
console.log("CONNECTED");
let obj = {};
obj['og:type'] = 'book';
obj['og:title'] = 'FidSave';
obj['og:url'] = 'https://www.facebook.com/fidsave';
obj['og:image'] = 'https://upload.wikimedia.org/wikipedia/commons/9/99/Black_square.jpg';
obj['og:description'] = 'VocĂȘ ganhou um ponto no fidsave';
this.facebook.showDialog({
method: 'share_open_graph',
action: 'og.shares',
object: JSON.stringify(obj)
}).then(data => console.log(data)).catch(err => console.log(err))
}
})
}
Here is my system info:
Distributor ID: Ubuntu
Description: Ubuntu 17.04
Release: 17.04
Codename: zesty
global packages:
#ionic/cli-utils : 1.4.0
Cordova CLI : 7.0.1
Ionic CLI : 3.4.0
local packages:
#ionic/app-scripts : 1.3.7
#ionic/cli-plugin-cordova : 1.3.0
#ionic/cli-plugin-ionic-angular : 1.3.0
Cordova Platforms : android 6.2.3
Ionic Framework : ionic-angular 3.3.0
System:
Node : v6.11.0
OS : Linux 4.10
Xcode : not installed
ios-deploy : not installed
ios-sim : not installed
npm : 3.10.10
You need to make sure your app is authenticated.
What's the result of the connect method?
facebookConnectPlugin.login(Array strings of permissions, Function success, Function failure)