cordova not available when running on iPad OS on livereload

[kelokchan]

Description:

I am trying to debug my app written in Ionic 3 on an iPad. The app is an universal app. Whenever I tried running the app in livereload, it will be stuck at the splash screen with error message indicating cordova is not available.

The logs

 console.warn: Ionic Native: tried calling StatusBar.backgroundColorByHexString, but Cordova is not
[npm]             available. Make sure to a) run in a real device or simulator and b) include cordova.js in your index.html
[npm] [09:42:54]  console.warn: Ionic Native: tried calling SplashScreen.hide, but Cordova is not available. Make sure to a)
[npm]             run in a real device or simulator and b) include cordova.js in your index.html

I have double checked and <script src="cordova.js"></script> is in my index.html

However, it works fine with livereload on an iPhone simulator

If I turn off livereload however, all my css will disappear, my app ends up looking like this

Steps to Reproduce:

1. Run command ionic cordova run ios -c -l --buildConfig=_build.json --target=xxx <-- target is iPad

Output:

My ionic info:

Ionic:

   Ionic CLI          : 5.2.3
   Ionic Framework    : ionic-angular 3.9.10
   @ionic/app-scripts : 3.2.4

Cordova:

   Cordova CLI       : 8.1.2 ([email protected])
   Cordova Platforms : ios 6.2.0
   Cordova Plugins   : cordova-plugin-ionic-webview 5.0.0, (and 32 other plugins)

Utility:

   cordova-res : not installed
   native-run  : 1.3.0 (update available: 1.4.0)

System:

   Android SDK Tools : 26.1.1 (/Users/kelokchan/Library/Android/sdk)
   ios-sim           : 8.0.2
   NodeJS            : v12.22.1 (/Users/kelokchan/.nvm/versions/node/v12.22.1/bin/node)
   npm               : 6.14.12
   OS                : macOS Big Sur
   Xcode             : Xcode 12.5 Build version 12E262

Other Information: