Blank screen after upgrading to Ionic 5.6.0

I recently upgraded my Ionic 4 angular 7 app to Ionic 5.6.0 angular 9. First I tried to upgrade the angular version from 7 - 8 - 9 till then app is running perfectly but after upgrading to Ionic 5.6.0 I’m getting blank screen on android/ios app.
Below is the package.json file:

  "dependencies": {
    "@angular/animations": "^9.1.13",
    "@angular/common": "^9.1.13",
    "@angular/core": "^9.1.13",
    "@angular/forms": "^9.1.13",
    "@angular/http": "^7.2.16",
    "@angular/platform-browser": "^9.1.13",
    "@angular/platform-browser-dynamic": "^9.1.13",
    "@angular/router": "^9.1.13",
    "@capacitor/cli": "1.0.0-beta.24",
    "@capacitor/core": "1.0.0-beta.24",
    "@fortawesome/angular-fontawesome": "^0.3.0",
    "@fortawesome/fontawesome-svg-core": "^1.2.36",
    "@fortawesome/free-solid-svg-icons": "^5.15.4",
    "@ionic-native/app-version": "^5.5.1",
    "@ionic-native/badge": "^5.8.0",
    "@ionic-native/base64": "^5.5.1",
    "@ionic-native/base64-to-gallery": "^5.5.1",
    "@ionic-native/camera": "^5.5.1",
    "@ionic-native/core": "^5.0.0",
    "@ionic-native/date-picker": "^5.8.0",
    "@ionic-native/file": "^5.5.0",
    "@ionic-native/file-path": "^5.5.1",
    "@ionic-native/file-transfer": "^5.15.0",
    "@ionic-native/geolocation": "^5.6.1",
    "@ionic-native/http": "^5.5.0",
    "@ionic-native/image-picker": "^5.28.0",
    "@ionic-native/ionic-webview": "^5.0.0",
    "@ionic-native/keyboard": "^5.5.1",
    "@ionic-native/native-geocoder": "^5.5.1",
    "@ionic-native/native-storage": "^5.5.1",
    "@ionic-native/network": "^5.5.0",
    "@ionic-native/safari-view-controller": "^5.5.1",
    "@ionic-native/splash-screen": "^5.0.0",
    "@ionic-native/sqlite": "^5.5.0",
    "@ionic-native/status-bar": "^5.0.0",
    "@ionic/angular": "^5.6.0",
    "@types/pdfjs-dist": "^0.1.2",
    "acorn": "6.4.2",
    "angular-tree-component": "^8.3.0",
    "angular2-signaturepad": "2.8.0",
    "animejs": "^3.0.1",
    "bounce.js": "^0.8.2",
    "browserify-zlib": "^0.2.0",
    "com-badrit-base64": "^0.2.0",
    "compare-func": "^2.0.0",
    "cordova": "^11.0.0",
    "cordova-base64-to-gallery": "^4.1.3",
    "cordova-plugin-add-swift-support": "^2.0.2",
    "cordova-plugin-app-version": "^0.1.9",
    "cordova-plugin-badge": "^0.8.8",
    "cordova-plugin-camera": "^4.0.3",
    "cordova-plugin-datepicker": "^0.9.3",
    "cordova-plugin-device": "^2.0.3",
    "cordova-plugin-filepath": "^1.5.1",
    "cordova-plugin-geolocation": "^4.0.1",
    "cordova-plugin-inappbrowser": "^4.1.0",
    "cordova-plugin-ionic-keyboard": "^2.1.3",
    "cordova-plugin-ionic-webview": "^5.0.0",
    "cordova-plugin-nativegeocoder": "^3.2.2",
    "cordova-plugin-nativestorage": "^2.3.2",
    "cordova-plugin-network-information": "^2.0.1",
    "cordova-plugin-safariviewcontroller": "^1.6.0",
    "cordova-plugin-splashscreen": "^5.0.3",
    "cordova-plugin-statusbar": "^2.4.3",
    "cordova-plugin-whitelist": "^1.3.4",
    "cordova-sqlite-storage": "^6.0.0",
    "core-js": "^2.5.4",
    "fabric-touch": "^2.0.1",
    "hammerjs": "^2.0.8",
    "ios-sim": "^8.0.2",
    "jspdf": "^1.5.3",
    "moment": "^2.24.0",
    "pdfjs-dist": "^2.0.203",
    "rxjs": "^6.6.7",
    "sass": "^1.49.9",
    "webpack": "^4.29.0",
    "zone.js": "~0.9.1"
  },
  "devDependencies": {
    "@angular-devkit/architect": "^0.1402.13",
    "@angular-devkit/build-angular": "^0.900.7",
    "@angular-devkit/core": "^9.1.13",
    "@angular-devkit/schematics": "^9.1.13",
    "@angular/cli": "^9.1.13",
    "@angular/compiler": "^9.1.13",
    "@angular/compiler-cli": "^9.1.13",
    "@angular/language-service": "^9.1.13",
    "@ionic/angular-toolkit": "^2.3.3",
    "@types/googlemaps": "^3.36.2",
    "@types/jasmine": "~2.8.8",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "~10.14.2",
    "codelyzer": "~4.5.0",
    "cordova-android": "^9.1.0",
    "cordova-android-support-gradle-release": "^3.0.1",
    "cordova-ios": "6.3.0",
    "cordova-plugin-advanced-http": "^3.3.1",
    "cordova-plugin-file": "^6.0.2",
    "jasmine-core": "~2.99.1",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~3.1.4",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.1",
    "karma-jasmine": "~1.1.2",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.4.0",
    "ts-node": "^8.0.3",
    "tslint": "~5.12.0",
    "typescript": "^3.7.7"
  },
  "description": "An Ionic project",
  "cordova": {
    "plugins": {
      "cordova-plugin-whitelist": {},
      "cordova-plugin-statusbar": {},
      "cordova-plugin-device": {},
      "cordova-plugin-splashscreen": {},
      "cordova-plugin-ionic-keyboard": {},
      "cordova-sqlite-storage": {},
      "cordova-plugin-file": {},
      "cordova-plugin-network-information": {},
      "cordova-plugin-camera": {
        "CAMERA_USAGE_DESCRIPTION": "Take pictures with your camera",
        "PHOTOLIBRARY_USAGE_DESCRIPTION": "Upload photos of job",
        "ANDROID_SUPPORT_V4_VERSION": "27.+"
      },
      "cordova-plugin-filepath": {},
      "cordova-base64-to-gallery": {},
      "cordova-plugin-nativegeocoder": {
        "LOCATION_WHEN_IN_USE_DESCRIPTION": "Use geocoder service"
      },
      "cordova-plugin-app-version": {},
      "com-badrit-base64": {},
      "cordova-plugin-nativestorage": {},
      "cordova-plugin-geolocation": {
        "GPS_REQUIRED": "true"
      },
      "cordova-plugin-datepicker": {},
      "cordova-plugin-badge": {},
      "cordova-plugin-ionic-webview": {},
      "cordova-plugin-inappbrowser": {},
      "cordova-plugin-safariviewcontroller": {},
      "cordova-android-support-gradle-release": {
        "ANDROID_SUPPORT_VERSION": "27.+"
      },
      "cordova-plugin-advanced-http": {
        "ANDROIDBLACKLISTSECURESOCKETPROTOCOLS": "SSLv3,TLSv1"
      },
      "cordova-plugin-telerik-imagepicker": {
        "PHOTO_LIBRARY_USAGE_DESCRIPTION": " "
      }
    },
    "platforms": [
      "ios",
      "android"
    ]
  },
  "preinstall": "npx patch-package",
  "browser": {
    "http": false,
    "https": false,
    "net": false,
    "path": false,
    "stream": false,
    "tls": false,
    "zlib": false
  }
}

A blank screen is usually due to a JavaScript error. You can check DevTools for any errors. For an Android device you can go to chrome://inspect/#devices on your computer. For iOS, see Inspecting iOS and iPadOS | Apple Developer Documentation.

Also, as a heads up, @ionic-native was changed to @awesome-cordova-plugins. See A New Chapter for @ionic-native - Ionic Blog.

Hi @twestrick, I checked the console error on both Android/iOS console below is the error related to failing to load resource HTTP://localhost:8100/

[Error] Failed to load resource: the server responded with a status of 404 (Not Found)

Regarding the @ionic-native plugin change before upgrading to Ionic 5.6.0 its working properly, so do I need to upgrade to work with Ionic 5.6.0?

Not really sure on the 404 as I am not familiar enough with Angular or Cordova. Since the URL has a port I would assume you are trying to run it in dev mode. From my experience with Capacitor, it’s gotta be the address of my computer running the dev server as localhost would be pointing to the iOS/Android device.

Please outline the exact steps/commands you are running to get your app running on the Android/iOS devlce. That will be helpful for someone else to chime in.

In regards to @ionic-native, if it is still working then good. But, do note that it could stop working at any time. I am assuming you are working towards upgrading to Ionic 8 and the latest Angular release in which case at that time you would want to swap it out.

These are the steps I am using to launch the app on the Android/iOS simulator:

  1. ionic build
  2. ionic cordova prepare android
  3. ionic cordova run android -livereload --external
    (same for ios app replacing android with ios)

Thanks @twestrick

I’m able to run the app on Android/iOS emulator using below command but the --livereload is still giving the same white blank screen issue.
ionic cordova run android --simulator --verbose --optimization=false