I have a problem using an actual Ionic Angular in combination with NFC reader.
I can successfully read the NFC Tag with the example provided in:
https://ionicframework.com/docs/native/nfc
The Problem that i have is, that after the reading of the NFC somehow the Angular ChangeDetection is broken and the changes are not displayed. When i click on a button that does nothing, the changes are displayed.
I know i can trigger the ChangeDetection manually, which would work, but then i would have to trigger the ChangeDetection everywhere in the component, which i think should not be the case.
Does anyone have an idea what i am doing wrong?
First i thought maybe it has something to do with the observable, but i tried adding a interval observable, which works just like expected.
Template:
<p><ion-button (click)="startNFC()">start NFC readermode</ion-button></p>
<p><ion-button (click)="startNFCListener()">start NFC listener</ion-button></p>
<p><ion-button (click)="startInterval()">start Interval</ion-button></p>
<p><ion-button (click)="doNothing()">do nothing</ion-button></p>
<p>
{{nfcReading}}
{{nfcTag}}
<ion-spinner *ngIf="nfcReading"> </ion-spinner>
</p>
Code:
startNFC() {
console.log("startNFC");
this.nfcReading = true;
let flags = this.nfc.FLAG_READER_NFC_A | this.nfc.FLAG_READER_NFC_V;
this.readerModeSub = this.nfc.readerMode(flags).subscribe(
tag => {
console.log(JSON.stringify(tag));
this.nfcTag = this.nfc.bytesToHexString(tag.id);
this.nfcReading = false;
this.readerModeSub.unsubscribe();
},
err => {
console.log("Error reading tag", err);
this.nfcReading = false;
}
);
}
doNothing() {
// this really does nothing... it is just to demonstrate that this triggers the changedetection
}
i get can see that the subsciption event is triggered in console, but it is not shown in the HTML.
When clicking the do nothing Button. The tag is shown.
I created a fresh type=angular blank project and test on a Google Pixel 3a hardware.
i have uploaded a sample project to demonstrate my problem.
https://github.com/autlunatic/Ionic-NFC-Android-Test/
I am trying to run my app on Android (One plus 6t). This was working fine before making a call to firebase but as soon as I add the line onSend={Fire.shared.send} to Chat.js, the app crashes. The logs just show Uncaught Error: Error calling JSTimers.CallTimers. Haven't seen this error anywhere else. Does anyone know what's the issue?
Here's the snack: https://snack.expo.io/#adititipnis/community
You can get this error if you omit an await call when sending JS objects to the native side, so the promise gets passed rather than the result.
I'm using the typical async sleep pattern that wraps setTimeout, so that may also be a factor in the way this error presents itself, I'm not entirely sure.
This is untested, but something like this should reproduce it:
// some async func
const asyncGetResult = async () => {
await sleep(17);
// etc.
return Promise.resolve(result);
};
// this should cause the error:
MyNativeComponent.nativeMethod({
result: asyncFunc() // <- missing 'await'
});
// this should not cause the error:
MyNativeComponent.nativeMethod({
result: await asyncFunc()
});
This can be difficult to track down if you don't know what you're looking for. I resorted to process of elimination, reverting changes file by file until I found the offending line. Hopefully this saves someone some time.
I have a problem using Geolocation on Android device.
I create an Ionic 3 application.
I use Geolocation ( [https://ionicframework.com/docs/native/geolocation/ 13]).
I use the sample code provided there.
The problem is that, the code works in Browser but whenever I upload it on an Android device, it does not work.
When I start the app on device the alert for location permission is prompted.
I press Allow.
Then in the android tray an icon appears that says “Searching for GPS”.
After timeout expires I got the error for timeout and no location.
The strange think is this:
If I close my app, then open google maps ( or other app using gps position ) and reopen my app works as it should.
I don’t know what to do.
The permissions are fine :
and everything was installed properly.
Can anyone help please?
i got it actually i have to pass apikey with that like
<script src="http://maps.googleapis.com/maps/api/js?key=YOUR_KEY"></script>
in the index page
without this key it sometime works but not sure everytime.
Note : this key is only generated when you have a valid gmail a/c (by providing DOB/CreditCard nos) although its free .
try this, it should work
ionic cordova run android --prod
--prod makes production build apk
import { LocationAccuracy } from '#ionic-native/location-accuracy';
declare var navigator
Above
#Component
watchPosition() {
this.locationAccuracy.request(this.locationAccuracy.REQUEST_PRIORITY_HIGH_ACCURACY).then(
() => {
var options = {
timeout: 500,
maximumAge: Infinity
};
this.watch = navigator.geolocation.watchPosition((data) => {
let latlng: LatLng = new LatLng(data.coords.latitude, data.coords.longitude);
}, (error) => {
console.log("error watch", error)
}, options);
}
}, error => {
alert('Error requesting location permissions' + JSON.stringify(error))
});
}
}
i'm trying to load a navigator app from my ionic application to show directions and i am using google maps, but the problem is that i am using the launchNavigator function which only accepts a string - the name of the location.
navigateLocation(){
let options: LaunchNavigatorOptions = {
start:[this.latitude,this.longitude],
app: this.launchNavigator.APP.GOOGLE_MAPS
};
this.launchNavigator.navigate('Lagos, ON', options) //here
.then(success =>{
console.log(success);
},error=>{
console.log(error);
})
}
so the Lagos option, could be london, or any other city, but what if i'm trying to get a remote location, or some other city.
why cant i just use the longitude and latitude, instead of the name..
for example
this.launchNavigator.navigate({lat:8.234345, lng:7:5644563}, 'ON', options);
something similar to that....
i dont know if anyone has done this before, please help.
thanks.
I use it like this
let destination = [lat, lng];
this.launchNavigator.navigate(destination)
.then(
success => console.log('Launched navigator'),
error => console.log('Error launching navigator', error)
);
And it shows me how do i go from where I am to the coordinates I pass.
I'm using sencha-touch 2.0 and phonegap 2.0.0 in my app to retrieve user's location.
When runing on my locahost, everything works just fine. However, when loading the .apk to my android 15 api's device (using eclipse and the adt plugin), every call to getCurrentLocation or watchPosition never returns...
here is my code:
geoOn: function(){
var geoReady = navigator.geolocation || undefined;
var onSuccess = function(position){
Top5.app.alert('Geolocation success '+String(position.coords.latitude) + ' ' + String(position.coords.longitude),'Geolocation');
var scope = Ext.getCmp('nestedList');
scope.updateDistance(position.coords);
};
var onFailure = function(error){Top5.app.alert('Geolocation failed: '+String(error.code) + ' '+String(error.message),'Geolocation');};
if (geoReady) {
this.watchId = navigator.geolocation.watchPosition(onSuccess ,onFailure,{timeout:6000,maximumAge: 3000,enableHighAccuracy: true});
}
else{
Ext.device.Geolocation.watchPosition({
frequency: 3000, // Update every 3 seconds
callback: function(position) {
this.updateDistance(position.coords);
},
failure: function() {
console.log('Geolocation Failure!');
},
scope:this
});
}
},
geoGet: function(){
var geoReady = navigator.geolocation || undefined;
if (geoReady) {
var onSuccess = function(position){
Top5.app.alert('Geolocation successful!!!');
var scope = Ext.getCmp('nestedList');
scope.updateDistance(position.coords);
};
var onFailure = function(error){Top5.app.alert('Geolocation failed: '+String(error.code) + ' '+String(error.message),'Geolocation');};
navigator.geolocation.getCurrentPosition(onSuccess,onFailure);
}
else{}
},
geoOff:function(){
var geoReady = navigator.geolocation || undefined;
if (geoReady) {
navigator.geolocation.clearWatch(this.watchId);
this.watchId = null;
}
else{
Ext.device.Geolocation.clearWatch();
}
},
updateDistance:function(coords){
Top5.app.alert('updateDist','');
var scope = Ext.getCmp('nestedList');
var lat = coords.latitude,lon = coords.longitude;
var store = scope.getStore();
var i,record;
for(i = 0; i < store.data.all.length; i++)
{
record = store.data.all[i];
if(record.data.locationX){
record.set('distance',Top5.app.getDistance(record.data.locationX,record.data.locationY,lat,lon).toFixed(3));
}
}
}
UPDATE: So I walked out of my building and it worked... I need to go outside more often.
However, when I'm disabling the gps, I thought geoLocation will find my location using wifi connection - but it failes (I'm setting enableHighAccuracy: false). Why is that?
UPDATE: Let me rephrase my question:
Does navigator.geolocation.watchPosition suppose to work both with GPS signal and wifi/g3 signals? How can I detect user location using internet connection only? currently, my code is working only with GPS, and when that option disabled or signal is blocked, geolocation isn't working.
I know that maybe it is too late, but today i struggled with the same issue! The solution turned out to be very simple!
SOLUTION: Reboot the device.
That's all.
The problem is, that you never know when i user will get this kind of bug, so if your application relies heavily on geolocation i recommend you set a timeout in location options navigator.geolocation.getCurrentPosition(geoSuccess, geoError, {timeout: 15000}) and alert user about the problem and possible solution.
P.S.
Keep in mind, that Geolocation can timeout for example if mobile data is turned off too, so reboot won't always fix it. On iPhone it uses cellular data to get your position, but on Android, it looks like the phone does not have access to cellular data unless 3G is turned on
It could sound stupid, but, did you activate the "Use Networks" option?
Go to Settings -> Location and security -> Use networks; and active it. I have passed all the afternoon watching the problem and it was that.
I restarted and restarted. I reset my phone to factory settings.
But nothing worked.
Until I set enablHighAccuracy from true to false.
And... Tada.... it works.
So :
var options;
options = {
maximumAge: 30000,
timeout: 5000,
enableHighAccuracy: false
};
This used to work fine using PhoneGap 2.6.0. I needed to make this change since I'm now using Phonegap 3.3 - tested on a Wiko Cink+ phone.
Try removing the Phonegap plugin geolocation plugin from your project. You won't need to make any changes to your JavaScript code as your device will fall back on the standard HTML5 navigator.geolocation functionality which has the same method signature.
Assuming you're using PhoneGap 3.3, you just need to run:
cordova plugin rm org.apache.cordova.geolocation
If you are running on an emulator, it may be because the device does not have a geolocation set. Try setting the location by running the following, assuming your android emulator is on port 5554:
telnet localhost 5554
geo fix -0.001 51.5
Restart your phone or Go to google map and check if gps is working over there.
I got it working.
I had this happen to a working app after updating PhoneGap to version 3.6.3 from 3.5. After trying many other suggestions Arthur's answer worked. 15 seconds seemed too long to me so I used {timeout: 2000}. I'm guessing the new version is slower as my code worked fine before the update on the same devices. Thought I'd post as well as upvote him as everything I found in Google was about initial setup and mostly irrelevant to my situation.
You just need to add enableHighAccuracy: true, maximumAge: 60000 and then reboot your device.
From my trial and error analysis, its most likely:
1. The version of android you're using. On Lollipop and lower you may need to go to the phones location settings and enable high accuracy settings (using gps, wlan and mobile networks to get location). I had to do this on a kitkat phone.
2. As others have mentioned, you can try changing the settings of getCurrentPosition by either enabling/disabling highaccuracy and adding a timeout.
3.If you're using ngCordova, make sure you installed it right and the location functions are actually being called. Use console to verify
Try This Solution:
window.setInterval(checkPosition, 5000);
function checkPosition() {
function onSuccess(position) {
document.getElementById('result1').innerHTML = position.coords.latitude;
document.getElementById('result2').innerHTML = position.coords.longitude;
}
// onError Callback receives a PositionError object
//
function onError(error) {
alert('code: ' + error.code + '\n' +
'message: ' + error.message + '\n');
}
navigator.geolocation.getCurrentPosition(onSuccess, onError);
}
I've managed to work it out.... However , I have no idea what actually solved it. All I've done is to change one of my model's structure. Can anyone see the connection to geolocation?