Ionic Android App stuck on white screen after upgrading to Angular 12

Issue

I recently tried upgrading Angular 11 to 12 in my Ionic App. It all went well, and the app is running with no errors in the browser. However, when I tried to run it on an Android phone, after the splash-screen disappears, the app gets stuck in a white screen.

I tried using chrone://inspect tool and see if I get any errors and this showed up:

I also get the same error on the Android Logcat: E/Capacitor/Console: File: http://localhost/vendor-es2015.js - Line 15729 - Msg: ERROR TypeError: goog.getLocale is not a function

I tried adding timeout to the splash-screen, updating libraries, deleting node_modules and reinstalling them, but nothing worked. I can't find much info on the web about this error.

Can anyone tell me what this error means or why is the app stuck here? It works well if I go back to Angular 11.

My package.json looks like this:

"dependencies": {
    "@agm/core": "^3.0.0-beta.0",
    "@angular/common": "~12.2.3",
    "@angular/core": "~12.2.3",
    "@angular/forms": "~12.2.3",
    "@angular/platform-browser": "~12.2.3",
    "@angular/platform-browser-dynamic": "~12.2.3",
    "@angular/router": "~12.2.3",
    "@capacitor-community/background-geolocation": "^0.3.11",
    "@capacitor/android": "^2.4.6",
    "@capacitor/core": "^2.4.6",
    "@capacitor/ios": "^2.4.6",
    "@ionic-native/android-permissions": "^5.30.0",
    "@ionic-native/clipboard": "^5.31.1",
    "@ionic-native/core": "^5.30.0",
    "@ionic-native/device": "^5.31.1",
    "@ionic-native/diagnostic": "^5.32.1",
    "@ionic-native/insomnia": "^5.30.0",
    "@ionic-native/launch-navigator": "^5.30.0",
    "@ionic-native/location-accuracy": "^5.30.0",
    "@ionic-native/market": "^5.33.1",
    "@ionic-native/mobile-accessibility": "^5.36.0",
    "@ionic-native/splash-screen": "^5.30.0",
    "@ionic-native/status-bar": "^5.30.0",
    "@ionic/angular": "^5.6.14",
    "@ionic/pwa-elements": "^3.0.2",
    "@ngrx/effects": "^10.0.0",
    "@ngrx/entity": "^10.0.0",
    "@ngrx/schematics": "^10.0.0",
    "@ngrx/store": "^10.0.0",
    "@ngrx/store-devtools": "^10.0.0",
    "@ngx-translate/core": "^12.1.2",
    "@ngx-translate/http-loader": "^6.0.0",
    "agm-direction": "^0.8.9",
    "cordova-clipboard": "^1.3.0",
    "cordova-plugin-actionsheet": "^2.3.3",
    "cordova-plugin-android-permissions": "^1.1.2",
    "cordova-plugin-device": "^2.0.3",
    "cordova-plugin-dialogs": "^2.0.2",
    "cordova-plugin-insomnia": "^4.3.0",
    "cordova-plugin-market": "^1.2.0",
    "cordova-plugin-network-information": "git+https://github.com/apache/cordova-plugin-network-information.git",
    "cordova-plugin-request-location-accuracy": "^2.3.0",
    "cordova.plugins.diagnostic": "^6.0.3",
    "core-js": "^3.8.3",
    "moment": "^2.28.0",
    "ngx-signaturepad": "^0.0.9",
    "phonegap-plugin-mobile-accessibility": "^1.0.5",
    "rxjs": "^6.6.3",
    "tslib": "^2.0.1",
    "uk.co.workingedge.phonegap.plugin.launchnavigator": "^5.0.5",
    "zone.js": "~0.11.4"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~12.2.3",
    "@angular/cli": "^12.2.3",
    "@angular/compiler": "~12.2.3",
    "@angular/compiler-cli": "~12.2.3",
    "@angular/language-service": "~12.2.3",
    "@babel/core": "^7.10.2",
    "@capacitor/cli": "2.4.6",
    "@ionic/angular-toolkit": "^4.0.0",
    "@storybook/addon-actions": "^5.3.19",
    "@storybook/addon-knobs": "^5.3.19",
    "@storybook/addon-links": "^5.3.19",
    "@storybook/addon-notes": "^5.3.19",
    "@storybook/addon-options": "^5.3.19",
    "@storybook/addons": "^5.3.19",
    "@storybook/angular": "^5.3.19",
    "@types/googlemaps": "3.39.12",
    "@types/jasmine": "~3.3.8",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "^12.11.1",
    "agm-overlays": "^2.0.0",
    "babel-loader": "^8.1.0",
    "codelyzer": "^6.0.1",
    "jasmine-core": "~3.4.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "^6.3.4",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.1",
    "karma-jasmine": "~2.0.1",
    "karma-jasmine-html-reporter": "^1.4.0",
    "protractor": "^7.0.0",
    "ts-node": "~7.0.0",
    "tslint": "~6.1.0",
    "typescript": "4.3.5"
  },

Thank-you!

Solution

@edit 09/2021

as a temporary fix avoid to call the getGlobalLocale(). Add this to your index.html

<script>
  var ngI18nClosureMode = false;
</script>

same here updating from [email protected] to @12.2.

meanwhile try to update to ^12.1

Answered By - Roman Matkivskyy