Ionic Native Gyroscope


Did someone try the ionic native Gyroscope plugin ? I don’t succeed to make it work because of a typecript error that said there is not exported members ‘Gyroscope’.

Here is the line which doesn’t work:

import { Gyroscope } from ‘ionic-native’;

When I checked in the node_modules/ionic-native folder I couldn’t find the gyroscope folder. Do I need to do something special to make it work ?


This does not work for me as well, I did everything according to the tutorials available. I even tried alternative methods that used a global variable as described here:

Okay so I found something that works on my end, but is less practical:

It works really well on my OnePlus One, but I’m not sure if it works on any and every device.

I implemented it like this:

export class HomePage {

public orientation: any = {
	alpha: Number,
	beta: Number,
	gamma: Number

constructor(public navCtrl: NavController) {		
	window.addEventListener("deviceorientation", (event) => {
		this.parseOrientation(event.alpha, event.beta, event.gamma);

parseOrientation(alpha, beta, gamma) {
	this.orientation = {
		alpha: alpha,
		beta: beta,
		gamma: gamma


Thank you for your answer.

Indeed, the device orientation event work fine but I found a way to use the plugin anyway:

var gyroscope = (<any>navigator).gyroscope;

Then, I can use the plugin normally. It’s just weird that it doesn’t work with ionic-native…

Make sure you have the absolutely latest ionic-native. That plugin looks to have only been added less than two weeks ago.

I checked and I have the last version (2.8.1)

I just tried on another computer and it worked. I think I will reinstall ionic on my computer…

I’m glad you guys are on this already :slight_smile: I just tried the same thing, currently updating Ionic and hopefully that will be my fix.

Hello Everyone ;

import { Gyroscope, GyroscopeOrientation,GyroscopeOptions} from ‘@ionic-native/gyroscope’;

selector: ‘page-home’,
templateUrl: ‘home.html’,

constructor(public navCtrl: NavController,public geolocation: Geolocation,private gyroscope: Gyroscope) {}

.subscribe((orientation: GyroscopeOrientation) => {
console.log(orientation.x, orientation.y, orientation.z, orientation.timestamp);



let options: GyroscopeOptions = {

frequency: 1000

this.gyroscope.getCurrent(options).then((orientation: GyroscopeOrientation)=>{console.log(orientation.x);console.log(orientation.y);console.log(orientation.z)})


These are my codes but I cant get any data is there anyone can solve this problem ?

Thank you in Advance

I have successfully implemented the Gyroscope using the following:
let options: GyroscopeOptions = {
frequency: 1000

    .then((orientation: GyroscopeOrientation) => {
      console.log(orientation.x, orientation.y, orientation.z, orientation.timestamp);
      this.x = orientation.x;
      this.y = orientation.y;
      this.z = orientation.z;
    .subscribe((orientation: GyroscopeOrientation) => {
      console.log(orientation.x, orientation.y, orientation.z, orientation.timestamp);
      this.x1 = orientation.x;
      this.y1 = orientation.y;
      this.z1 = orientation.z;

This generates the numbers that changes every second as expected. But I am not able to make sense out of these numbers. They change frequently even when I lay the phone on a stationary table. I am trying to calculate the phone orientation with respect to the North (True or Magnetic). I am using camera preview want to make sure it point in landscape mode directly at the face level (not facing up or down). I want to show data only at the face level. How do I make use of these Gyroscope numbers in determining the phone orientation with respect to the x, y or z axis or calculate roll, pitch and yaw?

Main question, what does x, y and z represent? Are they angular velocities or directions by radians or what? Why do they change when my phone is stationary?

This article and that article should help you. Note that the raw data includes the effect of gravity. I’ve started using gyronorm and I find its representation more useful for my needs (I’m working on motion while driving a car)

Thanks for these informative links. Will try Gyronorm and let you know.

Any thoughts on why I see this?

Uncaught Error: Can't resolve all parameters for GyroNorm: (?).
    at syntaxError (compiler.es5.js:1540)
    at CompileMetadataResolver._getDependenciesMetadata (compiler.es5.js:14877)
    at CompileMetadataResolver._getTypeMetadata (compiler.es5.js:14745)
    at CompileMetadataResolver._getInjectableMetadata (compiler.es5.js:14731)
    at CompileMetadataResolver.getProviderMetadata (compiler.es5.js:15021)
    at compiler.es5.js:14950
    at Array.forEach (<anonymous>)
    at CompileMetadataResolver._getProvidersMetadata (compiler.es5.js:14911)
    at CompileMetadataResolver.getNgModuleMetadata (compiler.es5.js:14566)
    at JitCompiler._loadModules (compiler.es5.js:25630)

Followed the steps:

  1. $ npm install gyronorm
  2. Updated the file index.html before the cordova script src reference. . Copied file gyronorm.complete.min.js to the location src/js/gyronorm.complete.min.js.
  3. deleted node_modules and everything under www folder
  4. ran

ionic cordova run browser

at the shell prompt.

There is no need to include files manually. After you npm install it, simply use it like so:

import {GyroNorm} from 'gyronorm';
this.platform.ready().then ( () => {
      this.gyroNorm = new GyroNorm();