Issue: Unhandled promise rejection: SecurityError: To use screen.orientation.lock(), the page must be in fullscreen mode

While attempting to change the orientation of one of my pages in an Ionic 3 app, I encountered the following error. The code snippet below was used to change from portrait mode to landscape mode:

ionViewDidEnter() {
    // this.statusBar.hide();
    // // Set orientation to portrait.unlock();
    this.screenOrientation.lock(this.screenOrientation.ORIENTATIONS.LANDSCAPE);
  }

Unfortunately, it resulted in the following error message:

core.js:1350 ERROR Error: Uncaught (in promise): SecurityError: The page needs to be fullscreen in order to call screen.orientation.lock().
    at c (http://192.168.0.101:8100/build/polyfills.js:3:19752)
    at http://192.168.0.101:8100/build/polyfills.js:3:19174
    at t.invoke (http://192.168.0.101:8100/build/polyfills.js:3:14976)
    at Object.onInvoke (http://192.168.0.101:8100/build/vendor.js:5294:33)
    at t.invoke (http://192.168.0.101:8100/build/polyfills.js:3:14916)
    at r.run (http://192.168.0.101:8100/build/polyfills.js:3:10143)
    at http://192.168.0.101:8100/build/polyfills.js:3:20242
    at t.invokeTask (http://192.168.0.101:8100/build/polyfills.js:3:15660)
    at Object.onInvokeTask (http://192.168.0.101:8100/build/vendor.js:5285:33)
    at t.invokeTask (http://192.168.0.101:8100/build/polyfills.js:3:15581)

The information related to my Ionic setup and package.json is as follows:

ionic info

cli packages: (C:\Users\prawez.musharraf\AppData\Roaming\npm\node_modules)

    @ionic/cli-utils  : 1.19.1
    ionic (Ionic CLI) : 3.19.1

global packages:

    cordova (Cordova CLI) : 8.0.0

local packages:

    @ionic/app-scripts : 3.1.8
    Cordova Platforms  : android 7.0.0 browser 5.0.3
    Ionic Framework    : ionic-angular 3.9.2

System:

    Android SDK Tools : 26.1.1
    Node              : v6.11.0
    npm               : 5.6.0
    OS                : Windows 8.1

Environment Variables:

    ANDROID_HOME : C:\Users\prawez.musharraf\AppData\Local\Android\Sdk

Misc:

    backend : pro

"dependencies": {
    ... [full list of dependencies]

After searching through the Ionic forum for a solution and testing various suggestions, I have yet to find a resolution to this issue. Can anyone offer guidance on how to resolve this problem?

Thank you.

angularcordovaionic-frameworkionic2ionic3

Answer №1

I encountered a similar issue with the standard web api for screen lock (https://w3c.github.io/screen-orientation/). I also tested it with the ionic plugin, but found no difference. Here is what I did to solve the problem:

  1. In the manifest.json file, set the display property to "standalone". Surprisingly, setting it to "fullscreen" did not work. If you make changes here and test on a local PWA, remember to re-install it for the changes in the manifest.json to take effect.

  2. Prior to calling the lock function, programmatically set the app to fullscreen using this code:

    document.documentElement[getRequestFullScreenKey()]();
...
private getRequestFullScreenKey() {
        let goFullScreen = 'requestFullscreen';
        if ('mozRequestFullScreen' in document.documentElement) {
            goFullScreen = 'mozRequestFullScreen';
        } else if ('webkitRequestFullscreen' in document.documentElement) {
            goFullScreen = 'webkitRequestFullscreen';
        } else if ('msRequestFullscreen' in document.documentElement) {
            goFullScreen = 'msRequestFullscreen';
        }
        return goFullScreen;
    }

  3. To execute the code mentioned in step 2, it must be triggered by a user gesture. For example, in the click-function of a button. It will not work in ionViewDidEnter or any other function that is not directly triggered by the user.

Answer №2

Avoid using ionViewDidEnter as it is the last method to execute in the Ionic life-cycle. Instead, consider utilizing the following approach:

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

constructor(private screenOrientation: ScreenOrientation) {}

ionViewDidLoad() {
    this.screenOrientation.lock('landscape');
}

Answer №3

It appears that your project is utilizing the 

gbenvenuti/cordova-plugin-screen-orientation
Screen Orientation plugin, which is no longer being maintained. It would be advisable to switch to the 
apache/cordova-plugin-screen-orientation
instead.

To make this switch, execute the following commands:

ionic cordova plugin rm cordova-plugin-screen-orientation --save
ionic cordova plugin add https://github.com/apache/cordova-plugin-screen-orientation --save
ionic cordova platform rm android --save
ionic cordova platform add android --save

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The client app automatically handles authentication when using Composer-rest-server

I've been working on a web app using Angular that will be integrating with Hyperledger Composer's REST API. Authentication has been set up using Google Passport. When accessing through a browser, an access token is displayed at the top. This to ...

angularhyperledger-fabrichyperledgerhyperledger-composer

Inject components in Angular using dependency injection

Can components in Angular be dependency injected? I am interested in a solution similar to injecting services, like the example below: my.module.ts: providers: [ { provide: MyService, useClass: CustomService } ] I attempted using *ngIf= ...

javascriptangulartypescriptangular8angular-dependency-injection

Angular 6 - execute function on either click event OR focus event

I am trying to figure out how to call a function from a component only when it is clicked or focused. Below is a snippet of the components HTML: <div class="form-add-new__input-box"> <input #commentCategories class="for ...

angulartypescript

Choosing to overload the plainToClass function may result in a type error

I've been tasked with compiling an angular project that contains mostly code written by someone else. Although the example below compiles successfully on one machine, it throws an error on different machines. import { plainToClass } from 'class ...

angulartypescriptclass-transformer

ASP.Net Core 3.1 server receives a blank user in JWT Bearer token

Today, I've been working on integrating JSON Web Token information with HttpContext.User using the Microsoft.AspNetCore.Authentication.JwtBearer library. The Issue: Whenever I make a request to the server, I can access functions with the [Authorize] ...

angularasp.net-coreclaims-based-identityjwt

The checkbox in ng-2-smart-table will either be checked or unchecked based on the value of the column

I am working with an ng2-smart-table and I need the second column to be a checkbox that is initially checked or empty based on the binary value in the fourth column of my data object. Currently, my code looks like this: export class UsermanagementComponen ...

angularng2-smart-table

When initiating an Ionic project, you may notice a repeated message in the terminal saying, "[INFO] Waiting for connectivity with npm..."

I'm in the process of setting up a new Ionic project along with all the necessary dependencies. However, whenever I try to execute the command "ionic serve," I keep getting stuck at the continuous display of the message "[INFO] Waiting for connectivit ...

node.jsangulartypescriptcordovaionic-framework

Angular `build` is encountering an error when dealing with externals that are declared using `webpack`

When working with Angular, I successfully load jquery from an external source. However, after the build process, I encounter a troubling error message: Uncaught ReferenceError: jQuery is not defined. It's worth noting that my build does download the j ...

jqueryangularwebpackangular-cliwebpack-externals

Solving the issue of interconnected promises in Angular services

I am utilizing a DynamoDB service within my Angular project which returns a promise through a series of promises. This process involves retrieving a subId from Cognito and then passing that subId to a DynamoDB get query: async getUserObject(): Promise< ...

angulartypescriptpromiseasync-await

Exploring the functionality of angular reactive forms in creating intricate JSON structures

After numerous attempts to resolve the issue on my own, I am reaching out to an Angular developer for assistance. My goal is to display a JSON object in the UI: Here is the JSON Object : items={"departure":"New York","arrival":"California","stations":[ ...

javascriptangulartypescript

Is there a way to transfer a variable from Angular 2 Frontend Express JS to an Angular 2 component?

After conducting thorough research, I have made specific modifications to my code. However, I am encountering some errors in my console that I cannot seem to resolve. Despite following a tutorial step by step. Your assistance would be highly valued as I a ...

javascriptangulartypescriptexpress

Utilizing Print Styles in an Angular 7 Application: A Step-by-Step Guide

I'm trying to print an html form within my Angular7 App with minimal margins. I've attempted different solutions such as adjusting the margins manually in Chrome's print preview box and adding @media print styles & @page styles in both the c ...

cssangular

Troubleshooting Clarifai object error while invoking "model.predict" within Angular Framework

I've been attempting to utilize Clarifai's color API to extract the different colors present in an image. Unfortunately, I am encountering challenges when trying to call the API, as it consistently returns empty objects. Below is the snippet of ...

angularresttypescriptclarifai

Is there a compelling case for implementing Meteor in 2017?

Back in the day, Meteor was expected to revolutionize web development on node by simplifying the process of creating interactive applications. Though I'm not well-versed in its history, it seems like most of the development effort has shifted elsewher ...

javascriptangularreactjsmeteor

What is the process for defining child routes in Angular 2.0 for Dart?

When working with TypeScript, a child route can be easily defined as shown below: export const routes: Routes = [ { path: '', redirectTo: 'product-list', pathMatch: 'full' }, { path: 'product-list', component: P ...

angulardartangular-dart

Methods for assigning values to a formControl using an array

I have an array of objects and I am attempting to loop through the array, dynamically setting values to a formControl and not displaying anything if the value is null. I have searched for similar solutions but haven't found any references or examples ...

javascriptangulartypescript

Generating a sequential array of dates and times in Angular

Currently, I am working on implementing a feature that will allow users to see the available visit times between two dates they select, specifically from 8:00 to 17:00 every day. For instance: If a user selects 1 Sep to 4 Sep, the system should return [1. ...

javascriptangulardatedatetime

Challenges with deploying an AngularJS application on a WebSphere Application Server (W

I have been attempting to package my spring boot webservice and Angular 6 app into a war file for deployment on WebSphere Application Server 8.5. I created a sample Angular app and ran "ng build --prod". Following the guidelines provided in this answer, I ...

angularwebsphereweb-deploymentwas

Sending Information to Heroku Server via Ionic 3

I am currently running a back-end service on Heroku with the endpoint https://sample.herokuapp.com/. My goal is to send a JSON object to the /bug/ endpoint: { "email": "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="b1d4dc ...

node.jsherokuionic-frameworkionic3

Using the Ternary Operator in JavaScript to Dynamically Update HTML Elements with Angular

Is there a way to convert the code below into a ternary operator so that it can be used in an .HTML file? statusChange && statusChange === 'Employed' ? true : employmentStatus === 'Employed'; To clarify, I want to assign the re ...

javascriptangular