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.
Related
I want to get the android device language from the app developed using Ionic3, Cordova and Angular4.
How can I get it?
window.navigator.language worked for me with no plugin. I didn't check to see how the results compare to the Globalization plugin, but I got results like: Android: "en-us", "es-us" and on iOS: "en-US" and "es-XL"
also see https://stackoverflow.com/a/4079798/431296 -window.navigator.userLanguage wasn't defined on either Android or iOS, so I didn't include it
You can use cordova-plugin-globalization which also offers an ionic-native wrapper. It offers a lot of useful methods, but you are probably looking for getPreferredLanguage() or getLocaleName().
Installation:
ionic cordova plugin add cordova-plugin-globalization
npm install --save #ionic-native/globalization
Example:
import { Globalization } from '#ionic-native/globalization';
constructor(private globalization: Globalization) {
this.globalization.getPreferredLanguage()
.then(res => console.log(res))
.catch(e => console.log(e));
}
Follow up to David's answer, the Globalization API is deprecated.
With the ECMA Internationalization API now supported on iOS, Android and Windows devices, this plugin is not required any more.
* Migrating from this plugin to the ECMA Internationalization API is explained in this Cordova blog post.
If you're using ngx-translate,
import { TranslateService } from '#ngx-translate/core';
constructor(private translate: TranslateService) {
console.log(this.translate.getBrowserLang());
}
works fine on the devices and in the browser. It's returning "en" or "de".
For ionic 5 with capacitor:
npm install #capacitor/device
npx cap sync
in code:
import { Device } from '#capacitor/device';
console.log((await Device.getLanguageCode()).value); // en-US
https://capacitorjs.com/docs/apis/device
Ionic 4
In Ionic we call it Globalization performs operations specific to the user's locale, language, and timezone.
Installation : Terminal
ionic cordova plugin add cordova-plugin-globalization
npm install #ionic-native/globalization
Usages: Any Component or service file.
import { Globalization } from '#ionic-native/globalization/ngx';
constructor(private global: Globalization) { }
...
this.global.getPreferredLanguage()
.then(res => console.log(res))
.catch(e => console.log(e));
Due to certain reasons I can't download android studio. And I recently incorporated sqlite DB in my app. As far as i know, ionic serve cannot run a sqlite DB. I wanted to know if it's possible to test my ionic 3.x app on an android device without having android studio.
You don't need Android studio at all to work on Ionic development. Any editor + a terminal will do.
Having said that it is strongly recommended to work with the free Visual Studio Code editor, as it's built by Microsoft, the same team that built Typescript which makes coding there a great experience.
I also suggest this set of plugins to get you started.
Unfortunately you cannot work on SQLite in the browser but I strongly recommend you use ionic-storage anyway, which provides a single API and will use automatically whatever best storage method is available in the current platform, with no additional effort from you.
Ionic Storage is a package created and maintained by the ionic team to abstract development from the specifics of each browser or platform and automatically use the best storage solution available.
1. Installing Dependencies
In your case for SQLite you need to first install the dependencies for both Angular and Cordova:
npm install #ionic/storage --save
and
cordova plugin add cordova-sqlite-storage --save
Then edit your NgModule declaration in src/app/app.module.ts to add IonicStorageModule as an import:
import { IonicStorageModule } from '#ionic/storage';
#NgModule({
declarations: [...],
imports: [
IonicModule.forRoot(MyApp),
IonicStorageModule.forRoot({
name: '__mydb',
driverOrder: ['indexeddb', 'sqlite', 'websql'],
})
],
bootstrap: [...],
entryComponents: [...],
providers: [...],
})
export class AppModule { }
2. Inject Storage module into your component
import { Component } from '#angular/core';
import { Storage } from '#ionic/storage';
#Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {
constructor(public storage: Storage) {}
}
3. Using Ionic Storage
Whenever you access storage, make sure to always wrap your code in the following:
storage.ready().then(() => { /* code here safely */});
3.1 Saving a key-value pair
storage.ready().then(() => {
storage.set('some key', 'some value');
});
3.2 Retrieving a value
storage.ready().then(() => {
storage.get('age').then((val: string) => {
console.log('Your age is', val);
});
});
3.3 Deleting a key-value pair
storage.ready().then(() => {
storage.remove('key').then((key: string) => { /* do something after deletion */})
});
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.
installed cordova device plugin by :
sudo cordova plugin add org.apache.cordova.device
then downloaded ngCordova and included ng-cordova.min.js in to js folder and also included in index.html
next what i did is injected ngCordova as follows
angular.module('starter', ['ionic', 'starter.controllers','ngCordova'])
then included in controller as follows
angular.module('starter.controllers', [])
.controller('AppCtrl', function($scope, $ionicModal, $timeout, $ionicPlatform,$cordovaDevice)
but still getting the following errors
ReferenceError: device is not defined
at Object.getUUID (http://localhost:8100/js/ng-cordova.min.js:1:14929)
at new <anonymous> (http://localhost:8100/js/controllers.js:27:26)
at invoke (http://localhost:8100/lib/ionic/js/ionic.bundle.js:11591:17)
at Object.instantiate (http://localhost:8100/lib/ionic/js/ionic.bundle.js:11602:23)
at http://localhost:8100/lib/ionic/js/ionic.bundle.js:14906:28
at updateView (http://localhost:8100/lib/ionic/js/ionic.bundle.js:42986:30)
at eventHook (http://localhost:8100/lib/ionic/js/ionic.bundle.js:42933:17)
at Scope.$broadcast (http://localhost:8100/lib/ionic/js/ionic.bundle.js:20605:28)
at $state.transition.resolved.then.$state.transition (http://localhost:8100/lib/ionic/js/ionic.bundle.js:34122:22)
at wrappedCallback (http://localhost:8100/lib/ionic/js/ionic.bundle.js:19197:81)
Can you now tell me what went wrong?
If is there another way to read the Device UUID show me the direction to it.
Yes, there is another way. You just don't need the ngCordova for this.
When you add the plugin cordova plugin add org.apache.cordova.device it's loaded to your application and therefore the info you want is at window.device.
If you want to get device uuid at anywhere in the code you just need to call window.device.uuid.
If you want as soon as the app starts, then use:
ionic.Platform.ready(function(){
console.log( window.device.uuid );
});
If you are using '> ionic serve', device will be "not defined." Try in an emulator or physical device.
Use ngCordova and cordova Device plugin:
cordova plugin add org.apache.cordova.device
module.controller('MyCtrl', function($scope, $cordovaDevice) {
var uuid = $cordovaDevice.getUUID();
});
Within v2 it works like this:
import { Device } from 'ionic-native';
console.log('Device UUID is: ' + Device.uuid);
Reference: http://ionicframework.com/docs/v2/native/device/
Install:
#ionic-native/core
#ionic-native/device
enter link description here
ionic cordova plugin add cordova-plugin-device
npm install --save #ionic-native/device
Add this plugin to your app's module
// app.module.ts
import { Device } from '#ionic-native/device';
...
#NgModule({
...
providers: [
...
Device
...
]
...
})
export class AppModule { }
Usage
import { Device } from '#ionic-native/device';
constructor(private device: Device) { }
...
console.log('Device Model is: ' + this.device.model+
'\n Device UUID is: ' + this.device.uuid+
'\n Device serial is: ' + this.device.serial+
'\n Device platform is: ' + this.device.platform+
'\n Device version is: ' + this.device.version+
'\n Device manufacturer is: ' + this.device.manufacturer);
If won't run change "import { Device } from '#ionic-native/device';" for "import { Device } from '#ionic-native/device/ngx';"
And "this.device.uuid" for "Investigate"
Use these commands for run in browser
ionic build
ionic cordova platform add browser
cordova run browser
And works ! in these versions
in Browser
in Real Device
You could just use ionic.Platform.device() in your platform.ready function.
$ionicPlatform.ready(function {
console.log(ionic.Platform.device());// returns an object containing device uuid,version, platform, manufacturer ...
});
hope this helps someone :).
Regards.
http://forum.ionicframework.com/t/ionic-cordova-device-uuid/13652
You may only access cordova plugins within the ionic.Platform.ready() callback function:
angular.module('starter.controllers', [])
.controller('DashCtrl', function ($scope, $state, $cordovaDevice) {
var init = function () {
console.log("initializing device");
try {
$scope.uuid = $cordovaDevice.getUUID();
}
catch (err) {
console.log("Error " + err.message);
alert("error " + err.$$failure.message);
}
};
ionic.Platform.ready(function(){
init();
});
})
This is because Cordova plugins take some more time to load then the web application. The ionic.Platform.ready() callback is triggered as soon Cordova has fully loaded or immediately if it is already loaded.
wow found out what wrong i was doing... through this question. http://forum.ionicframework.com/t/problem-to-use-ngcordova-device-is-not-defined/11979
when we test on other device which has other platform than cordova supports this happens.
this was a useful discovery for me.
Have been struggling with this for hours today, install the cordova device plugin with:
cordova plugin add cordova-plugin-device
make sure you also reference the plugin in your config.xml:
<plugin name="cordova-plugin-device" source="npm" spec="~1.1.1" />
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);
});
}