ionic2 ionic native and cordova-plugin-gyroscope e

Question

i have an ionic2 apps and i want to use Gyroscope with ionic native and cordova-plugin-gyroscope like this tutoriel :

https://ionicframework.com/docs/native/gyroscope/

but i have this error

ERROR Error: Uncaught (in promise): TypeError: Cannot read property 'watch' of undefined
TypeError: Cannot read property 'watch' of undefined
    at Observable._subscribe 

...

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { Gyroscope, GyroscopeOrientation, GyroscopeOptions } from '@ionic-native/gyroscope';

import { Platform } from 'ionic-angular';
import {geoCompassService} from '../../services/geocompass'
import * as Leaflet from "leaflet";

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage{

  pointGps:any;
  angle:any;
  distance:any;
  orientation:any;

  constructor(private platform: Platform,
              public navCtrl: NavController, 
              public _geoCompassService:geoCompassService,
              private gyroscope: Gyroscope) {

      platform.ready().then(() => {
         console.log("platform ready !!!");
          this.pointGps=this._geoCompassService.getPointGps();
          this.angle = (Math.atan2(0,1) - Math.atan2(( this.pointGps.coordB.lng -  this.pointGps.coordA.lng),                                                    ( this.pointGps.coordB.lat -  this.pointGps.coordA.lat)))*180/Math.PI+180;    
          this.distance = Leaflet.latLng( this.pointGps.coordA).distanceTo(this.pointGps.coordB);




          //Gyro
          let options: GyroscopeOptions = {
          frequency: 1000
          };

          this.gyroscope.getCurrent(options)
                        .then((orientation: GyroscopeOrientation) => {
              this.orientation=orientation
              console.log("orientation "+this.orientation.x)
            })
            .catch()

          this.gyroscope.watch()
                          .subscribe((orientation: GyroscopeOrientation) => {
                this.orientation=orientation
          });


      });

  }

}

Can't you help me

Answer 1

Please note this plugin will only work on real hardware, assuming your error is visible you are using a browser instead of emulator or real device.

import { Component } from '@angular/core';
import { Gyroscope, GyroscopeOrientation, GyroscopeOptions } from '@ionic-native/gyroscope';
import {Platform} from "ionic-angular";

@Component({
  selector: 'off-gyroscope',
  templateUrl: 'gyroscope.html'
})
export class GyroscopeComponent {

  options: GyroscopeOptions = {
    frequency: 100
  };
  orientation: GyroscopeOrientation;
  x: string;
  y: string;
  z: string;

  constructor(public plt: Platform, private gyroscope: Gyroscope) {
    plt.ready().then((readySource) => {

      if (readySource == 'cordova') {
        this.gyroscope.watch(this.options)
          .subscribe((orientation: GyroscopeOrientation) => {
            this.orientation = orientation;
            this.x = orientation.x.toString();
            this.y = orientation.y.toString();
            this.z = orientation.z.toString();
          });
      }
      else {
        this.x = 'Not a real device';
        this.y = 'Not a real device';
        this.z = 'Not a real device';
      }
    });
  }
}

Crucial thing is readySource checking for either dom (browser) or cordova (emulator/device).

Unfortunately documentation is missing clear tips for beginners how to handle 'hardware' plugins. Take a look at the image with the app used in the browser.

App in the browser