ionic-native ScreenOrientation does not work according to docs for ionic 4. Update needed?

Created on 16 Aug 2018  路  5Comments  路  Source: ionic-team/ionic-native

https://github.com/ionic-team/ionic-native/blob/d10777a33b42cf79e253cee69e21f5a02dc539fe/src/%40ionic-native/plugins/screen-orientation/index.ts

I'm submitting a

[x] Bug report
[x] Feature request
[x] Documentation issue or request

Currrent behavior

@ionic-native/screen-orientation lacks /ngx folder. Not updated for use with ionic V4?
Adding the screen-orientation plugin to an ionic V4 app leads to build error or run-time error.

Expected behavior

Plugin should work for ionic V4, like it does for V3 apps.

Minimal reproduction of the problem with instructions

1) Creating a new V4 project:
ionic start test blank --type=angular
? Integrate your new app with Cordova to target native iOS and Android? Yes

2) Adding ScreenOrientation plugin:
Adding according to V4 docs: (https://beta.ionicframework.com/docs/native/screen-orientation):
2a) ionic cordova plugin add cordova-plugin-screen-orientation
2b) npm install --save @ionic-native/screen-orientation

3) Adding ScreenOrientation to code:
According to: https://beta.ionicframework.com/docs/native/#Add_Plugins_to_Your_App_Module
"To use a plugin, import and add the plugin injectable to a @NgModule. For Angular, the import path should end with /ngx".
However, unlike _node_modules/@ionic-native/splash-screen_ and _status-bar_, _node_modules/@ionic-native/screen-orientation_ does not have an ngx subfolder, and when trying to import in app.module.ts like with ionic 3 (i.e. not from ngx subfolder), errors occur, as described in 4) - 6):

4) Test run after adding ScreenOrientation to code (app.module.ts):
ionic cordova run android

Result: ERROR in node_modules/@ionic-native/screen-orientation/index.d.ts(2,10): error TS2305: Module '"C:/prg/javascript/ionic4/test/node_modules/rxjs/Observable"' has no exported member 'Observable'.

node_modules/rxjs/Observable.d.ts(1,15): error TS2307: Cannot find module 'rxjs-compat/Observable'.

5) Trying to solve the problem by: npm install rxjs-compat

6) Test run with rxjs-compat:
ionic cordova run android

Result: Run-time error occurs in the app:

Uncaught TypeError: Object(...) is not a function
at vendor.js:64946
at Object../node_modules/@ionic-native/screen-orientation/index.js (vendor.js:65028)

*Environment *

Ionic:
ionic (Ionic CLI) : 4.0.6
Ionic Framework : @ionic/angular 4.0.0-beta.2
@angular-devkit/core : 0.7.3
@angular-devkit/schematics : 0.7.3
@angular/cli : 6.1.3
@ionic/ng-toolkit : 1.0.6
@ionic/schematics-angular : 1.0.5

Cordova:
cordova (Cordova CLI) : 8.0.0
Cordova Platforms : android 7.0.0

System:
Android SDK Tools : 26.1.1
NodeJS : v8.11.2 (C:Program Filesnodejsnode.exe)
npm : 5.6.0
OS : Windows 10

Most helpful comment

Because you have not installed the @beta module.
npm install --save @ionic-native/screen-orientation@beta.

All 5 comments

Additional info/comment to this issue:
From package.json: @ionic-native/core, and @ionic-native/splash-screen, and @ionic-native/status-bar, which have the ngx subfolder, are version 5.0.0-beta.14, while @ionic-native/screen-orientation is 4.11.0:

"@ionic-native/core": "5.0.0-beta.14",
"@ionic-native/screen-orientation": "^4.11.0",
"@ionic-native/splash-screen": "5.0.0-beta.14",
"@ionic-native/status-bar": "5.0.0-beta.14",
"@ionic/angular": "^4.0.0-beta.0",
"cordova-android": "7.0.0",
"cordova-plugin-device": "^2.0.2",
"cordova-plugin-ionic-keyboard": "^2.1.2",
"cordova-plugin-ionic-webview": "^2.0.3",
"cordova-plugin-screen-orientation": "^3.0.1",
"cordova-plugin-splashscreen": "^5.0.2",

Same error here trying to use qr-scanner

Same problem with qr-scanner/barcode-scanner/camera

Because you have not installed the @beta module.
npm install --save @ionic-native/screen-orientation@beta.

Because you have not installed the @beta module.
npm install --save @ionic-native/screen-orientation@beta.

this works, but why there is no mention in the documents. it would have saved a frustrating day.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

Manduro picture Manduro  路  3Comments

vaibsVB picture vaibsVB  路  4Comments

GunaSekhar1 picture GunaSekhar1  路  4Comments

kyleap picture kyleap  路  4Comments

hobbydevs picture hobbydevs  路  3Comments