Index page shows properly at chrome browser from “ionic serve” but show “webpage not found”...

While I try to run the app into emulator. net::ERR_CONNECTION_REFUSED exist. I have tried to add cleartextTrafficPermitted in network_security_config.xml. Then, add below code in config.xml but still not work.

<preference name="hostname" value="localhost" />
<preference name="AndroidInsecureFileModeEnabled" value="true" />




ionic info:

Ionic:

Ionic CLI : 7.2.0 (/home/user/npm-global/lib/node_modules/@ionic/cli)
Ionic Framework : @ionic/angular 8.4.1
@angular-devkit/build-angular : 18.2.12
@angular-devkit/schematics : 18.2.12
@angular/cli : 18.2.12
@ionic/angular-toolkit : 12.1.1

Cordova:

Cordova CLI : 12.0.0 (cordova-lib@12.0.2)
Cordova Platforms : android 13.0.0
Cordova Plugins : cordova-plugin-ionic-keyboard 2.2.0, cordova-plugin-ionic-webview 5.0.0, (and 15 other plugins)

Utility:

cordova-res : 0.15.4
native-run : 2.0.1

System:

Android SDK Tools : 26.1.1 (/home/user/Android/Sdk)
NodeJS : v22.12.0 (/usr/local/bin/node)
npm : 10.9.0
OS : Linux 5.15


ionic cordova requirements android:

Requirements check results for android:
Java JDK: installed 21.0.5
Android SDK: installed true
Android target: not installed
Command failed with exit code 1: avdmanager list target
Exception in thread "main" java.lang.NoClassDefFoundError: javax/xml/bind/annotation/XmlSchema
at com.android.repository.api.SchemaModule$SchemaModuleVersion.<init>(SchemaModule.java:156)
at com.android.repository.api.SchemaModule.<init>(SchemaModule.java:75)
at com.android.sdklib.repository.AndroidSdkHandler.<clinit>(AndroidSdkHandler.java:81)
at com.android.sdklib.tool.AvdManagerCli.run(AvdManagerCli.java:213)
at com.android.sdklib.tool.AvdManagerCli.main(AvdManagerCli.java:200)
Caused by: java.lang.ClassNotFoundException: javax.xml.bind.annotation.XmlSchema
at java.base/jdk.internal.loader.BuiltinClassLoader.loadClass(BuiltinClassLoader.java:641)
at java.base/jdk.internal.loader.ClassLoaders$AppClassLoader.loadClass(ClassLoaders.java:188)
at java.base/java.lang.ClassLoader.loadClass(ClassLoader.java:526)
... 5 more
Gradle: installed /opt/gradle/gradle-8.7/bin/gradle
Some of requirements check failed


gradle -v:

------------------------------------------------------------
Gradle 8.7
------------------------------------------------------------

Build time: 2024-03-22 15:52:46 UTC
Revision: 650af14d7653aa949fce5e886e685efc9cf97c10

Kotlin: 1.9.22
Groovy: 3.0.17
Ant: Apache Ant(TM) version 1.10.13 compiled on January 4 2023
JVM: 21.0.5 (Ubuntu 21.0.5+11-Ubuntu-1ubuntu120.04)
OS: Linux 5.15.0-127-generic amd64


package.json

{
"name": "beauty_bell",
"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": "^18.2.13",
"@angular/core": "^18.2.13",
"@angular/forms": "~18",
"@angular/platform-browser": "~18",
"@angular/platform-browser-dynamic": "~18",
"@angular/router": "^18.2.13",
"@awesome-cordova-plugins/android-permissions": "^6.13.0",
"@awesome-cordova-plugins/camera": "^6.13.0",
"@awesome-cordova-plugins/core": "^6.13.0",
"@awesome-cordova-plugins/file": "^6.13.0",
"@awesome-cordova-plugins/geolocation": "^6.13.0",
"@awesome-cordova-plugins/http": "^6.13.0",
"@awesome-cordova-plugins/in-app-browser": "^6.13.0",
"@awesome-cordova-plugins/native-geocoder": "^6.13.0",
"@awesome-cordova-plugins/network": "^6.13.0",
"@awesome-cordova-plugins/onesignal": "^6.13.0",
"@awesome-cordova-plugins/photo-library": "^6.14.0",
"@awesome-cordova-plugins/splash-screen": "^6.13.0",
"@awesome-cordova-plugins/status-bar": "^6.13.0",
"@awesome-cordova-plugins/stripe": "^6.13.0",
"@ionic/angular": "^8.4.1",
"@ionic/cordova-builders": "^12.1.2",
"@ngx-translate/core": "^16.0.4",
"@ngx-translate/http-loader": "^16.0.1",
"card.io.cordova.mobilesdk": "^2.1.0",
"cordova-android": "13.0.0",
"cordova-plugin-add-swift-support": "^2.0.2",
"cordova-plugin-advanced-http": "^3.2.0",
"cordova-plugin-android-permissions": "^1.1.2",
"cordova-plugin-file": "^6.0.1",
"cordova-plugin-geolocation": "^4.0.2",
"cordova-plugin-nativegeocoder": "^3.4.1",
"cordova-plugin-photo-library": "^2.3.1",
"cordova-plugin-splashscreen": "6.0.0",
"cordova-plugin-statusbar": "2.4.3",
"cordova-plugin-stripe": "^1.5.3",
"core-js": "^2.5.4",
"moment": "^2.29.1",
"ngx-filter-pipe": "^3.0.1",
"ngx-search-filter": "^18.0.0",
"rxjs": "^7.8.1",
"time-ago-pipe": "^1.3.2",
"tslib": "^2.0.0",
"zone.js": "~0.14.10"
},
"devDependencies": {
"@angular-devkit/build-angular": "~18",
"@angular/cli": "~18",
"@angular/compiler": "~18",
"@angular/compiler-cli": "~18",
"@angular/language-service": "~18",
"@ionic/angular-toolkit": "~12",
"@types/jasmine": "~3.3.8",
"@types/jasminewd2": "~2.0.3",
"@types/node": "^22.10.2",
"codelyzer": "^6.0.2",
"com-badrit-base64": "^0.2.0",
"com.razorpay.cordova": "^1.4.15",
"cordova-ios": "^6.2.0",
"cordova-plugin-camera": "^8.0.0",
"cordova-plugin-device": "^3.0.0",
"cordova-plugin-dialogs": "github:apache/cordova-plugin-dialogs",
"cordova-plugin-inappbrowser": "github:apache/cordova-plugin-inappbrowser",
"cordova-plugin-ionic-keyboard": "^2.2.0",
"cordova-plugin-ionic-webview": "^5.0.1",
"cordova-plugin-network-information": "^3.0.0",
"cordova-plugin-splashscreen": "^6.0.2",
"cordova-plugin-statusbar": "^4.0.0",
"jasmine-core": "~5.5.0",
"jasmine-spec-reporter": "~5.0.0",
"karma": "~6.4.4",
"karma-chrome-launcher": "~3.1.0",
"karma-coverage-istanbul-reporter": "~3.0.2",
"karma-jasmine": "^5.1.0",
"karma-jasmine-html-reporter": "^2.1.0",
"onesignal-cordova-plugin": "^5.2.9",
"protractor": "~7.0.0",
"ts-node": "~7.0.0",
"tslint": "~6.1.0",
"typescript": "~5.5"
},
"description": "An Ionic project",
"cordova": {
"plugins": {
"cordova-plugin-stripe": {},
"cordova-plugin-statusbar": {},
"cordova-plugin-device": {},
"cordova-plugin-splashscreen": {},
"cordova-plugin-dialogs": {},
"cordova-plugin-inappbrowser": {},
"cordova-plugin-ionic-keyboard": {},
"cordova-plugin-nativegeocoder": {},
"cordova-plugin-geolocation": {
"GEOLOCATION_USAGE_DESCRIPTION": "To locate you",
"GPS_REQUIRED": "true"
},
"cordova-plugin-network-information": {},
"com-badrit-base64": {},
"cordova-plugin-advanced-http": {
"ANDROIDBLACKLISTSECURESOCKETPROTOCOLS": "SSLv3,TLSv1"
},
"cordova-plugin-android-permissions": {},
"cordova-plugin-photo-library": {
"PHOTO_LIBRARY_USAGE_DESCRIPTION": "To choose photos"
},
"onesignal-cordova-plugin": {},
"com.razorpay.cordova": {},
"cordova-plugin-camera": {
"ANDROIDX_CORE_VERSION": "1.6.+"
},
"cordova-plugin-file": {
"ANDROIDX_WEBKIT_VERSION": "1.4.0"
},
"cordova-plugin-ionic-webview": {}
},
"platforms": [
"ios",
"android"
]
}
}


config.xml

<preference name="hostname" value="localhost" />
<preference name="AndroidInsecureFileModeEnabled" value="true" />
<platform name="android">
<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>
</platform>


/resources/android/xml/network_security_config.xml

<domain-config cleartextTrafficPermitted="true">
<domain includeSubdomains="true">localhost</domain>
</domain-config>

Continue reading...