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!
@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