I am trying to use Gyroscope plugin from Ionic native. Following is my ionic info.
#ionic/cli-utils : 1.19.2
ionic (Ionic CLI) : 3.20.0
cordova (Cordova CLI) : 8.0.0
Ionic Framework : ionic-angular 3.9.2
System:
Android SDK Tools : 26.1.1
Node : v8.9.1
npm : 5.8.0
OS : Windows 10
Following is my code:
import { Component } from '#angular/core';
import { NavController } from 'ionic-angular';
// import { Platform } from 'ionic-angular';
import { Gyroscope, GyroscopeOrientation, GyroscopeOptions } from '#ionic-native/gyroscope';
#Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {
btnLabel_ReadSensors: string;
constructor(public navCtrl: NavController,
// private platform: Platform,
private gyroscope: Gyroscope
) {
this.btnLabel_ReadSensors = "Start";
// platform.ready().then(() => {
// });
}
ReadGyroscope() {
this.gyroscope.getCurrent({ frequency: 500 }).then((orientation: GyroscopeOrientation) => {
console.log(orientation.x, orientation.y, orientation.z, orientation.timestamp);
}).catch((reason) => console.log("Rejected:", reason));
}
}
In above code, ReadGyroscope() is a click callback for a button on UI. In this function, I am trying to read current gyro data and log it on console.
I get following console output whenever I click the button.
[23:36:28] console.warn: Native: tried calling Gyroscope.getCurrent, but the Gyroscope plugin is not installed.
[23:36:28] console.warn:Install the Gyroscope plugin: 'ionic cordova plugin add cordova-plugin-gyroscope'
[23:36:28] console.log: Rejected:plugin_not_installed
Following is already done:
I have already installed the plugin as per ionic documentation.
Updated app.module.ts as suggested in documentation.
Tried to read data in HomePage constructor with check for
platform.ready().
Tried reading data periodically using watch method.
My issue is similar to this issue but as it is old, no solution was suggested and the tool versions are changed, I am posting this issue.
I also referred here; but I think the issue was specific to other plugin.
Someone suggested to install gyro plugin directly from git (see here). Tried that too but no success.
Thank you!
Related
NullInjectorError: No provider for Magnetometer
My goal is to read sensordata, like magnetometer. Using Ionic 5, Angular, capacitor android.
You can find my project at https://github.com/kpproce/ionicMagnoMeter
I can't get access to the magnetometer, because the object is empty. I did manage to access the camera, but this is standard available in the web version also...
I understand that the magnetometer probably doesn't exist in the web app version.
There are many instructions about plugins, but could not get them working
followed instructions: https://ionicframework.com/docs/native/magnetometer
To prepare: In the terminal VScode:
--- npm install --save #ionic-native/core
--- npm install cordova-plugin-magnetometer
--- npm install #ionic-native/magnetometer
--- npx cap add android
Code used:
import { Component } from '#angular/core';
import { Plugins } from '#capacitor/core';
import { Magnetometer, MagnetometerReading } from '#ionic-native/Magnetometer/ngx';
...
export class HomePage {
constructor(private magnetometer: Magnetometer) {} // this seems to be the problem, empty object
see error NullInjectorError: No provider for Magnetometer!
See: https://forum.ionicframework.com/t/getting-error-no-provider-for-mediaplugin/53570/5
Usually you add ionic native plugins like that:
add the plugin to your app with cli command
ionic plugin add --save PLUGINNAME
install the ionic native plugin from npm
npm install --save #ionic-native/PLUGINNAME
import it in your page/provider and in your app.module.ts
import { PLUGINNAME } from '#ionic-native/PLUGINNAME';
add it to your app.module.ts
providers: [ PLUGINNAME ]
use DI in your constructor in your page/provider
constructor(private pluginName: PLUGINNAME) { }
then you can use it in your code
I need open a link into my Ionic-3 project and when I google it I saw InAppBrowser Plugin.
Actually there is only one picture in this link so If you know any other method for get it or show directly this picture it is can be enough for me.
I done all of it like what documentary done.
The Documentary which is I used for : https://blog.paulhalliday.io/ionic-3-integrating-inappbrowser-plugin/
Step-1: I installed ionic cordova plugin add cordova-plugin-inappbrowser
Step-2: I installed as well npm install #ionic-native/in-app-browser --save
And there was no error in Command Line(Terminal)
Step-3: I imported the plugin into app.module.ts import { InAppBrowser } from '#ionic-native/in-app-browser';
And there was no error in code editor
!!! Step-4: When I tried to add InAppBrowser into providers part I faced an error like picture which below
If you can not see : http://prntscr.com/mc964l link is here.
Why that error happened I do not get it.
Can anybody help me about this issue?
Thanks in advance!
Ionic 3:
Install the Cordova and Ionic Native plugins:
$ ionic cordova plugin add cordova-plugin-inappbrowser
$ npm install --save #ionic-native/in-app-browser#4
You must append version 4 to the package name after the # character (version 5.x is not compatible with Ionic 3):
Then, add to Provider:
import { InAppBrowser } from '#ionic-native/in-app-browser';
...
#NgModule({
...
providers: [
...
InAppBrowser
...
]
...
})
export class AppModule { }
Source: https://ionicframework.com/docs/v3/native/in-app-browser/
Ionic 4:
For Angular, the import path should end with /ngx
import { InAppBrowser } from '#ionic-native/in-app-browser/ngx';
Then, add to Provider:
// app.module.ts
import { InAppBrowser } from '#ionic-native/in-app-browser/ngx';
...
#NgModule({
...
providers: [
...
InAppBrowser
...
]
...
})
export class AppModule { }
Source: https://ionicframework.com/docs/native#angular
Just in case there are people still facing this issue after upgrading to Angular 11 + I found out that the problem is with the ivy.
The import should look like this:
import { InAppBrowser } from '#ionic-native/in-app-browser/__ivy_ngcc__/ngx';
onic Info
Run ionic info from a terminal/cmd prompt and paste the output below.
cli packages: (C:\Users\lenovo\AppData\Roaming\npm\node_modules)
#ionic/cli-utils : 1.19.2
ionic (Ionic CLI) : 3.20.0
global packages:
cordova (Cordova CLI) : 8.0.0
local packages:
#ionic/app-scripts : 3.1.8
Cordova Platforms : android 7.0.0
Ionic Framework : ionic-angular 3.9.2
System:
Android SDK Tools : 26.1.1
Node : v8.11.2
npm : 5.6.0
OS : Windows 10
Environment Variables:
ANDROID_HOME : D:\sdk
Misc:
Describe the Bug
Hi i am developing application related to chat. In this application consist of two pages first page consist of list of user contacts and when click on particular contact navigate to the message screen. when user close the app then he/she will receive push notification then i need to navigate the user to message screen but i am unable to do it.
this.fcm.onNotification().subscribe this function is executing after setting root page. so without navigate to root page i want to navigate to message page.
Please help me out to resolve the issue.
try this from my working code.
this.fcm.onNotification().subscribe(data => {
let ref_this = this;
if (data.wasTapped == true) {
ref_this.nav.push('NotificationPage')
console.log("Received in background");
} else {
console.log(data);
ref_this.nav.push('NotificationPage')
console.log("Received in foreground");
}
});
I am working on creating a taxi app , I have two separated apps one for Client and for driver .
I want to send current locations of drivers to clients .I don't know how I can do that .
Firebase is a good option to use as your backend in this situation. It uses web sockets to automatically push data. You can use AngularFire to link Ionic with Firebase. (Video tutorial: https://www.youtube.com/watch?v=I_73tsvj6OI)
Hey #bambo so for your understanding it is not possible to transfer data from one app to another without connection, and in your case both of the app can be in distance where only internet will work. So you can use one of these methods:
APIs for sending the data from one app and receiving it from other app.
Send a notification direct to other app, which contain the data you want to send for ionic you can use PUSH cordova available on
ionic docs.
You can send or receive data through webIntent plugin provided by ionic.
Ionic:
Ionic CLI : 5.0.2 (C:\Windows\System32\node_modules\ionic)
Ionic Framework : ionic-angular 3.9.5
#ionic/app-scripts : 3.2.2
Cordova:
Cordova CLI : 9.0.0 (cordova-lib#9.0.1)
Cordova Platforms : android 8.0.0
Cordova Plugins : cordova-plugin-ionic-keyboard 2.1.3, cordova-plugin-ionic-webview 4.1.0, (and 5 other plugins)
Utility:
cordova-res : not installed
native-run : 0.2.5
System:
Android SDK Tools : 26.1.1 (D:\Android\Sdk)
NodeJS : v12.4.0 (D:\node.exe)
npm : 6.9.0
OS : Windows 8.1
Command to install plugin:
ionic cordova plugin add com-darryncampbell-cordova-plugin-intent
npm install --save #ionic-native/web-intent#4
(Add 'Web-Intent' in provider)
Code To receive data:
import { WebIntent } from '#ionic-native/web-intent';
clickMe() {
console.log('clicked')
this.webIntent.getIntent().then((data) => {
console.log('Success', data);
},
err => {
console.log('Error', err);
});
}
Code To send data:
import { WebIntent } from '#ionic-native/web-intent';
sendIntent() {
console.log('sendIntent');
const options = {
action: 'com.example.myapplication',
extras: {
'data': 'Hello Android App'
}
}
this.webIntent.sendBroadcast(options).then((succ) => {
console.log('Success', succ);
},
err => {
console.log('Error', err);
});
}
i am using ionic 2 for my android application. For page routing i am using
this.nav.push(LoginPage);
When i push from one page to another it's showing previous page some sections in current page. Because of this my pages are not showing as expected.
Cordova CLI: 6.5.0
Ionic Framework Version: 3.6.0
Ionic CLI Version: 2.2.1
Ionic App Lib Version: 2.2.0
Ionic App Scripts Version: 2.0.2
ios-deploy version: Not installed
ios-sim version: Not installed
OS: Windows 10
Node Version: v6.10.0
Xcode version: Not installed
Please help. I cant find any errors in my console. I don't know why its happening. Please suggest need to follow any particular standard for routing.
Thanks
Add loginPage import to app.module.ts file.
import { NavController} from 'ionic-angular';
Add in constructor like constructor(private navCtrl: NavController)
And push the page on stack
this.navCtrl.push(LoginPage);