Plugin implementation error

I was looking for a solution to lock the Screenmode of my app to portrait mode only, found the Screen Orientation Ionic documentation, installed the plugins and synced it with capacitor and implemented it on every page is described.

First thing that was weird, was that when importing the ScreenOrientation and pressing tab it didn’t get the /ngx as source location, which is weird as it is stated in the Ionic documentation that is is needed.

Code:

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

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

  constructor(private screenOrientation: ScreenOrientation) {
  }

  lockScreenOrientationPortrait(){
    this.screenOrientation.lock(this.screenOrientation.ORIENTATIONS.PORTRAIT);
  }

  ngOnInit() {}

So I did that and it is not working, so I did a little research and found a post on StackOverflow that stated that it also has to be implemented in the app.module.ts so I implemented it there:

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

import { IonicModule, IonicRouteStrategy } from '@ionic/angular';

import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';
import { environment } from 'src/environments/environment';
import { HttpClientModule } from '@angular/common/http';

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

IonicModule.forRoot({
  swipeBackEnabled: false
});

@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule, HttpClientModule],
  providers:[ScreenOrientation, {provide: RouteReuseStrategy, useClass: IonicRouteStrategy }, ...environment.providers],
  bootstrap: [AppComponent],
})

export class AppModule {}

Well that isn’t working either, I tried implementing it in the enviroment.ts which is implemented in the app.module.ts but I thought I can try stuff out - not working.

The error message of Karma states:

HomePage > should create

Failed: R3InjectorError(DynamicTestModule)[ScreenOrientation -> ScreenOrientation]: 
  NullInjectorError: No provider for ScreenOrientation!

and

error properties: Object({ ngTempTokenPath: null, ngTokenPath: [ 'ScreenOrientation', 'ScreenOrientation' ] })
NullInjectorError: R3InjectorError(DynamicTestModule)[ScreenOrientation -> ScreenOrientation]: 
  NullInjectorError: No provider for ScreenOrientation!

I also implemented it in the enviroment.test.ts, just in case, but not working either.

Keep in mind that this is not even close to being documented properly on the ionic website and different sources on different forums state different things on this problem.

Maybe somebody here has an idea of how to solve this.

1 post - 1 participant

Read full topic