Lock Screen Orientation Ionic


#1

Hello , i search all around google and this forum about how to luck the screen orientation , and anything a found cant solve my problem , when i use the Screen Orientation native plugin of crodove
(Link to how : https://ionicframework.com/docs/v2/native/screen-orientation/)

i used the commands below in the platform.ready().then(()) section and nothig work

    window.screen.lockOrientation('portrait'); - window.screen.lockOrientation is not a function

or

    ScreenOrientation.lockOrientation('portrait'); -Cannot read property 'apply' of undefined TypeError: Cannot read property 'apply' of undefined at callCordovaPlugin 

or

   screen.lockOrientation('portrait'); - Property 'lockOrientation' does not exist on type 'Screen'.

this all app.component.ts page :

    import { Component } from '@angular/core';
import { Platform } from 'ionic-angular';
import { StatusBar, Splashscreen } from 'ionic-native';
import { ScreenOrientation } from 'ionic-native';
import { HomePage } from '../pages/home/home';



@Component({
  templateUrl: 'app.html'
})
export class MyApp {

  rootPage = HomePage;

  constructor(platform: Platform) {
	
    platform.ready().then(() => {
      // Okay, so the platform is ready and our plugins are available.
      // Here you can do any higher level native things you might need.
      StatusBar.styleDefault();
      Splashscreen.hide();
	 
	  ScreenOrientation.lockOrientation('portrait');
	
    });
  }
  
}

Thank You :slight_smile:


#2

Hmm just tested this out on android and ios and it seems to work fine for me.

import { Component } from '@angular/core';
import { ScreenOrientation } from 'ionic-native';
import { NavController } from 'ionic-angular';

@Component({
  selector: 'page-home',
  template: `
      <ion-header>
        <ion-navbar>
          <ion-title>
            Ionic Blank
          </ion-title>
        </ion-navbar>
      </ion-header>

      <ion-content padding>
        <button ion-button block (click)="lock()">lock</button>
      </ion-content>
  `
})
export class HomePage {

  constructor(public navCtrl: NavController) {

  }

  lock(){
    ScreenOrientation.lockOrientation('portrait')
  }

}

#3

Hey , thank you for your reply but i cant understand how its works for you , i use your all code page in my project , upload to the ionic view addon and from my iphone the screen orientation didn’t lock when i press the button.

Do you have know why ? mabey another solution ?


#4

I think the problem is Ionic View.
Maybe the app doesn’t support lock orientation.
I would suggest to build and test the app on a device, without using Ionic view.


#5

Oh , ok , thank you for your reply , i dont have a mac i use windows pc , how can i build and test on my iphone device without uploading to stroe ?


#6

Developping for iOS without a Mac is asking for problems.
2 options (that aren’t buying a Mac)

  1. Install mac virtually using VMWare.
  2. follow this tutorial: https://www.joshmorony.com/building-ionic-2-applications-for-ios-without-a-mac/
    I haven’t read i completely, but maybe it can help

#7

Hi, I used your code, but got an error in the console running on android (and the screen is not locked) :

screen should be locked to prtrait
main.js:17 EXCEPTION: Uncaught (in promise): TypeError: Cannot read property ‘apply’ of undefined
TypeError: Cannot read property ‘apply’ of undefined
at r (file:///android_asset/www/build/main.js:1:8881)
at Function. (file:///android_asset/www/build/main.js:1:14142)
at Function.value [as lockOrientation] (file:///android_asset/www/build/main.js:1:11860)
at file:///android_asset/www/build/main.js:18:25520
at t.invoke (file:///android_asset/www/build/polyfills.js:3:9655)
at Object.inner.inner.fork.onInvoke (file:///android_asset/www/build/main.js:3:20574)
at t.invoke (file:///android_asset/www/build/polyfills.js:3:9606)
at e.run (file:///android_asset/www/build/polyfills.js:3:7019)
at file:///android_asset/www/build/polyfills.js:3:4661
at t.invokeTask (file:///android_asset/www/build/polyfills.js:3:10284)
at Object.inner.inner.fork.onInvokeTask (file:///android_asset/www/build/main.js:3:20474)
at t.invokeTask (file:///android_asset/www/build/polyfills.js:3:10220)
at e.runTask (file:///android_asset/www/build/polyfills.js:3:7637)
at i (file:///android_asset/www/build/polyfills.js:3:3707)t.handleError @ main.js:17

Here is my code placed in the constructor of a page:

this.platform.ready().then(() => {
this.isCordova = this.platform.is(“cordova”);
this.isAndroid = this.platform.is(“android”);
if (this.isCordova) {
console.log(“screen should be locked to prtrait”);
ScreenOrientation.lockOrientation(‘portrait’);
}

My ionic info

Cordova CLI: 6.5.0
Ionic Framework Version: 2.3.0
Ionic CLI Version: 2.2.1
Ionic App Lib Version: 2.2.0
Ionic App Scripts Version: 1.1.3
ios-deploy version: Not installed
ios-sim version: Not installed
OS: Linux 4.4
Node Version: v7.8.0
Xcode version: Not installed

Thanks a lot for your help !


#8

After a couple of hours dealing with this, I solved this by the next way:

-I have followed the ionic doc to install here

-My problem was that my editor autoimported the wrong ScreenOrientation class, be careful and import the right one as shown on documentation

import {ScreenOrientation} from "@ionic-native/screen-orientation";

  • At this point the error shown is that there is not provider for ScreenOrientation, well, just add it on app.module.ts

providers: [{provide: ErrorHandler, useClass: IonicErrorHandler},ScreenOrientation ]

(don’t forget to import the right class).

After this I’m able to lock the screen orientation (always after device ready)

I hope that I have helped you


ScreenOrientation plugin gives runtime error
#9

Thank you, that helped. I was also importing the wrong plugin. In addition to what you suggested I had to …

“ionic plugin rm cordova-plugin-screen-orientation”

…then

ionic plugin add cordova-plugin-screen-orientation

To get it to work. But now I receive no exceptions when run on the device!