Ionic2 Ionic Native And Cordova-plugin-gyroscope Error

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

Solution 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