ERROR Error: Uncaught (in promise): SecurityError: The page needs to be fullscreen in order to call screen.orientation.lock()

Ionic Framework ionic-v3
#1

Hi There,

I have got below error when I tried to change orientation of one of my page in Ionic 3 app. I have used below code to change Portrate mode to landscape mode.

ionViewDidEnter() {
    // this.statusBar.hide();
    // // Set orientation to portrait.unlock();
    this.screenOrientation.lock(this.screenOrientation.ORIENTATIONS.LANDSCAPE);
  }

But it returns me below error:

core.js:1350 ERROR Error: Uncaught (in promise): SecurityError: The page needs to be fullscreen in order to call screen.orientation.lock().
    at c (http://192.168.0.101:8100/build/polyfills.js:3:19752)
    at http://192.168.0.101:8100/build/polyfills.js:3:19174
    at t.invoke (http://192.168.0.101:8100/build/polyfills.js:3:14976)
    at Object.onInvoke (http://192.168.0.101:8100/build/vendor.js:5294:33)
    at t.invoke (http://192.168.0.101:8100/build/polyfills.js:3:14916)
    at r.run (http://192.168.0.101:8100/build/polyfills.js:3:10143)
    at http://192.168.0.101:8100/build/polyfills.js:3:20242
    at t.invokeTask (http://192.168.0.101:8100/build/polyfills.js:3:15660)
    at Object.onInvokeTask (http://192.168.0.101:8100/build/vendor.js:5285:33)
    at t.invokeTask (http://192.168.0.101:8100/build/polyfills.js:3:15581)

Below are my ionic and package.json information:

ionic info

cli packages: (C:\Users\prawez.musharraf\AppData\Roaming\npm\node_modules)

    @ionic/cli-utils  : 1.19.1
    ionic (Ionic CLI) : 3.19.1

global packages:

    cordova (Cordova CLI) : 8.0.0

local packages:

    @ionic/app-scripts : 3.1.8
    Cordova Platforms  : android 7.0.0 browser 5.0.3
    Ionic Framework    : ionic-angular 3.9.2

System:

    Android SDK Tools : 26.1.1
    Node              : v6.11.0
    npm               : 5.6.0
    OS                : Windows 8.1

Environment Variables:

    ANDROID_HOME : C:\Users\prawez.musharraf\AppData\Local\Android\Sdk

Misc:

    backend : pro

"dependencies": {
    "@angular/common": "5.0.3",
    "@angular/compiler": "5.0.3",
    "@angular/compiler-cli": "5.0.3",
    "@angular/core": "5.0.3",
    "@angular/forms": "5.0.3",
    "@angular/http": "5.0.3",
    "@angular/platform-browser": "5.0.3",
    "@angular/platform-browser-dynamic": "5.0.3",
    "@ionic-native/camera": "^4.5.3",
    "@ionic-native/core": "4.4.0",
    "@ionic-native/file": "^4.5.3",
    "@ionic-native/file-path": "^4.5.3",
    "@ionic-native/file-transfer": "^4.5.3",
    "@ionic-native/local-notifications": "^4.5.3",
    "@ionic-native/network": "^4.5.3",
    "@ionic-native/screen-orientation": "^4.5.3",
    "@ionic-native/splash-screen": "4.4.0",
    "@ionic-native/status-bar": "4.4.0",
    "@ionic-native/transfer": "^3.14.0",
    "@ionic/pro": "1.0.17",
    "@ionic/storage": "2.1.3",
    "@vimeo/player": "^2.2.1",
    "chart.js": "^2.7.1",
    "cordova": "8.0.0",
    "cordova-android": "7.0.0",
    "cordova-browser": "5.0.3",
    "cordova-plugin-badge": "^0.8.7",
    "cordova-plugin-camera": "^4.0.2",
    "cordova-plugin-crosswalk-webview": "^2.4.0",
    "cordova-plugin-device": "^2.0.1",
    "cordova-plugin-file": "^6.0.1",
    "cordova-plugin-file-transfer": "^1.7.1",
    "cordova-plugin-filepath": "^1.2.0",
    "cordova-plugin-ionic-keyboard": "^2.0.5",
    "cordova-plugin-ionic-webview": "^1.1.16",
    "cordova-plugin-local-notification": "^0.9.0-beta.2",
    "cordova-plugin-network-information": "^2.0.1",
    "cordova-plugin-screen-orientation": "^3.0.1",
    "cordova-plugin-splashscreen": "^5.0.2",
    "cordova-plugin-whitelist": "^1.3.3",
    "es6-promise-plugin": "^4.2.2",
    "ionic-angular": "3.9.2",
    "ionicons": "3.0.0",
    "lodash": "^4.17.5",
    "lodash.indexof": "^4.0.5",
    "ng2-charts": "^1.6.0",
    "rxjs": "5.5.2",
    "sw-toolbox": "3.6.0",
    "zone.js": "0.8.18"
  },
  "devDependencies": {
    "@ionic/app-scripts": "3.1.8",
    "@ionic/cli-plugin-proxy": "1.5.7",
    "typescript": "2.4.2"
  },
  "description": "An Ionic project",
  "cordova": {
    "plugins": {
      "cordova-plugin-whitelist": {},
      "cordova-plugin-device": {},
      "cordova-plugin-splashscreen": {},
      "cordova-plugin-ionic-webview": {},
      "cordova-plugin-ionic-keyboard": {},
      "cordova-plugin-crosswalk-webview": {
        "XWALK_VERSION": "23+",
        "XWALK_LITEVERSION": "xwalk_core_library_canary:17+",
        "XWALK_COMMANDLINE": "--disable-pull-to-refresh-effect",
        "XWALK_MODE": "embedded",
        "XWALK_MULTIPLEAPK": "true"
      },
      "cordova-plugin-camera": {},
      "cordova-plugin-file": {},
      "cordova-plugin-file-transfer": {},
      "cordova-plugin-filepath": {},
      "cordova-plugin-local-notification": {},
      "cordova-plugin-network-information": {},
      "cordova-plugin-screen-orientation": {}
    },
    "platforms": [
      "browser",
      "android"
    ]
  }

I have check ionic forum for similar issue and tried every solution without any luck.
Could anyone suggest me how I can resolve this issue?

Thanks.

#2