Check platform.ready() is not on Capacitor app

Question

I develop an Angular and Capacitor app. i.e. No Ionic here

How can I check this on Native platform await this.platform.ready();. Because I need to use the Cordova plugin on App startup like so:

app.component.ts

 constructor(
    private screenOrientation: ScreenOrientation) {

    this.initializeApp();
  }

private async initializeApp(): Promise<void> {

    //await this.platform.ready(); //cannot use here no Ionic
  

    if (Capacitor.isPluginAvailable('StatusBar')) { StatusBar.show(); }

    if (Capacitor.isNative) { this.screenOrientation.lock(this.screenOrientation.ORIENTATIONS.PORTRAIT); }
  }

So what is the alternative here?

Update

The problem here is I need to use Firebase Username/pw feature. But it gives the below error on iOS device on Native build.

[error] - {"code":"auth/operation-not-supported-in-this-environment","message":"This operation is not supported in the environment this application is running on. "location.protocol" must be http, https or chrome-extension and web storage must be enabled."}

I saw something from google here. i.e. he says Firebase listen to the device ready event.

https://github.com/firebase/firebaseui-web/issues/178#issuecomment-310460472

i.e. Also the SDK will listen to 'deviceready' event. If it doesn't get that signal in like a second, it times out and assumes you are not running in Cordova environment. Also make sure you did not disable web storage as the app relies on that.

So how can I do that?

Update 2

npx cap ls

Found 0 Capacitor plugins for android:
  Found 5 Cordova plugins for android
    cordova-plugin-ionic (5.4.7)
    cordova-plugin-screen-orientation (3.0.2)
    cordova-plugin-whitelist (1.3.4)
    es6-promise-plugin (4.2.2)
    phonegap-plugin-barcodescanner (8.1.0)
  Found 0 Capacitor plugins for ios:
  Found 4 Cordova plugins for ios
    cordova-plugin-ionic (5.4.7)
    cordova-plugin-screen-orientation (3.0.2)
    es6-promise-plugin (4.2.2)
    phonegap-plugin-barcodescanner (8.1.0)
  Found 1 incompatible Cordova plugin for ios, skipped install
    cordova-plugin-whitelist (1.3.4)
[info] Listing plugins for web is not possible

Update 3

import { Component, HostListener, Inject, OnInit } from '@angular/core';
import { ScreenOrientation } from '@ionic-native/screen-orientation/ngx';
import { Capacitor, PluginRegistry, Plugins } from '@capacitor/core';

import { ScreenSizeService } from './core/services/data/screen-size.service';
import { AuthService } from './core/services/apis/auth.service';
import { MenubarService } from './core/services/data/menubar.service';
import { DOCUMENT } from '@angular/common';

const { StatusBar }: PluginRegistry = Plugins;

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {

  constructor(
    public screenSizeService: ScreenSizeService,
    public authService: AuthService,
    private screenOrientation: ScreenOrientation,
    public menubarService: MenubarService,
    @Inject(DOCUMENT) private doc: any) {

    this.initializeApp();
  }



  private initializeApp(): void {

 
    if (Capacitor.isPluginAvailable('StatusBar')) { StatusBar.show(); }

      
    this.doc.addEventListener('deviceready', this.onDeviceReady, false);

  }

  onDeviceReady(): void {
    if (Capacitor.isNative) { this.screenOrientation.lock(this.screenOrientation.ORIENTATIONS.PORTRAIT); }
    this.authService.setFirebaseAuth();
  }

 

}

Answer 1

Try with Angular lifecycle hooks. It could probably be achieved with

ngAfterViewInit() or ngAfterViewChecked()

Answer 2

If you don't want to use Ionic, then you can't use platform because it's an Ionic feature.

If you just want to wait for deviceready event, then you can listen to it directly with

document.addEventListener("deviceready", onDeviceReady, false);

function onDeviceReady() {
    // Now safe to use device APIs
}

Anyway, in Capacitor you don't need to wait for deviceready.