window.FirebasePlugin.verifyPhoneNumber is not a function error - android

I have a ionic project (created by Ionic CLI). I am trying to integrate firebase's phone authentication mechanism to login user. As per different tutorials and guidelines, I knew I had to rely upon some forks as the official firebase plugin doesn't have phone authentication support yet.
I came across -
1. https://github.com/jestcastro/cordova-plugin-firebase
&
2. https://github.com/arnesson/cordova-plugin-firebase
and installed them separately.
Both of them have similar structure :
window.FirebasePlugin.verifyPhoneNumber(number, timeOutDuration, function(credential) {
console.log(credential);
// ask user to input verificationCode:
var code = inputField.value.toString();
var verificationId = credential.verificationId;
var signInCredential = firebase.auth.PhoneAuthProvider.credential(verificationId, code);
firebase.auth().signInWithCredential(signInCredential);
}, function(error) {
console.error(error);
});
But, whenever I try to run the code (on physical device, or in browser), it gives me this error -
ERROR TypeError: window.FirebasePlugin.verifyPhoneNumber is not a function
I have tried -
(<any>window).FirebasePlugin.verifyPhoneNumber(..)
but found similar result.
Ionic Info gives this :
#ionic/cli-plugin-proxy : 1.4.11
#ionic/cli-utils : 1.12.0
ionic (Ionic CLI) : 3.12.0
global packages:
cordova (Cordova CLI) : 7.1.0
local packages:
#ionic/app-scripts : 3.1.0
Cordova Platforms : none
Ionic Framework : ionic-angular 3.9.2
System:
Android SDK Tools : 26.0.2
Node : v6.11.3
npm : 3.10.10
OS : Windows 7
Misc:
backend : pro
package.json
{
"name": "playground",
"version": "0.0.1",
"author": "Ionic Framework",
"homepage": "http://ionicframework.com/",
"private": true,
"scripts": {
"clean": "ionic-app-scripts clean",
"build": "ionic-app-scripts build",
"lint": "ionic-app-scripts lint",
"ionic:build": "ionic-app-scripts build",
"ionic:serve": "ionic-app-scripts serve"
},
"dependencies": {
"#angular/common": "5.0.0",
"#angular/compiler": "5.0.0",
"#angular/compiler-cli": "5.0.0",
"#angular/core": "5.0.0",
"#angular/forms": "5.0.0",
"#angular/http": "5.0.0",
"#angular/platform-browser": "5.0.0",
"#angular/platform-browser-dynamic": "5.0.0",
"#ionic-native/camera": "^4.4.0",
"#ionic-native/core": "4.3.2",
"#ionic-native/file": "^4.4.0",
"#ionic-native/file-transfer": "^4.4.0",
"#ionic-native/splash-screen": "4.3.2",
"#ionic-native/status-bar": "4.3.2",
"#ionic/storage": "2.1.3",
"angularfire2": "^5.0.0-rc.4",
"cordova-android": "~6.3.0",
"cordova-plugin-camera": "^3.0.0",
"cordova-plugin-device": "^1.1.4",
"cordova-plugin-file": "^5.0.0",
"cordova-plugin-file-transfer": "^1.7.0",
"cordova-plugin-firebase": "^0.1.24",
"cordova-plugin-ionic-webview": "^1.1.16",
"cordova-plugin-splashscreen": "^4.0.3",
"cordova-plugin-whitelist": "^1.3.1",
"firebase": "^4.6.2",
"ionic-angular": "3.9.2",
"ionic-plugin-keyboard": "^2.2.1",
"ionicons": "3.0.0",
"rxjs": "5.5.2",
"sw-toolbox": "3.6.0",
"zone.js": "0.8.18"
},
"devDependencies": {
"#ionic/app-scripts": "3.1.0",
"typescript": "2.4.2"
},
"description": "An Ionic project",
"cordova": {
"plugins": {
"ionic-plugin-keyboard": {},
"cordova-plugin-whitelist": {},
"cordova-plugin-device": {},
"cordova-plugin-splashscreen": {},
"cordova-plugin-ionic-webview": {},
"cordova-plugin-file-transfer": {},
"cordova-plugin-file": {},
"cordova-plugin-camera": {},
"cordova-plugin-firebase": {}
},
"platforms": [
"android"
]
}
}
Has anyone else faced this issue? How have you managed to solve it? Seeking help.

You need to install cordova-plugin-firebase using ionic cordova plugin add https://github.com/jestcastro/cordova-plugin-firebase.git --save.when we install using ionic cordova plugin add cordova-plugin-firebase this error occures.

This worked for me
cordova plugin remove cordova-plugin-firebase
cordova plugin add https://github.com/jestcastro/cordova-plugin-firebase.git

Related

Ionic app runs on browser and ios but not on android, the connection to the server was unsuccessful. (file ///android_asset/www/index.html) on android

My ionic app was earlier working on all platforms i.e android and ios and also on browser with ionic serve.
But after a recent update when I tried adding android platform, i am building the app without issues but when I run the app on simulator or real device, it just shows a blank screen after the splash screen.
On emulator, the it shows a message as the connection to the server was unsuccessful. (file ///android_asset/www/index.html)
However the same app is running successfully without any issues on ios device, ios simulator and ionic serve.
Have tried few solutions listed online such as,
<preference name="loadUrlTimeoutValue" value="700000" />
android:usesCleartextTraffic="true" on androidmanifest.xml
<?xml version="1.0" encoding="utf-8"?>
<network-security-config>
<domain-config cleartextTrafficPermitted="true">
<domain includeSubdomains="true">localhost</domain>
<domain includeSubdomains="true">example.com</domain>
</domain-config>
</network-security-config>
on network_security_config.xml where example.com was replaced by my domain.
But all of the above solutions did not work.
At first I thought it was due to cordova-android#9 version and tried switching back to previous versions but still no luck.
Here is my ionic info
Ionic:
Ionic CLI : 6.13.1 (/opt/homebrew/lib/node_modules/#ionic/cli)
Ionic Framework : #ionic/angular 5.5.4
#angular-devkit/build-angular : 0.803.29
#angular-devkit/schematics : 8.3.29
#angular/cli : 8.3.29
#ionic/angular-toolkit : 2.1.2
Cordova:
Cordova CLI : 10.0.0
Cordova Platforms : android 9.0.0
Cordova Plugins : cordova-plugin-ionic-keyboard 2.2.0, cordova-plugin-ionic-webview 5.0.0, (and 19 other plugins)
Utility:
cordova-res (update available: 0.15.3) : 0.15.1
native-run : 1.3.0
System:
Android SDK Tools : 26.1.1 (/Users/rameshramgopal/Library/Android/sdk)
ios-deploy : 1.11.3
ios-sim : 8.0.2
NodeJS : v15.6.0 (/opt/homebrew/Cellar/node/15.6.0/bin/node)
npm : 7.7.6
OS : macOS Big Sur
Xcode : Xcode 12.3 Build version 12C33
Here is my package.json
{
"name": "woocommerce",
"version": "0.0.1",
"author": "Ionic Framework",
"homepage": "https://ionicframework.com/",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"#angular/common": "~8.2.14",
"#angular/core": "~8.2.14",
"#angular/forms": "~8.2.14",
"#angular/http": "^7.2.16",
"#angular/platform-browser": "~8.2.14",
"#angular/platform-browser-dynamic": "~8.2.14",
"#angular/router": "~8.2.14",
"#ionic-native/android-permissions": "^5.26.0",
"#ionic-native/app-minimize": "^5.21.5",
"#ionic-native/app-rate": "^5.21.5",
"#ionic-native/core": "^5.0.0",
"#ionic-native/crop": "^5.21.6",
"#ionic-native/email-composer": "^5.21.5",
"#ionic-native/facebook": "^5.23.0",
"#ionic-native/file-transfer": "^5.21.6",
"#ionic-native/geolocation": "^5.26.0",
"#ionic-native/google-plus": "^5.24.0",
"#ionic-native/http": "^5.21.5",
"#ionic-native/image-picker": "^5.23.0",
"#ionic-native/in-app-browser": "^5.23.0",
"#ionic-native/location-accuracy": "^5.26.0",
"#ionic-native/native-geocoder": "^5.26.0",
"#ionic-native/native-storage": "^5.23.0",
"#ionic-native/onesignal": "^5.21.5",
"#ionic-native/social-sharing": "^5.21.5",
"#ionic-native/splash-screen": "^5.0.0",
"#ionic-native/status-bar": "^5.21.5",
"#ionic/angular": "^5.0.0",
"#ionic/storage": "^2.2.0",
"#ngx-translate/core": "^12.1.2",
"#ngx-translate/http-loader": "^4.0.0",
"cordova-plugin-add-swift-support": "^2.0.2",
"cordova-plugin-advanced-http": "^2.4.1",
"cordova-plugin-android-permissions": "^1.0.2",
"cordova-plugin-appminimize": "^1.0.1",
"cordova-plugin-apprate": "^1.5.0",
"cordova-plugin-crop": "^0.4.0",
"cordova-plugin-dialogs": "^2.0.2",
"cordova-plugin-email-composer": "^0.9.2",
"cordova-plugin-facebook4": "^6.4.0",
"cordova-plugin-file": "^6.0.2",
"cordova-plugin-file-transfer": "^1.7.1",
"cordova-plugin-geolocation": "^4.0.2",
"cordova-plugin-googleplus": "8.4.0",
"cordova-plugin-inappbrowser": "^3.2.0",
"cordova-plugin-nativegeocoder": "^3.4.1",
"cordova-plugin-nativestorage": "^2.3.2",
"cordova-plugin-request-location-accuracy": "^2.3.0",
"cordova-plugin-statusbar": "^2.4.3",
"cordova-plugin-telerik-imagepicker": "git+https://github.com/Telerik-Verified-Plugins/ImagePicker.git",
"cordova-plugin-x-socialsharing": "^5.6.4",
"cordova-sqlite-storage": "^5.0.0",
"core-js": "^2.5.4",
"es6-promise-plugin": "^4.2.2",
"onesignal-cordova-plugin": "^2.8.3",
"rxjs": "~6.5.1",
"tslib": "^1.9.0",
"zone.js": "~0.9.1"
},
"devDependencies": {
"#angular-devkit/build-angular": "~0.803.20",
"#angular/cli": "~8.3.23",
"#angular/compiler": "~8.2.14",
"#angular/compiler-cli": "~8.2.14",
"#angular/language-service": "~8.2.14",
"#ionic/angular-toolkit": "^2.1.1",
"#types/jasmine": "~3.3.8",
"#types/jasminewd2": "~2.0.3",
"#types/node": "~8.9.4",
"codelyzer": "^5.0.0",
"cordova-android": "^9.0.0",
"cordova-plugin-device": "^2.0.2",
"cordova-plugin-ionic-keyboard": "^2.2.0",
"cordova-plugin-ionic-webview": "^4.1.3",
"cordova-plugin-splashscreen": "^5.0.2",
"cordova-plugin-whitelist": "^1.3.3",
"jasmine-core": "~3.4.0",
"jasmine-spec-reporter": "~4.2.1",
"karma": "^4.4.1",
"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": "~5.4.0",
"ts-node": "~7.0.0",
"tslint": "~5.15.0",
"typescript": "~3.4.3"
},
"description": "An Ionic project",
"cordova": {
"plugins": {
"cordova-plugin-email-composer": {},
"cordova-plugin-x-socialsharing": {},
"onesignal-cordova-plugin": {},
"cordova-plugin-apprate": {},
"cordova-plugin-appminimize": {},
"cordova-plugin-whitelist": {},
"cordova-plugin-device": {},
"cordova-plugin-splashscreen": {},
"cordova-plugin-ionic-webview": {},
"cordova-plugin-ionic-keyboard": {},
"cordova-plugin-advanced-http": {},
"cordova-plugin-statusbar": {},
"cordova-plugin-crop": {},
"cordova-plugin-file-transfer": {},
"cordova-plugin-telerik-imagepicker": {
"PHOTO_LIBRARY_USAGE_DESCRIPTION": "This will allow you to add product images",
"ANDROID_SUPPORT_V7_VERSION": "27.+"
},
"cordova-plugin-nativestorage": {},
"cordova-plugin-inappbrowser": {},
"cordova-plugin-googleplus": {
"REVERSED_CLIENT_ID": "com.googleusercontent.apps.806565206717-kmpd2cgn3prfe3e7gufh1uaq4r0sp98a",
"PLAY_SERVICES_VERSION": "15.0.1"
},
"cordova-plugin-facebook4": {
"APP_ID": "691375698089216",
"APP_NAME": "Quick Order",
"FACEBOOK_HYBRID_APP_EVENTS": "false",
"FACEBOOK_ANDROID_SDK_VERSION": "5.13.0"
},
"cordova-sqlite-storage": {},
"cordova-plugin-geolocation": {},
"cordova-plugin-request-location-accuracy": {
"PLAY_SERVICES_LOCATION_VERSION": "16.+"
},
"cordova-plugin-nativegeocoder": {
"LOCATION_WHEN_IN_USE_DESCRIPTION": "Use geocoder service"
},
"cordova-plugin-android-permissions": {}
},
"platforms": [
"android"
]
}
}
Can anyone help me with the issue ?
The persisting white screen appears when there is a build/compile error. Make sure to serve locally (browser) to check for errors first. Then connect your device via USB and use your computer's chrome inspect tool (chrome://inspect/#devices) to inspect for issues on your installed version. In case the file ///android_asset/www/index.html issue is unrelated, you will likely find it here. If you've done a recent update, it could be a dependency issue or something related.
You may also try ionic cordova run android instead of serving, in case there is an issue serving. Your mentioned network error could be CORS related, but I'm inclined to say maybe not.
If you can update your question to include the errors you're receiving, as well as the command, that'll help narrow it down.
Commonly, it is because on load time, it can’t reach the index.html file. Be sure that inside the android platform exists the www folder and, you should check that the FileSystem path in your Android App stills the same and any plugin has overwritted this path.
In addition probably should uninstall all the plugins and start a try/error process installing one by one , only to be sure that any plugin is not working properly.

Ionic Cordova Build prod: Cannot find module “.” - Typescript version >3

I have updated my ionic project and all dependencies and now when I try to build a --prod android apk I get the following error:
Uncaught Error: Cannot find module "."
at vendor.js:1
at vendor.js:1
at Object.<anonymous> (vendor.js:1)
at e (vendor.js:1)
at Object.<anonymous> (main.js:1)
at e (vendor.js:1)
at window.webpackJsonp (vendor.js:1)
at main.js:1
vendor.js:1 Ionic Native: deviceready event fired after 57 ms
assets/icon/favicon.ico:1 Failed to load resource: net::ERR_FILE_NOT_FOUND
I’ve searched and googled so much and the Problem seems to be the typescript version (>3)
But all post are very old (2018) and the only solution was to downgrade Typescript to version 2.6
but this is not a solution for me because I have to use angular >= 7 for Firebase.
Is there a proper solution how I can get this to work???
Ionic Info:
Ionic:
Ionic CLI : 5.4.9 (C:\Users\Kumaro\AppData\Roaming\npm\node_modules\ionic)
Ionic Framework : ionic-angular 3.9.5
#ionic/app-scripts : 3.2.2
Cordova:
Cordova CLI : 9.0.0 (cordova-lib#9.0.1)
Cordova Platforms : android 7.1.4
Cordova Plugins : cordova-plugin-ionic-keyboard 2.0.5, cordova-plugin-ionic-webview 1.1.1, (and 15 other plugins)
Utility:
cordova-res : not installed
native-run : 0.3.0
System:
Android SDK Tools : 26.1.1 (C:\Program Files\AndroidSDK)
NodeJS : v12.13.0 (C:\Program Files\nodejs\node.exe)
npm : 6.12.0
OS : Windows 7
Package.js:
{
"name": "Name",
"version": "1.0.0",
"author": "Name",
"homepage": "www.blabla.de",
"private": true,
"scripts": {
"start": "ionic-app-scripts serve",
"clean": "ionic-app-scripts clean",
"build": "ionic-app-scripts build",
"lint": "ionic-app-scripts lint"
},
"dependencies": {
"#angular/animations": "^7.2.15",
"#angular/common": "^7.2.15",
"#angular/compiler": "^7.2.15",
"#angular/compiler-cli": "^7.2.15",
"#angular/core": "^7.2.15",
"#angular/forms": "^7.2.15",
"#angular/http": "^7.2.15",
"#angular/platform-browser": "^7.2.15",
"#angular/platform-browser-dynamic": "^7.2.15",
"#ionic-native/app-rate": "^5.17.1",
"#ionic-native/app-version": "^5.17.1",
"#ionic-native/background-mode": "^5.17.1",
"#ionic-native/core": "^5.1.0",
"#ionic-native/device": "^5.17.1",
"#ionic-native/dialogs": "^5.17.1",
"#ionic-native/in-app-browser": "^5.17.1",
"#ionic-native/ionic-webview": "^5.17.1",
"#ionic-native/keyboard": "^5.17.1",
"#ionic-native/market": "^5.17.1",
"#ionic-native/native-storage": "^5.17.1",
"#ionic-native/screen-orientation": "^5.17.1",
"#ionic-native/social-sharing": "^5.17.1",
"#ionic-native/splash-screen": "^5.17.1",
"#ionic-native/sqlite": "^5.17.1",
"#ionic-native/status-bar": "^5.17.1",
"#ionic/storage": "2.2.0",
"chart.js": "^2.9.3",
"chartjs-plugin-datalabels": "^0.7.0",
"cordova": "^9.0.0",
"cordova-android": "^7.1.4",
"cordova-plugin-app-version": "^0.1.9",
"cordova-plugin-apprate": "^1.5.0",
"cordova-plugin-device": "^2.0.3",
"cordova-plugin-inappbrowser": "^3.1.0",
"cordova-plugin-ionic-keyboard": "^2.2.0",
"cordova-plugin-ionic-webview": "^4.1.3",
"cordova-plugin-market": "^1.2.0",
"cordova-plugin-nativestorage": "^2.3.2",
"cordova-plugin-screen-orientation": "^3.0.2",
"cordova-plugin-splashscreen": "^5.0.3",
"cordova-plugin-statusbar": "^2.4.3",
"cordova-plugin-whitelist": "^1.3.4",
"cordova-plugin-x-socialsharing": "^5.6.2",
"cordova-sqlite-storage": "^4.0.0",
"ionic-angular": "3.9.5",
"ionicons": "3.0.0",
"rxjs": "^6.5.3",
"rxjs-compat": "^6.5.3",
"sw-toolbox": "3.6.0",
"zone.js": "0.8.29"
},
"devDependencies": {
"#ionic/app-scripts": "3.2.2",
"#ionic/lab": "^2.0.16",
"cordova-plugin-background-mode": "^0.7.3",
"cordova-plugin-dialogs": "^2.0.2",
"cordova-plugin-firebase": "^2.0.5",
"typescript": "^3.1.1"
},
"description": "An Ionic project",
"cordova": {
"plugins": {
"cordova-plugin-inappbrowser": {},
"cordova-plugin-device": {},
"cordova-plugin-splashscreen": {},
"cordova-plugin-ionic-webview": {},
"cordova-plugin-ionic-keyboard": {},
"cordova-plugin-statusbar": {},
"cordova-plugin-nativestorage": {},
"cordova-sqlite-storage": {},
"cordova-plugin-x-socialsharing": {},
"cordova-plugin-apprate": {},
"cordova-plugin-market": {},
"cordova-plugin-screen-orientation": {},
"cordova-plugin-app-version": {},
"cordova-plugin-background-mode": {},
"cordova-plugin-dialogs": {},
"cordova-plugin-firebase": {},
"cordova-plugin-whitelist": {}
},
"platforms": [
"android"
]
}
I hope anybody can help :(
Firstly You need to set the correct tags on your question. Now I have done that. i.e. Ionic 3
Your update is wrong. Ionic 3 doesn't support Angular 7 and RxJS 6 +
You need to follow this official app to update it to the correct versions.
Official Ionic 3 app: https://github.com/ionic-team/ionic-conference-app/blob/v3/package.json#L16
OR Migrating from Ionic 3.0 to Ionic 4.0: https://ionicframework.com/docs/building/migration

ionic cordova build --prod --release fails and generate errors

I am trying to build my ionic 3 project for the android platform. I am working on windows 10. When I run the following command : ionic cordova build android --prod --release, I get this error:
Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory
Here is the screen shot corresponding to the error
Here is the result of the ionic info command
Ionic:
ionic (Ionic CLI) : 4.7.0 (C:\Users\HOLLY SPIRIT\AppData\Roaming\npm\node_modules\ionic) Ionic Framework : ionic-angular 3.9.2 #ionic/app-scripts : 3.2.1
Cordova:
cordova (Cordova CLI) : 7.1.0 Cordova Platforms : android
6.4.0 Cordova Plugins : cordova-plugin-ionic-keyboard 2.1.3, cordova-plugin-ionic-webview 1.2.1, (and 22 other plugins)
System:
NodeJS : v10.15.0 (C:\Program Files\nodejs\node.exe) npm :
6.4.1 OS : Windows 10
And here is the content of package.json
{
"name": "app name",
"version": "2.0.1",
"author": "auhtors name",
"homepage": "website url",
"private": true,
"scripts": {
"clean": "ionic-app-scripts clean",
"build": "ionic-app-scripts build",
"lint": "ionic-app-scripts lint",
"ionic:build": "ionic-app-scripts build",
"ionic:serve": "ionic-app-scripts serve"
},
"dependencies": {
"#angular/animations": "5.2.10",
"#angular/common": "5.2.10",
"#angular/compiler": "5.2.10",
"#angular/compiler-cli": "5.2.10",
"#angular/core": "5.2.10",
"#angular/fire": "^5.0.0",
"#angular/forms": "5.2.10",
"#angular/http": "5.2.10",
"#angular/platform-browser": "5.2.10",
"#angular/platform-browser-dynamic": "5.2.10",
"#ionic-native/admob-free": "^4.7.0",
"#ionic-native/admob-pro": "^4.19.0",
"#ionic-native/app-version": "^4.8.0",
"#ionic-native/barcode-scanner": "^4.19.0",
"#ionic-native/browser-tab": "^4.19.0",
"#ionic-native/camera": "^4.7.0",
"#ionic-native/core": "4.7.0",
"#ionic-native/facebook": "^4.19.0",
"#ionic-native/file": "^4.8.0",
"#ionic-native/file-transfer": "^4.7.0",
"#ionic-native/firebase": "^4.13.0",
"#ionic-native/google-plus": "^5.0.0",
"#ionic-native/in-app-browser": "^4.7.0",
"#ionic-native/instagram": "^4.19.0",
"#ionic-native/local-notifications": "^4.13.0",
"#ionic-native/network": "^4.7.0",
"#ionic-native/open-native-settings": "^4.7.0",
"#ionic-native/social-sharing": "^4.7.0",
"#ionic-native/splash-screen": "4.7.0",
"#ionic-native/status-bar": "^4.7.0",
"#ionic-native/youtube-video-player": "^4.7.0",
"#ionic/storage": "2.1.3",
"angular-pipes": "^8.0.0",
"angularfire2": "^5.1.1",
"cordova-admob-sdk": "^0.17.0",
"cordova-android": "^7.1.4",
"cordova-instagram-plugin": "^0.5.7",
"cordova-ios": "^4.5.5",
"cordova-open-native-settings": "^1.5.2",
"cordova-plugin-add-swift-support": "^1.7.2",
"cordova-plugin-admob-free": "^0.17.4",
"cordova-plugin-admobpro": "^2.37.1",
"cordova-plugin-app-version": "^0.1.9",
"cordova-plugin-badge": "^0.8.7",
"cordova-plugin-camera": "^4.0.3",
"cordova-plugin-device": "^2.0.2",
"cordova-plugin-document-viewer": "^0.9.10",
"cordova-plugin-extension": "^1.5.4",
"cordova-plugin-facebook4": "^4.1.0",
"cordova-plugin-file": "^6.0.1",
"cordova-plugin-file-transfer": "^1.7.1",
"cordova-plugin-firebase": "^2.0.2",
"cordova-plugin-inappbrowser": "^3.0.0",
"cordova-plugin-ionic-keyboard": "^2.1.3",
"cordova-plugin-ionic-webview": "^3.1.0",
"cordova-plugin-local-notification": "^0.9.0-beta.2",
"cordova-plugin-network-information": "^2.0.1",
"cordova-plugin-splashscreen": "^5.0.2",
"cordova-plugin-statusbar": "^2.4.2",
"cordova-plugin-whitelist": "^1.3.3",
"cordova-plugin-x-socialsharing": "^5.4.4",
"cordova-plugin-youtube-video-player": "^1.0.6",
"cordova-promise-polyfill": "0.0.2",
"cordova-universal-clipboard": "git+https://github.com/Visigo/CordovaClipboard.git",
"es6-promise-plugin": "^4.2.2",
"firebase": "^5.8.2",
"ionic-angular": "3.9.2",
"ionic-img-viewer": "^2.9.0",
"ionicons": "3.0.0",
"moment": "^2.22.2",
"ng2-pdf-viewer": "^5.1.0",
"ng2-simple-timer": "^1.3.3",
"ngx-moment": "^3.1.0",
"phonegap-plugin-barcodescanner": "^8.0.0",
"rxjs": "5.5.11",
"sw-toolbox": "3.6.0",
"zone.js": "0.8.26"
},
"devDependencies": {
"#ionic/app-scripts": "^3.2.1",
"#ionic/lab": "1.0.18",
"typescript": "~2.6.2"
},
"description": "app description",
"cordova": {
"plugins": {
"cordova-plugin-admob-free": {},
"cordova-plugin-x-socialsharing": {
"ANDROID_SUPPORT_V4_VERSION": "24.1.1+"
},
"cordova-instagram-plugin": {},
"cordova-plugin-network-information": {},
"cordova-plugin-camera": {},
"cordova-plugin-file-transfer": {},
"cordova-open-native-settings": {},
"cordova-plugin-inappbrowser": {},
"cordova-plugin-youtube-video-player": {},
"cordova-plugin-app-version": {},
"cordova-plugin-whitelist": {},
"cordova-plugin-device": {},
"cordova-plugin-splashscreen": {},
"cordova-plugin-ionic-webview": {},
"cordova-plugin-ionic-keyboard": {},
"phonegap-plugin-barcodescanner": {
"ANDROID_SUPPORT_V4_VERSION": "27.+"
},
"cordova-plugin-file": {},
"cordova-plugin-document-viewer": {},
"cordova-plugin-statusbar": {},
"cordova-plugin-local-notification": {},
"cordova-plugin-firebase": {},
"cordova-universal-clipboard": {},
"cordova-plugin-admobpro": {
"PLAY_SERVICES_VERSION": "16.0.0"
},
"cordova-plugin-facebook4": {
"APP_ID": "appid",
"APP_NAME": "237actu",
"FACEBOOK_HYBRID_APP_EVENTS": "false",
"FACEBOOK_ANDROID_SDK_VERSION": "4.38.1"
},
"cordova-plugin-googleplus": {
"REVERSED_CLIENT_ID": "app reverse client id"
}
},
"platforms": [
"android",
"ios"
]
}
}
To resolve this problem I tried two things:
I added node --max-old-space-size=2048 in the scripts section of the package.json as follows:
"scripts": {
"clean": "ionic-app-scripts clean",
"build": "node --max-old-space-size=2048 ionic-app-scripts build",
"lint": "ionic-app-scripts lint",
"ionic:build": "ionic-app-scripts build",
"ionic:serve": "ionic-app-scripts serve"
},
It did not work.
I edited the ionic.cmd file of my computer as follows:
#IF EXIST "%~dp0\node.exe" (
"%~dp0\node.exe" "%~dp0\node_modules\ionic\bin\ionic" %*
)
ELSE (
#SETLOCAL
#SET PATHEXT=%PATHEXT:;.JS;=;% **node --max-old-space-size=2048** "%~dp0\node_modules\ionic\bin\ionic" %*)
As you can notice, I just added --max-old-space-size=2048, but it did not work. My computer RAM is 3 984 MB
I also tried to downgrade firebase to the 4 version before the build, but it did not work.
I updated all the dependencies of my project using this command : npm update -f
I deleted the folders from my project plugins, platforms, nodes_modules and i also removed package-lock.json from my project. And i ran the commands in the project before the build :
npm install,
ionic cordova platform add android.
None of theses solutions worked for me.
Any help ?
Finally here is the solution that have worked for me.
The Removal of android platform from the project with this command :
ionic cordova platform rm android
The Adding of the android platform to the project : ionic cordova platform add android#latest, in my case, i used the latest version of android platform.
The Adding of the #angular-devkit/build-optimizer#0.6.8 in the project :
npm install #angular-devkit/build-optimizer#0.6.8 --save
this angular plugin will optimize the build of the project.
The running of this command in the project : cordova clean
Now when i run ionic cordova build android --prod --release it succeed.
try this
* add this to the package.json scripts
`"ionic:build": "node --max-old-space-size=8192 ./node_modules/#ionic/app-scripts/bin/ionic-app-scripts.js build",`
* run the command:
`npm run ionic:build --prod`
* run the commands:
`cordova build android --release`
`cordova build ios --release`

white screen on touch for lower resolution phones after building using --prod flag

This code has been working in ionic 2, however after upgrading to ionic 3 my login & signup screen have began to act weird.The entire screen goes white on input focus and also when i click any button.
The code works well in a browser however after in build production app and test on android device it acts as below.
I have tried changing the html and sass with no success and i've run out of ideas on how to fix it. Here is my login screen code if it helps.
ionic info
cli packages:
#ionic/cli-utils : 1.6.0 (/root/Templates/Akorion Projects/EzyExtensionV2/node_modules/ionic/node_modules/#ionic/cli-utils)
ionic (Ionic CLI) : 3.6.0 (/root/Templates/Akorion Projects/EzyExtensionV2/node_modules/ionic)
global packages:
Cordova CLI : 7.0.1
local packages:
#ionic/app-scripts : 2.0.2
#ionic/cli-plugin-cordova : 1.4.1
#ionic/cli-plugin-ionic-angular : 1.3.2
Cordova Platforms : android 6.2.3
Ionic Framework : ionic-angular 3.5.3
System:
Android SDK Tools : 26.0.2
Node : v7.4.0
OS : Linux 4.9
npm : 5.0.0
package.json
{
"name": "EzyExtensionV2",
"version": "0.0.1",
"author": "Ionic Framework",
"homepage": "http://ionicframework.com/",
"private": true,
"scripts": {
"clean": "ionic-app-scripts clean",
"build": "ionic-app-scripts build",
"lint": "ionic-app-scripts lint",
"ionic:build": "ionic-app-scripts build",
"ionic:serve": "ionic-app-scripts serve"
},
"dependencies": {
"#angular/animations": "^4.1.3",
"#angular/common": "4.1.3",
"#angular/compiler": "4.1.3",
"#angular/compiler-cli": "4.1.3",
"#angular/core": "4.1.3",
"#angular/forms": "4.1.3",
"#angular/http": "4.1.3",
"#angular/platform-browser": "4.1.3",
"#angular/platform-browser-dynamic": "4.1.3",
"#ionic-native/app-version": "^4.0.1",
"#ionic-native/call-number": "^4.0.1",
"#ionic-native/camera": "^4.0.1",
"#ionic-native/core": "3.12.1",
"#ionic-native/file": "^4.0.1",
"#ionic-native/file-path": "^4.0.1",
"#ionic-native/file-transfer": "^4.0.1",
"#ionic-native/google-analytics": "^4.0.1",
"#ionic-native/keyboard": "^4.0.1",
"#ionic-native/local-notifications": "^4.0.1",
"#ionic-native/printer": "^4.0.1",
"#ionic-native/screenshot": "^4.0.1",
"#ionic-native/social-sharing": "^4.0.1",
"#ionic-native/splash-screen": "^4.0.1",
"#ionic-native/status-bar": "^4.0.1",
"#ionic-native/transfer": "^3.14.0",
"#ionic/storage": "2.0.1",
"#types/node": "^8.0.14",
"#types/pouchdb": "6.1.0",
"ionic-angular": "3.5.3",
"ionic-image-loader": "^4.1.1",
"ionicons": "3.0.0",
"pouchdb": "^6.3.4",
"rxjs": "5.4.0",
"sw-toolbox": "3.6.0",
"zone.js": "0.8.12"
},
"devDependencies": {
"#ionic/app-scripts": "2.0.2",
"#ionic/cli-plugin-cordova": "1.4.1",
"#ionic/cli-plugin-ionic-angular": "1.3.2",
"ionic": "3.6.0",
"typescript": "2.3.4"
},
"description": "An Ionic project"
}
After further trials i also uncovered that it only happens when i build using the --prod flag and on android phones with resolution 480x800 and below.
I have opened up an issue on the ionic github page.

cordova platform add android got following errors

**my package.json
**
{
"name": "ionic-app-base",
"author": "Ionic Framework",
"homepage": "http://ionicframework.com/",
"private": true,
"scripts": {
"clean": "ionic-app-scripts clean",
"build": "ionic-app-scripts build",
"lint": "ionic-app-scripts lint",
"ionic:build": "ionic-app-scripts build",
"ionic:serve": "ionic-app-scripts serve"
},
"dependencies": {
"#angular/common": "2.4.8",
"#angular/compiler": "2.4.8",
"#angular/compiler-cli": "2.4.8",
"#angular/core": "2.4.8",
"#angular/forms": "2.4.8",
"#angular/http": "2.4.8",
"#angular/platform-browser": "2.4.8",
"#angular/platform-browser-dynamic": "2.4.8",
"#angular/platform-server": "2.4.8",
"#ionic-native/action-sheet": "^3.4.4",
"#ionic-native/app-version": "^3.1.0",
"#ionic-native/app-update": "^3.9.2",
"#ionic-native/barcode-scanner": "^3.4.4",
"#ionic-native/camera": "^3.4.4",
"#ionic-native/camera-preview": "^3.5.0",
"#ionic-native/core": "^3.7.0",
"#ionic-native/date-picker": "^3.4.4",
"#ionic-native/file": "^3.4.4",
"#ionic-native/file-opener": "^3.8.0",
"#ionic-native/image-picker": "^3.4.4",
"#ionic-native/keyboard": "^3.4.4",
"#ionic-native/social-sharing": "^3.4.4",
"#ionic-native/transfer": "^3.4.4",
"#ionic/storage": "2.0.0",
"action-sheet": "^1.0.5",
"chart.js": "^2.5.0",
"intl": "^1.2.5",
"ion2-calendar": "^1.0.6",
"ionic-angular": "2.2.0",
"ionic-image-loader": "^3.2.0",
"ionic-native": "2.4.1",
"ionic2-city-picker": "^0.0.4",
"ionicons": "3.0.0",
"jsqr": "^0.2.2",
"lodash": "^4.17.4",
"moment": "^2.18.1",
"pouchdb": "^6.1.2",
"pouchdb-adapter-cordova-sqlite": "^2.0.2",
"rxjs": "5.0.1",
"setimmediate": "^1.0.5",
"sw-toolbox": "3.4.0",
"uuid": "^3.0.1",
"zone.js": "0.7.2"
},
"devDependencies": {
"#ionic/app-scripts": "1.3.7",
"#ionic/cli-plugin-ionic-angular": "1.3.0",
"typescript": "2.3.3"
}
}
ionic info
D:\03-bak\baiduoke>ionic info
global packages:
#ionic/cli-utils : 1.4.0
Cordova CLI : not installed
Ionic CLI : 3.4.0
local packages:
#ionic/app-scripts : 1.3.7
#ionic/cli-plugin-cordova : 1.4.0
#ionic/cli-plugin-ionic-angular : 1.3.0
Cordova Platforms : none
Ionic Framework : ionic-angular 2.2.0
System:
Node : v6.10.0
OS : Windows 10
Xcode : not installed
ios-deploy : not installed
ios-sim : not installed
npm : 5.0.3
my errors i've got following errors when run command
D:\03-bak\baiduoke>cordova platform add android
Using cordova-fetch for cordova-android#~6.2.2
Error: Failed to fetch platform cordova-android#~6.2.2
Probably this is either a connection problem, or platform spec is incorrect.
Check your connection and platform name/version/URL.
Error: cmd: Command failed with exit code 1 Error output:
npm ERR! Maximum call stack size exceeded
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\kid\AppData\Roaming\npm-cache\_logs\2017-06-13T08_58_46_055Z-debug.log`
I've got above errors when i run cordova platform add android or cordova plugin ls
Cordova CLI : not installed
You will need to install cordova as well for this to work. Ionic cli uses cordova cli as well.
Check installation docs.
Do:
npm install cordova -g
Then try your command.

Categories

Resources