Image is not loading in Ionic 3 - ionic-framework

I am working on ionic 3. I updated ionic-cli, nodejs and cordova versions in the project. After updating the version, the images are not loading in android. But It's working fine in the browser. I applied all the suggestions but it's not fixed yet.
The error which I am getting.
Appi_demo_a.png:1 GET http://localhost/assets/icon/Appi_demo_a.png net::ERR_CONNECTION_REFUSED
I am doing to fix it.
add this in confix.xml
<edit-config file="app/src/main/AndroidManifest.xml" mode="merge" target="/manifest/application" xmlns:android="http://schemas.android.com/apk/res/android">
<application android:usesCleartextTraffic="true" />
<application android:networkSecurityConfig="#xml/network_security_config" />
</edit-config>
network_security_config.xml
<?xml version="1.0" encoding="utf-8"?>
<network-security-config>
<base-config cleartextTrafficPermitted="true">
<trust-anchors>
<certificates src="system"/>
</trust-anchors>
</base-config>
<domain-config cleartextTrafficPermitted="true">
<domain includeSubdomains="true">localhost</domain>
<domain includeSubdomains="true">spiapi.demo.com</domain>
</domain-config>
</network-security-config>
version details
Ionic:
Ionic CLI : 6.12.1
Ionic Framework : ionic-angular 3.9.2
#ionic/app-scripts : 3.2.4
Cordova:
Cordova CLI : 10.0.0
Cordova Platforms : 5.0.4, android 9.0.0, browser
Cordova Plugins : cordova-plugin-ionic-webview 5.0.0, cordova-plugin-ionic 5.4.7, (and 17 other plugins)
NodeJS : v14.15.0
npm : 6.14.8

Related

ionic base64togallery plugin not working in android-targetSdkVersion 29

I'm using base64-to-gallery to save images for android devices in my ionic app.
Previously it was working fine but now after added <preference name="android-targetSdkVersion" value="29" />to config.xml file, under android platform, it's not working.
Please kindly help me with it.
Finally solved the issue. To anyone who is struggling, I will explain as below.
As mentioned in the git, https://github.com/Nexxa/cordova-base64-to-gallery , ionic Cordova base64togallery plugin has been discontinued.
And also when trying to submit the ionic mobile app for Android production, it's saying that the target SDK version should be more than 29.
But as usual, if we add <preference name="android-targetSdkVersion" value="29" /> to the config.xml file under the Android platform, it will not work the base64togallery plugin (not saving images to your device)
So you have to do like below,
In your ionic project, go to build.gradle file (platforms\android\build.gradle) and change defaultTargetSdkVersion and defaultCompileSdkVersion to 29. (as below)
defaultTargetSdkVersion=29
defaultCompileSdkVersion=29
And then go to AndroidManifest.xml file
(platforms\android\app\src\main\AndroidManifest.xml) and add android:requestLegacyExternalStorage="true" to the application tag, as showing below.
<application android:hardwareAccelerated="true" android:icon="#mipmap/ic_launcher" android:label="#string/app_name" android:networkSecurityConfig="#xml/network_security_config" android:requestLegacyExternalStorage="true" android:supportsRtl="true">
Then try to build your app for debug or release versions.

Ionic 4 Android 9.0 Login failed

Android 9.0 not login but below 9.0 works fine
generally my code works fine on marshmallow
when I build my app android pie it is not working.
My code here below I can not understand this problem.
AndroidManifest.xml code
**<?xml version='1.0' encoding='utf-8'?>
<manifest android:hardwareAccelerated="true" android:versionCode="1" android:versionName="0.0.1" package="io.ionic.starter" xmlns:android="http://schemas.android.com/apk/res/android">
<supports-screens android:anyDensity="true" android:largeScreens="true" android:normalScreens="true" android:resizeable="true" android:smallScreens="true" android:xlargeScreens="true" />
<uses-permission android:name="android.permission.INTERNET" />
<application android:hardwareAccelerated="true" android:icon="#mipmap/ic_launcher" android:label="#string/app_name" android:networkSecurityConfig="#xml/network_security_config" android:supportsRtl="true" android:usesCleartextTraffic="true">
<activity android:configChanges="orientation|keyboardHidden|keyboard|screenSize|locale|smallestScreenSize|screenLayout|uiMode" android:label="#string/activity_name" android:launchMode="singleTop" android:name="MainActivity" android:theme="#android:style/Theme.DeviceDefault.NoActionBar" android:windowSoftInputMode="adjustResize">
<intent-filter android:label="#string/launcher_name">
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
<provider android:authorities="${applicationId}.provider" android:exported="false" android:grantUriPermissions="true" android:name="org.apache.cordova.camera.FileProvider">
<meta-data android:name="android.support.FILE_PROVIDER_PATHS" android:resource="#xml/camera_provider_paths" />
</provider>
</application>
<uses-sdk android:minSdkVersion="19" android:targetSdkVersion="28" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
<uses-permission android:name="android.permission.ACCESS_WIFI_STATE" />
</manifest>**
**Ionic Info : Ionic:**
Ionic CLI : 5.2.8 (C:\Users\Dev\AppData\Roaming\npm\node_modules\ionic)
Ionic Framework : #ionic/angular 4.11.1
#angular-devkit/build-angular : 0.801.3
#angular-devkit/schematics : 8.1.3
#angular/cli : 8.1.3
#ionic/angular-toolkit : 2.0.0
Cordova:
Cordova CLI : 9.0.0 (cordova-lib#9.0.1)
Cordova Platforms : android 8.1.0
Cordova Plugins : cordova-plugin-ionic-keyboard 2.2.0, cordova-plugin-ionic-webview 4.1.2, (and 12 other plugins)
Utility:
cordova-res : 0.6.0
native-run : 0.2.8
System:
Android SDK Tools : 26.1.1 (C:\Users\Dev\AppData\Local\Android\Sdk)
NodeJS : v10.13.0 (C:\Program Files\nodejs\node.exe)
npm : 6.11.3
OS : Windows 10
when login Android 9 show this problem only
HttpErrorResponse {headers: HttpHeaders, status: 0, statusText:
"Unknown Error", url: "http://example.com//access-token", ok: false, …}
error: ProgressEvent {isTrusted: true, lengthComputable: false, loaded: 0, total: 0, type: "error", …}
headers: HttpHeaders {normalizedNames: Map(0), lazyUpdate: null, headers: Map(0)}
message: "Http failure response for http://example.com//access-token: 0 Unknown Error"
name: "HttpErrorResponse"
ok: false
status: 0
statusText: "Unknown Error"
url: "http://example.com//access-token"
Since you didn't post your code part, here are some possible solution.
In most of the cases in ionic, Status code 0 usually indicates a CORS failure. Please check if CORS is enabled or not.
Second most possible cause is SSL certification.
Android platform level 28 disables cleartext network communications by default.
https://developer.android.com/training/articles/security-config.html#CleartextTrafficPermitted
https://stackoverflow.com/a/56178196/7803492
Step 1.
Open AndroidManifest.xml from [yourProject]/platform/android/app/src/main/AndroidManifest.xml
Setp 2.
Add this line to that file
android:usesCleartextTraffic="true"
step3. Save the file and rebuild the apk again

t.resolve is not a function in ionic 4

My use case:
Call JavaScript function from JS file (included in project) in Ionic 4 on particular page.
I'm having following issue.
ERROR TypeError: t.resolve is not a function
at Object.setNativePromise (polyfills.js:3)
at L.configurable.L.set (polyfills.js:3)
at n.exports (ocw.js:4850)
at a (ocw.js:4850)
at Object.209.100 (ocw.js:4851)
at s (ocw.js:4850)
at ocw.js:4850
at Object.327.131 (ocw.js:4852)
at s (ocw.js:4850)
at ocw.js:4850
Steps followed:
Included JS file under src->assets
added reference in index.html after cordova.js file
<!-- cordova.js required for cordova apps (remove if not needed) -->
<!-- <script src="assets/ocw.js"></script> -->
<script src="cordova.js"></script>
<script src="assets/ocw.js"></script>
In desired file, declared variable as function name
called javascript function under, ionViewDidLoad
Ionic setup:
Ionic:
ionic (Ionic CLI) : 4.1.2 (/usr/local/lib/node_modules/ionic)
Ionic Framework : ionic-angular 3.9.2
#ionic/app-scripts : 3.2.0
Cordova:
cordova (Cordova CLI) : 8.0.0
Cordova Platforms : android 6.4.0, ios 4.5.5
Cordova Plugins : cordova-plugin-ionic-keyboard 2.1.2, cordova-plugin-ionic-webview 2.0.2, (and 9 other plugins)
System:
ios-deploy : 1.9.2
ios-sim : 6.0.0
NodeJS : v8.12.0 (/usr/local/bin/node)
npm : 6.4.1
OS : macOS
Xcode : Xcode 10.1 Build version 10B61
You need to export the function in your javascript file and then import it in your pagename.page.ts to be able to use it.

Android Build Error when using the barcodescanner and qrscanner at the same time

When I use the phonegap-plugin-barcodescanner plugin and the cordova-plugin-qrscanner plugin at the same time in a project, it won't compile for the android plattform. The error it outputs is duplicate permission element in the manifest. Upon checking I saw that this is indeed the case. However manual correction doesn't work as it will be regenerated automatically.
I documented the reproduction scenario further down. It is very simple. Maybe someone has an idea how to solve this issue? Or do you think this is a bug? But where should I open the issue in such a case?
Used version:
Ionic: 3.20.0
cordova: 8.0.0
Steps to reproduce:
Start a new project ionic start permissionissue blank (when it asks if it should integrate with the iOS and Android platform say yes, when it asks to install the ProSDK say no
Change into the project folder: cd permissionissue
Build it: ionic cordova build --release android -> Still everything is fine
Install the first plugin: ionic cordova plugin add phonegap-plugin-barcodescanner
Build it: ionic cordova build --release android -> Still everything is fine
Install the second plugin: ionic cordova plugin add cordova-plugin-qrscanner
Try to build it: ionic cordova build --release android -> Now it breaks
It will show the following error:
> Manifest merger failed with multiple errors, see logs
* Try:
Run with --stacktrace option to get the stack trace. Run with --info or
--debug
option to get more log output.
* Get more help at https://help.gradle.org
BUILD FAILED in 4s
23 actionable tasks: 3 executed, 20 up-to-date
(node:12659) UnhandledPromiseRejectionWarning: Error: .../permissionissue/platforms/android/gradlew: Command failed with exit code 1 Error output:
.../permissionissue/platforms/android/app/src/main/AndroidManifest.xml:19:5-90 Error:
Element uses-permission#android.permission.CAMERA at AndroidManifest.xml:19:5-90 duplicated with element declared at AndroidManifest.xml:16:5-65
.../permissionissue/platforms/android/app/src/main/AndroidManifest.xml:20:5-85 Error:
Element uses-feature#android.hardware.camera at AndroidManifest.xml:20:5-85 duplicated with element declared at AndroidManifest.xml:18:5-84
.../permissionissue/platforms/android/app/src/main/AndroidManifest.xml Error:
Validation failed, exiting
FAILURE: Build failed with an exception.
The generated Manifest looks like this:
<uses-permission android:name="android.permission.CAMERA" />
<uses-permission android:name="android.permission.FLASHLIGHT" />
<uses-feature android:name="android.hardware.camera" android:required="true" />
<uses-permission android:name="android.permission.CAMERA" android:required="false" />
<uses-feature android:name="android.hardware.camera" android:required="false" />
<uses-feature android:name="android.hardware.camera.front" android:required="false" />
As you can see the CAMERA is once requested by itself and once with required false.
I had similar issue using cordova-plugin-camera-preview & cordova-plugin-qrscanner
What helped me was:
1. Go to plugins/cordova-plugin-qrscanner/plugin.xml
remove entries within
<config-file target="AndroidManifest.xml" parent="/*">
...
</config-file>
run
ionic cordova platform remove android
run
ionic cordova platform add android
This is how my <platform> section look like, from plugin.xml of cordova-plugin-qrscanner
<platform name="android">
<config-file target="res/xml/config.xml" parent="/*">
<feature name="QRScanner">
<param name="android-package" value="com.bitpay.cordova.qrscanner.QRScanner"/>
</feature>
</config-file>
<config-file target="AndroidManifest.xml" parent="/*">
<!-- <uses-permission android:name="android.permission.CAMERA" android:required="false" />
<uses-feature android:name="android.hardware.camera" android:required="false" />
<uses-feature android:name="android.hardware.camera.front" android:required="false" /> -->
</config-file>
<source-file src="src/android/QRScanner.java" target-dir="src/com/bitpay/cordova/qrscanner"/>
<framework src="src/android/qrscanner.gradle" custom="true" type="gradleReference"/>
</platform>
Worked for me, hope it help you as well.

play store android version code must be higher - ionic app

I did exactly as usual to publish my ionic app on the Play store. I updated all the version numbers in my config.xml to :
<widget android-versionCode="1830" id="com.XXXX" ios-CFBundleVersion="1830"
ios-CFBundleVersionString="183" version="183"
versionCode="10" xmlns="http://www.w3.org/ns/widgets"
xmlns:cdv="http://cordova.apache.org/ns/1.0">
I then build using ionic package build android --release --profile profile_production.
but I get an error message when I import the apk on the Play Store:
The version code must be higher ...
I tried to add this android-versionCode="18308" as mentioned here but I get the same error.
Any ideas please ?
Have you tried Semantic Versioning ?
Rather than name it 1.0.8
<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<widget id="com.XXXX" version="1.0.8" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
Once you have completed make sure you do a build
ionic build android
then
cordova build --release android