Develop Reference

Ionic native Ibeacon ReferenceError: device is not defined

TLDR: Ibeacon module example does not work
I have a small app in Ionic 5 using capacitor.
I want to use the Ibeacon library, but I get the error :
Ressource for the library is scarse and I have only found people having issue when the delegate is undefined causing the LocatonManager error here.
I also tried to look what is causing the error, apparently the device mentioned is part of the device library. So I check if the Ibeacon library properly import the device one and it does in node_modules\cordova-plugin-ibeacon\plugin.xml, like so :
<!-- Version is set to anything because the only feature we use is the device.platform property which was available
since forever. The added benefit is that we don't force the consumers of this plugin to use a certain version of
the device plugin. -->
<dependency id="cordova-plugin-device" version="*" />
My class is pretty much the example given in the Ibeacon page:
import { Component, OnInit } from '#angular/core';
import { IBeacon } from '#ionic-native/ibeacon/ngx';
import { Platform } from '#ionic/angular';
#Component({
selector: 'app-beacon',
templateUrl: './beacon.page.html',
styleUrls: ['./beacon.page.scss'],
})
export class BeaconPage implements OnInit {
public beacons: any[] = [];
constructor(
private ibeacon: IBeacon,
private platform: Platform,
private _utils: UtilsService
) {}
ngOnInit() {
console.log('ngOnInit');
if (!this.platform.is('android')) {
console.log('Beacon related activity only available on Android');
return;
}
// create a new delegate and register it with the native layer
let delegate = this.ibeacon.Delegate();
console.log('delegate :', delegate);
// Subscribe to some of the delegate's event handlers
delegate.didRangeBeaconsInRegion().subscribe(
(data) => console.log('didRangeBeaconsInRegion: ', data),
(error) => console.error()
);
delegate.didStartMonitoringForRegion().subscribe(
(data) => console.log('didStartMonitoringForRegion: ', data),
(error) => console.error()
);
delegate.didEnterRegion().subscribe((data) => {
console.log('didEnterRegion: ', data);
});
let beaconRegion = this.ibeacon.BeaconRegion(
'deskBeacon',
'F7826DA6-ASDF-ASDF-8024-BC5B71E0893E'
);
this.ibeacon.startMonitoringForRegion(beaconRegion).then(
() => console.log('Native layer received the request to monitoring'),
(error) =>
console.error('Native layer failed to begin monitoring: ', error)
);
}
}
Also I imported the IBeacon module inside my module.ts like so :
import { NgModule } from '#angular/core';
import { CommonModule } from '#angular/common';
import { FormsModule } from '#angular/forms';
import { IonicModule } from '#ionic/angular';
import { BeaconPageRoutingModule } from './beacon-routing.module';
import { BeaconPage } from './beacon.page';
import { IBeacon } from '#ionic-native/ibeacon/ngx';
#NgModule({
imports: [CommonModule, FormsModule, IonicModule, BeaconPageRoutingModule],
declarations: [BeaconPage],
providers: [IBeacon],
})
export class BeaconPageModule {}
Did I forget to do something ? Why is device undefined ? Should I also import the device library ?
I should mention I have the device library installed.

Inside the lib they use the device to check the plataform, that is the code:
BeaconRegion.isValidUuid = function (uuid) {
// https://github.com/petermetz/cordova-plugin-ibeacon/issues/328
// If we are on Android, then allow the UUID to be specified as a wild-card (omitted)
var isAndroid = device && device.platform === "Android";
if (uuid === BeaconRegion.WILDCARD_UUID && isAndroid) {
return true;
}
var uuidValidatorRegex = this.getUuidValidatorRegex();
return uuid.match(uuidValidatorRegex) != null;
};
You can check right here https://github.com/petermetz/cordova-plugin-ibeacon/blob/270ffbbc12159861a16e5e81481103c1e09139cb/www/model/BeaconRegion.js#L38
So, you have to install the following plugin-in https://ionicframework.com/docs/native/device
npm install cordova-plugin-device
npm install #ionic-native/device
ionic cap sync
Then the find this device reference and the problem will be solved.

Is there a native solution to pick files in NativeScript Angular?

I am trying to implement a feature to let the user upload a file in my NativeScript Angular Project. NativeScript does not seem to have a native implementation of a file picker and there are limited plugins available that can do the job. Plus they have their own set of problems. The closest I have come to a workable solution is using the nativescript-mediafilepicker and that opens a blank page like the one below instead of the file explorer.
I exactly followed the documentation and can't figure out why it's not working. Here is the service I wrote:
payload.service.ts
import { Injectable } from '#angular/core';
import { Mediafilepicker, ImagePickerOptions, VideoPickerOptions, AudioPickerOptions,
FilePickerOptions } from 'nativescript-mediafilepicker';
#Injectable({
providedIn: 'root'
})
export class PayloadService {
constructor() { }
pickFile(){
console.log('Pick File Payload Service requested');
const extensions = ['pdf'];
let options: FilePickerOptions = {
android: {
extensions: extensions,
maxNumberFiles: 1
},
ios: {
extensions: extensions,
multipleSelection: false
}
};
let mediafilepicker = new Mediafilepicker();
mediafilepicker.openFilePicker(options);
mediafilepicker.on("getFiles", function (res) {
let results = res.object.get('results');
console.dir('File Pick Success: ',results);
});
mediafilepicker.on("error", function (res) {
let msg = res.object.get('msg');
console.log('File Pick Error: ',msg);
});
mediafilepicker.on("cancel", function (res) {
let msg = res.object.get('msg');
console.log('File Pick Cancel: ',msg);
});
}
}
Can someone help me fix this or rather provide me with a native implementation? I don't need much customization options and user will only upload one file at a time.

No requests during tns debug

this is my first app in nativescript and in mobile development environment in general. And I am having some difficulties. What I am trying is to make some dummy http requests with angular http module but for some reason when I debug the app inside chrome no requests seem to be made.
Here is my code:
template:
<Page>
<StackLayout>
<Button text="GET" (tap)="get()"></Button>
<Button text="POST" (tap)="post()"></Button>
</StackLayout>
</Page>
component:
import { Component } from "#angular/core";
import { AuthService } from "../../shared/auth.service";
import { HttpClient } from "#angular/common/http";
#Component({
selector: "register",
moduleId: module.id,
templateUrl: "./register.component.html"
})
export class RegisterComponent {
constructor(private auth: AuthService, private http: HttpClient) {}
get()
{
console.log('GET');
this.http.get('https://httpbin.org/get');
}
post()
{
console.log('POST');
this.http.post('https://httpbin.org/post', null);
}
}
Now when those functions execute there are no logged requests.
I am running inside an emulator and I can browse from it just fine so if someone has some ideas on what could be wrong...

You have to subscribe to the http requests else they are only defined and not called, try adding the following after this.http.get('https://httpbin.org/get') and this.http.post('https://httpbin.org/post', null):
.subscribe(
res => console.log(res),
err => console.log(err),
() => console.log("Done"),
);
Edit
I didn't mention originally, it's actually best to subscribe to the function that returns the http method, instead of subscribing to the call itself. From experience, I have found some unusual behaviour can occur

Vue router doesn't work on some Androids. Is there a workaround?

I am building an app that is using Google authentication through firebase and that needs to redirect the user from a login.vue component to an /hello path upon successful authentication.
I have first tried doing it the normal vue way:
this.$router.replace('/hello')
only to realise my Samsung Galaxy J5 wasn't having it...
All is working on other devices and browsers (so far) using the normal Vue routing tools but on some Android devices Vue is refusing to collaborate. I have read here some Android versions do not like the way the Vue dynamic routing transpiles to vanilla JS so I am attempting the following (still, no success).
This is my code on the created hook of component login.vue when Google auth (with redirection, not pop up) returns to it:
created() {
firebase.auth().getRedirectResult().then(result => {
var user = result.user;
if (user) {
var ua = navigator.userAgent.toLowerCase();
var isAndroid = ua.indexOf("android") > -1;
if(isAndroid) { // NOT WORKING (stays on Login.vue although I am sure it's detecting it's an Android)
window.location.href = window.location.host + '/hello';
} else {
this.$router.replace('/hello') // this work perfectly
console.log(window.location.host + "/hello" ); // this is returning the intended address: localhost:8080/hello
}
} else {
toastr.warning("Oops something went wrong on login!");
}
}).catch(error => {
// dealing with redirection result errors from Google Authentication
});
This is my index.js routing file (I am doing some route guarding here so it may be useful for you to get a bigger picture if I paste the file):
import Vue from 'vue'
import Router from 'vue-router'
import firebase from '../firebase-config'
import {store} from '#/store/store'
import hello from '#/components/hello'
import login from '#/components/login'
import landing from '#/components/landing'
Vue.use(Router)
let router = new Router({
mode: 'history',
routes: [
{
path: '*',
redirect: '/landing'
},
{
path: '/',
redirect: '/landing'
},
{
path: '/landing',
name: 'landing',
component: landing
},
{
path: '/login',
name: 'login',
component: login
},
{
path: '/hello',
name: 'hello',
component: hello,
meta: {
requiresAuth: true
}
},
],
})
router.beforeEach((to, from, next) => {
if (to.matched.some(record => record.meta.requiresAuth)) {
firebase.auth().onAuthStateChanged(function(user) {
if (!user) {
next({
path: '/landing'
})
} else {
next()
}
});
} else {
next()
}
})
export default router
Any thoughts?

Open a page after click on notification using ionic and firebase cloud messaging

Good evening. I am trying to handle notification click in such a way that when the user click on a notification, a specific page of my application is opened.
I am using FIREBASE COULD MESSAGING AND IONIC 3
Here is the code of the app.component.ts file in witch the code for handling notification is written :
import { Platform, Nav, ToastController } from 'ionic-angular';
import { HomePage } from '../pages/home/home';
import { Component, ViewChild } from '#angular/core';
import { FCM } from '#ionic-native/fcm';
import { Signup } from '../pages/signup/signup';
#Component({
templateUrl: 'app.html',
selector: 'Myappname',
})
export class MyApp {
#ViewChild(Nav) nv: Nav;
rootPage: any = HomePage;
constructor(public fcm: FCM, platform: Platform) {
platform.ready().then(() => {
fcm.onNotification().subscribe(data => {
if (data.wasTapped) {
this.nv.push(Signup);
} else {
console.log("Received in foreground");
}
})
});
}
}
When the nofication is received on the mobile device, if the user click on it, only the home page is displayed and he is note redirected to the signup page as specified in the code.
Any helps ?
Thanks.

I finally found the solution. as i was using firebase cloud functions to send the notification, here is the code i used to make the onNotification() work when a user click on the notification received.
exports.Hello = functions.database.ref('/users/{userId}').onCreate(event=>{
admin.messaging().sendToTopic('all', {
data:{
"key1": value1,
"key2": value2
},
notification: {
clickAction : "FCM_PLUGIN_ACTIVITY",
sound : "default",
title : "Notification title",
body : "message content"
}
});
});
So We must set clickAction property of the notification object to FCM_PLUGIN_ACTIVITY to make onNotification() method execute when the user tapped on the notification.
Here is a code exemple for the app.component.ts in witch the onNotification() method is implemented.
import { Platform, Nav, ToastController } from 'ionic-angular';
import { HomePage } from '../pages/home/home';
import { Component, ViewChild } from '#angular/core';
import { FCM } from '#ionic-native/fcm';
import { Signup } from '../pages/signup/signup';
#Component({
templateUrl: 'app.html',
selector: 'Myappname',
})
export class MyApp {
#ViewChild(Nav) nv: Nav;
rootPage: any = HomePage;
constructor(public fcm: FCM, platform: Platform) {
platform.ready().then(() => {
fcm.onNotification().subscribe(data => {
if (data.wasTapped) {
this.nv.push(Signup);
} else {
console.log("Received in foreground");
}
})
});
}
}
AND now, it works fine !

Try setting the root page as the signup page, hopefully it will work:
this.nv.setRoot(Signup);
and if that doesnt work try adding this before your fcm.onNotification()
var $this = this;
and then use $this to reference inside your if statement // (wasTapped)
$this.nv.setRoot(Signup);