ScreenOrientation plugin errors

Ionic Framework ionic-v3
1

I have an Ionic2 project where I wanted to do some updates, using the ScreenOrientation plugin.
Where it didn’t give me any problems before, now I’m getting errors and I can’t wrap my head around it.

I reinstalled the plugin since it didn’t work anymore. It gave me following warnings when installing:

npm WARN @ionic-native/screen-orientation@3.12.1 requires a peer of @ionic-native/core@^3.6.0 but none was installed.
npm WARN @ionic-native/screen-orientation@3.12.1 requires a peer of rxjs@^5.0.1 but none was installed.

And when I build my project, transpiling failes because of the plugin.

[15:19:11]  typescript: node_modules/@ionic-native/screen-orientation/index.d.ts, line: 44 
            Type 'any' is not a constructor function type. 

      L44:  export declare class ScreenOrientation extends IonicNativePlugin {

[15:19:11]  transpile failed 
[15:19:11]  ionic-app-script task: "build" 
[15:19:11]  Error: Error

I’m really close to finishing my app… so frustrating not to be able to get there. Is there anyone who might know what to do?

Cheers

2

So did you upgrade your ionic-native/core dependency to the required version?

3

I should’ve mentioned this. But no, I wasn’t sure if this would be messing up the rest of my project. But I have upgraded ionic-native/core and other dependencies by now.

I now have a successful build. I get a runtime error now though:

ORIGINAL EXCEPTION: No provider for ScreenOrientation!

I just imported the plugin and added it to my Pages’ constructor:

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

export class MyPage {

    constructor(public screenOrientation:ScreenOrientation)
    {
         //...
    }
}
4

There is an additional step for all Ionic Native plugins:
https://ionicframework.com/docs/native/#Add_Plugins_to_Your_App_Module
(Of course also documented at https://ionicframework.com/docs/native/screen-orientation/)

5

Hi Jan

I was still getting a runtime error despite adding it to the app module. But I checked it again and I forgot to add it to the providers list. My mistake, thanks for helping me find it! Thanks a lot.

1 Like
6

Probably worth mentioning: I was again getting the original runtime errors after fixing above problems. I came across this post:

I originally installed the ScreenOrientation plugin with this command: ionic/cordova plugin add cordova-plugin-screen-orientation.

This caused a lot of headaches because it will use the npm registry which point to this git repo : https://github.com/gbenvenuti/cordova-plugin-screen-orientation.

This repo is not maintened anymore, instead we must use the official appache one : https://github.com/apache/cordova-plugin-screen-orientation.

So for anyone having issues with the plugin, you might try to remove the current plugin and add it from the direct (correct) link:

cordova plugin rm cordova-plugin-screen-orientation --save
cordova plugin add https://github.com/apache/cordova-plugin-screen-orientation --save
7

Hi all,

I have a problem with orientation lock with ionic serve

In my project i have just one page in landscape mode, this is it’s code :

import { Component, OnInit } from '@angular/core';
import { NavController, NavParams } from 'ionic-angular';
import { ScreenOrientation } from '@ionic-native/screen-orientation';

@Component({
  selector: 'page-map',
  templateUrl: 'map.html',
})
export class MapPage implements OnInit{

  constructor(public navCtrl: NavController, 
              public navParams: NavParams,
              private screenOrientation: ScreenOrientation) {  }

  ngOnInit(){
    this.screenOrientation.lock(this.screenOrientation.ORIENTATIONS.LANDSCAPE);
  }
}

This work perfectly on a real device, but when i want to test it on ionic serve i get the error below :

ERROR Error: Uncaught (in promise): NotSupportedError: screen.orientation.lock() is not available on this device.

I don’t understand why…Does it significate that i can’t test my landscape page with serve ?

Anyone get an idea ?

Thanks very much

8

Hi Gsoulie

I think it indeed doesn’t work with ionic serve - rotating screen only works on devices or emulators, not in the browser.

If you want your code to work in the browser too, you could check if you’re running on a desktop browser or not:

if (!platform.is('core')){
    //device-specific code, such as detecting screen rotation
}
else {
    //desktop browser only code
}
2 Likes
9

Ok thanks, i am going to test on real device :wink:

10

I found this thread when I was trying to answer this question myself.

Apparently the appropriate way to check for whether your app is running in a browser rather than as an app on a device is:

this.platform.is(‘mobileweb’) || this.platform.is(‘core’)

Which I found elsewhere. A bug report discussion thread I believe.

2 Likes