When I was implementing changing screen orientation following the tutorial on https://ionicframework.com/docs/native/device-orientation I got NullInjectorError. I already found the solution so I want share it with you.

The problem

Following the mentioned guide. I run commands below:

npm install https://github.com/moust/cordova-plugin-videoplayer.git
npm install @ionic-native/video-player
ionic cap sync

After that I created the video component. That’s how my video.component.ts looks like.

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

@Component({
  selector: 'app-video-player',
  templateUrl: './video-player.page.html',
  styleUrls: ['./video-player.page.scss'],
})
export class VideoPlayerPage implements OnInit{

  constructor(private screenOrientation: ScreenOrientation) { }

  ngOnInit() {

  }
}

As you probably noticed I inject ScreenOrientation in the constructor and that is the place where I got the error below.

core.js:4197 ERROR Error: Uncaught (in promise): NullInjectorError: R3InjectorError(VideoPlayerPageModule)[ScreenOrientation -> ScreenOrientation -> ScreenOrientation -> ScreenOrientation]: 
  NullInjectorError: No provider for ScreenOrientation!
NullInjectorError: R3InjectorError(VideoPlayerPageModule)[ScreenOrientation -> ScreenOrientation -> ScreenOrientation -> ScreenOrientation]: 
  NullInjectorError: No provider for ScreenOrientation!
    at NullInjector.get (core.js:915)
    at R3Injector.get (core.js:11082)
    at R3Injector.get (core.js:11082)
    at R3Injector.get (core.js:11082)
    at NgModuleRef$1.get (core.js:24199)
    at R3Injector.get (core.js:11082)
    at NgModuleRef$1.get (core.js:24199)
    at Object.get (core.js:22102)
    at getOrCreateInjectable (core.js:3921)
    at ɵɵdirectiveInject (core.js:13753)
    at resolvePromise (zone-evergreen.js:798)
    at resolvePromise (zone-evergreen.js:750)
    at zone-evergreen.js:860
    at ZoneDelegate.invokeTask (zone-evergreen.js:399)
    at Object.onInvokeTask (core.js:27425)
    at ZoneDelegate.invokeTask (zone-evergreen.js:398)
    at Zone.runTask (zone-evergreen.js:167)
    at drainMicroTaskQueue (zone-evergreen.js:569)

The solution

To fix the error ensure that you import correct module (with ngx at the end) and add the following lines to app.module.ts file.

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';

import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { ScreenOrientation } from '@ionic-native/screen-orientation/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';

import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';

@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule],
  providers: [
    StatusBar,
    SplashScreen,
    ScreenOrientation,
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}