Develop Reference

LaunchNavigator Ionic2 plugin is not installed

I am new to Ionic 2 and everything around. I'm tryng to setup my first mobile app: touching a button I would open native navigation (Google Maps for Android, for instance). I've installed launchnavigator plugin:
ionic plugin add uk.co.workingedge.phonegap.plugin.launchnavigator
and inside cremony.ts page:
import { Component } from '#angular/core';
import { NavController } from 'ionic-angular';
import { LaunchNavigator, LaunchNavigatorOptions } from 'ionic-native';
#Component({
selector: 'page-ceremony',
templateUrl: 'ceremony.html'
})
export class Ceremony {
constructor(public navCtrl: NavController) {
}
navigate() {
let options: LaunchNavigatorOptions = {
start: ""
};
LaunchNavigator.navigate("London, UK", options)
.then(
success => alert('Launched navigator'),
error => alert('Error launching navigator: ' + error)
);
}
}
make a build npm run buildand upload it to IonicView with ionic upload.
I've do everything like suggested in this link but with different luck.
But when I click the button (a simple <button ion-button (click)="navigate()">Navigate</button> in the ceremony.html) in the Ionic View an error say: Error launghing navigator: plugin_not_installed.
I inspected the project, the plugins directory contains uk.co.workingedge.phonegap.plugin.launchnavigatorlooks directory. So I look at package.json and config.xml and I've added the value uk.co.workingedge.phonegap.plugin.launchnavigator in the cordovaPlugins
and tag <plugin name="uk.co.workingedge.phonegap.plugin.launchnavigator" spec="~3.2.1" /> in the widget root. npm run build, ionic upload but nothing changed.
Where is my error?

New answer, there is something wrong with your project. Have you modified your index.html file? Is it still including cordova.js? If so what version of Ionic and Cordova are you using?
I made this sample application with your exact code and it works perfectly on both iOS and ANdroid: https://github.com/roblouie/navigator-plugin-test
Did a screen recording on iOS: https://giphy.com/gifs/xTiN0EEQV82aIXWnQI
Just grabbed an image on Android, but it works the same:
Please try the project from github.

Cordova plugins need to be called only once platform is ready.
constructor(public navCtrl: NavController,public platform:Platform) {//inject in constructor
}
In your function navigate()
this.platform.ready().then(()=>{
LaunchNavigator.navigate("London, UK", options)
.then(
success => alert('Launched navigator'),
error => alert('Error launching navigator: ' + error)
);
});

The reason for your error is that you are using Ionic View. Your Ionic app is just html, css, and javascript. However, any plugins you use are written in Java for Android and Objective C for iOS. That plugin source code is then compiled into your app for each platform.
With Ionic View, it only uploads your app, the html, css, and javascript. Nothing is compiled. Ionic View is the app itself, and it loads your code. So no plugins you have are included. Ionic View itself does have some plugins installed on it, and you can see that list here: https://docs.ionic.io/tools/view/#supported-plugins
Unfortunately you will not be able to test any plugin not in that list without building and deploying to a device or emulator.

Ionic 2 : Get device's informations

I try to get the device's information in a component but I don't know how to do that. I tried this :
console.log(Device.device.model);
But it return "undifined".
How can I get this information ?

Have you install plugin?
ionic plugin add cordova-plugin-device
import { Device } from 'ionic-native';
console.log('Device: ' + Device);
Read more on http://ionicframework.com/docs/v2/native/device/

How to find device os and version in ionic

I have worked on few tutorials and at last found something regarding this in ionic framework.....
They gave some codes that use ionic native and i did the same by embedding the below code:
//Display OS name and version (Start)
import { Device } from 'ionic-native';
console.log('Device OS is: ' + Device.device.platform);
console.log('Device OS Version is: ' + Device.device.version);
//Display OS name and version (End)
While using ionic serve i got this in the console:
'Device OS is: undefined'
'Device OS version is: undefined'
Then i guessed it wont work in browser and i tried building and run in my phone but still the same log comes...
PS: I have just started with ionic
Thank you in advance :)

Please see this link
http://ionicframework.com/docs/api/utility/ionic.Platform/
angular.module('PlatformApp', ['ionic'])
.controller('PlatformCtrl', function($scope) {
ionic.Platform.ready(function(){
// will execute when device is ready, or immediately if the device is already ready.
});
var deviceInformation = ionic.Platform.device();
var isWebView = ionic.Platform.isWebView();
var isIPad = ionic.Platform.isIPad();
var isIOS = ionic.Platform.isIOS();
var isAndroid = ionic.Platform.isAndroid();
var isWindowsPhone = ionic.Platform.isWindowsPhone();
var currentPlatform = ionic.Platform.platform();
var currentPlatformVersion = ionic.Platform.version();
ionic.Platform.exitApp(); // stops the app
});

I used cordova-plugin-device to fetch uuid number and device model name. It fetches all possible information about the device. I believe, It will also serve your purpose. Inside onDeviceReady() function, you just assign the values to your convenient variables, like:
var deviceOS = device.uuid;
var deviceVersion = device.version;
Hope It helps. Please let me know if it works. :)

You can get the device os and version in ionic
import { Device } from '#ionic-native/device';
import { Platform } from 'ionic-angular';
constructor(private device: Device,public platform: Platform) {
console.log('Device UUID is: ' + this.device.uuid);
if (this.platform.is('ios')) {
// This will only print when on iOS
console.log('I am an iOS device!');
}
if (this.platform.is('android')) {
// This will only print when on Android
console.log('I am an android device!');
}
}

In Ionic 3 you can use device this way,
import { Device } from '#ionic-native/device';
private platformType:any;
private versionType:any;
constructor(private device: Device) {
this.platformType = this.device.platform;
this.versionType = this.device.version;
}
Now this can be used in the html file using data-binding ex:
<ion-grid>
<ion-row>
<ion-col>
<h1>Platform Type: {{platformType}}</h1>
</ion-col>
</ion-row>
<ion-row>
<ion-col>
<h1>OS Version: {{versionType}}</h1>
</ion-col>
</ion-row>
</ion-grid>
Note: In the browser the variables will log null. The Device plugin function will only work on the native devices. You can test your device with
ionic cordova run (android or ios) --device

If you are using Ionic V1,
ionic.Platform.version();
You can use the above to get the Major version of the Device OS.
eg: if your device is running IOS 14.8.0 the above code will only return 14
This behavior has also been discussed in this github issue.
If you wish to get the minor versions as well, then you would have to use the Cordova device plugin.

cordova.plugins.locationManager.enableBluetooth() Not working in android

I am trying to enable my phone bluetooth via ionic app. I am calling something like this:
cordova.plugins.locationManager.enableBluetooth()
But not enabling and making any error also. Following is my app.js code. Please help out.
import {App, Platform} from 'ionic-framework/ionic';
import {TabsPage} from './pages/tabs/tabs';
#App({
template: '<ion-nav [root]="rootPage"></ion-nav>',
config: {} // http://ionicframework.com/docs/v2/api/config/Config/
})
export class MyApp {
static get parameters() {
return [[Platform]];
}
constructor(platform) {
this.rootPage = TabsPage;
platform.ready().then(() => {
StatusBar.backgroundColorByName('red');
console.log("App starting.");
cordova.plugins.locationManager.enableBluetooth();
});
}
}
Is there anything I am missing. My phone is One Plus One.
UPDATE:
Is there any particular configuration I have to in device to achieve
this in develop mode
App technical info
Ionic 2 & Angular 2
Plugin : com.unarin.cordova.beacon (Link)

I resolved this myself. Seems to be issue was with petermetz/cordova-plugin-ibeacon, I was using 25days older plugin.
First removed the existing plugin by running by going into project root folder:
sudo cordova plugin rm com.unarin.cordova.beacon
Then again added the plugin (basically I updated my plugin):
sudo cordova plugin add https://github.com/petermetz/cordova-plugin-ibeacon.git
After that everything started working fine.
Thanks.

Phonegap - Ignore font-size display setting on Android

I'm having an issue with some android devices when changing the font-size display setting through configuration.
In web browser my app is simple ignoring this. This is true for some other mobiles too.
But with some specific mobiles (like Motorola G or X) changing this config also affects my Phonegap app.
I don't know how to avoid this to make the app look consistent

I've found a solution using this cordova plugin: com.phonegap.plugin.mobile-accessibility
You have to follow installation instructions for the plugin, and then you can use it inside Ionic app. You only have to ensure to call its functions after Cordova 'deviceready' callback (accesed by $ionicPlatform.ready in the example below):
angular.module('app').controller('IndexController', function ($ionicPlatform, $window) {
$ionicPlatform.ready(function(){
if($window.MobileAccessibility){
$window.MobileAccessibility.usePreferredTextZoom(false);
}
});
});

For anyone using Ionic. Documentation is here.
Install
$ ionic cordova plugin add phonegap-plugin-mobile-accessibility
$ npm install --save #ionic-native/mobile-accessibility
Add to module, i.e. app.module.ts
import { MobileAccessibility } from 'ionic-native';
#NgModule({
providers:[MobileAccessibility]
});
In app.component.ts
constructor( mobileAccessibility: MobileAccessibility, platform: Platform) {
platform
.ready()
.then(()=>{
mobileAccessibility.usePreferredTextZoom(false);
});
}