Plugin implementation error

Ionic Framework Ionic Angular
1

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.

2

I find it fascinating how much language influences (and reveals) the assumptions we make about the world. For example, the exact same set of circumstances could be described instead as:

The documentation and examples that are listed as current on the Ionic website don’t match what I am seeing in my environment. I have also observed many different and incompatible suggestions on various online forums, perhaps suggesting that the proper syntax for this feature may have changed over time.

If you look at it that way, you might start to wonder if you’ve somehow got outdated or mismatched versions of software, some of which is no longer compatible with the currently documented state of affairs. To test that theory, perhaps you could be so kind as to post package.json.

3

Didn’t expect anything else from a moderator of the Ionic forum. No, my software is in fact not outdated and everything is up to date.

Other than that, the Ionic documentation is probably one of the worst ones to work with as a Dev, there is way less information given than needed. I don’t remember how often I had to look at different sources just to find a solution to a simple problem that should, in fact, be documented in the official Docs.

This screenOrientation thing was not even the first problem, that should have been a real quick and easy fix, that I spent hours on just to find a StackOverflow Post that guided me to that exact “simple” solution.

4

Each plugin page only documents the specific plugin code usage for that plugin, then, there is a common information page that documents framework specific configurations, such as the registering of providers for angular apps.

That “pressing tab” doesn’t autocomplete to /ngx is not a problem on the documentation or on the docs, but a problem on your IDE/Editor.

5

SALVE CEASAR!

I did not state that “tab not autocompleting to /ngx” is a problem, I simply stated that is is weird, I am indeed able to type /ngx myself.

Anyways, having a “common” information page should not be nececary if you could just state basic information for the implementation of a cordova plugin.

Also, be aware that the heathens of the north will beat you at the Battle of the Teutoburg Forest, so bls be prepared :slight_smile:

6

Not sure if you checked the link, but it contains a lot of information, because it supports multiple frameworks and every framework is different, so adding “basic” information to every plugin would basically mean to copy the whole page content into every plugin page, so, instead of that, a common page was created, linked as “setup”.
But they could probably link it on top so people don’t miss it.

7

I have indeed checked the link and it was very interesting, thank you for you contribution Ceasar!