ScreenOrientation plugin errors

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?


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

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)

There is an additional step for all Ionic Native plugins:
(Of course also documented at

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

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 :

This repo is not maintened anymore, instead we must use the official appache one :

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 --save

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';

  selector: 'page-map',
  templateUrl: 'map.html',
export class MapPage implements OnInit{

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


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

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 (!'core')){
    //device-specific code, such as detecting screen rotation
else {
    //desktop browser only code

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

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:‘mobileweb’) ||‘core’)

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