Cannot find name 'ScreenOrientation'. Error in ionic screen orientation plugin

1
votes

I am creating an app using ionic version 4 using Angular 6! I need to get the orientation if device so i used screen orientation plugin from Ionic 4 docs: [https://beta.ionicframework.com/docs/native/screen-orientation]

But when I installed the plugin I got the warnings as : 

.8.0-rc.1 but none is installed. You must install peer dependencies yourself.
npm WARN @ionic/[email protected] requires a peer of @angular-devkit/build-angular@~0.8.0-rc.1 but none is installed. You must install peer dependencies yourself.
npm WARN @ionic/[email protected] requires a peer of @angular-devkit/core@~0.8.0-rc.1 but none is installed. You must install peer dependencies yourself.
npm WARN @ionic/[email protected] requires a peer of @angular-devkit/schematics@~0.8.0-rc.1 but none is installed. You must install peer dependencies yourself.
npm WARN @ionic/[email protected] requires a peer of @angular-devkit/core@~0.8.0-rc.1 but none is installed. You must install peer dependencies yourself.
npm WARN @ionic/[email protected] requires a peer of @angular-devkit/schematics@~0.8.0-rc.1 but none is installed. You must install peer dependencies yourself.
npm WARN @ionic-native/[email protected] requires a peer of @ionic-native/core@^4.11.0 but none is installed. You must install peer dependencies yourself.
npm WARN @ionic-native/[email protected] requires a peer of rxjs@^5.5.11 but none is installed. You must install peer dependencies yourself.

+ @ionic-native/[email protected]
added 1 package in 8.608s

Now when I tried to import in a page like:

Failed to compile.

./node_modules/@ionic-native/screen-orientation/index.js Module not found: Error: Can't resolve 'rxjs/Observable' in '/Users/karthikcp/Documents/IONIC/testbake/node_modules/@ionic-native/screen-orientation'

How could I solve this?

Informations:

```
Ionic:

   ionic (Ionic CLI)          : 4.1.2 (/usr/local/lib/node_modules/ionic)
   Ionic Framework            : @ionic/angular 4.0.0-beta.7
   @angular-devkit/core       : 0.7.5
   @angular-devkit/schematics : 0.7.5
   @angular/cli               : 6.1.5
   @ionic/ng-toolkit          : 1.0.8
   @ionic/schematics-angular  : 1.0.6

Cordova:

   cordova (Cordova CLI) : 7.1.0
   Cordova Platforms     : none
   Cordova Plugins       : no whitelisted plugins (2 plugins total)

System:

   ios-deploy : 1.9.2
   NodeJS     : v8.11.3 (/Users/karthikcp/.nvm/versions/node/v8.11.3/bin/node)
   npm        : 5.6.0
   OS         : macOS High Sierra
   Xcode      : Xcode 9.4.1 Build version 9F2000

Update

I reinstalled the plugin as : npm install --save @ionic-native/[email protected]

Now I am getting this error :

ERROR in src/app/pages/test/test.page.ts(14,42): error TS2304: Cannot find name 'ScreenOrientation'.

Dependencies:

"dependencies": {
    "@angular/common": "~6.1.1",
    "@angular/core": "~6.1.1",
    "@angular/forms": "~6.1.1",
    "@angular/http": "~6.1.1",
    "@angular/platform-browser": "~6.1.1",
    "@angular/platform-browser-dynamic": "~6.1.1",
    "@angular/router": "~6.1.1",
    "@ionic-native/core": "5.0.0-beta.15",
    "@ionic-native/screen-orientation": "^5.0.0-beta.15",
    "@ionic-native/splash-screen": "5.0.0-beta.15",
    "@ionic-native/status-bar": "5.0.0-beta.15",
    "@ionic/angular": "4.0.0-beta.7",
    "cordova-plugin-screen-orientation": "^3.0.1",
    "core-js": "^2.5.3",
    "rxjs": "6.2.2",
    "zone.js": "^0.8.26"
  },
2
ionic-frameworkangular6

2 Answers

3
votes

I only get this error, if i'm importing like this:

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

but if i'm adding /ngx to @ionic-native/screen-orientation than it doesn't show the cannot find name Error. But on my side it show's

NullInjectorError: No Provider for ScreenOrientation!

Maybe that work's as wanted if you add /ngx.

0
votes

This worked for me. Inside your page.module, import dependency:

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

and provide to the module:

providers: [
    ScreenOrientation, 
    ...]

Be careful, if not expecified 'ScreenOrientation' from an expecific import, it will take a typescript interface. That was my mistake.