Ionic + Capacitor + React + Typescript + Android

Tech Stack

 "dependencies": {
   "@capacitor/android": "^2.4.2",
   "@capacitor/core": "2.4.2",
   "@ionic/react": "^5.0.7",
   "@ionic/react-hooks": "^0.0.8",
   "@ionic/react-router": "^5.0.7",
   "ionic": "^5.4.16",
   "react": "^16.13.0",
   "typescript": "3.8.3"
 },

Installation

I'm lazy, check official doc instead.

Troubleshooting

Connect to 127.0.0.1:1080 Failed: Connection refused: connect

Local Proxy Error

Check below 2 files:

  • gradle.properties under current project
  • C:\Users\Administrator\.gradle\gradle.properties Delete/comment below 4 lines:
systemProp.https.proxyPort=1080
systemProp.http.proxyHost=127.0.0.1
systemProp.https.proxyHost=127.0.0.1
systemProp.http.proxyPort=1080

No module in Run/Debug Configuration

Click File--Sync Project With Gradle Files

Failed to load resource: net:: ERR_CLEARTEXT_NOT_PERMITTED

Error after packed app

Open your file platforms/android/app/src/main/AndroidManifest.xml and add:

<uses-permission android:name = "android.permission.INTERNET" />
<uses-permission android:name = "android.permission.ACCESS_NETWORK_STATE" />
<uses-permission android:name = "android.permission.ACCESS_WIFI_STATE" />
<uses-permission android:name = "android.permission.ACCESS_WIFI_STATE" />
<uses-permission android:name = "android.permission.READ_PHONE_STATE" />

And run debug again

Debug on Physical Android Devices

  1. Activate Developer Options and open USB Debugging
  2. Connect your android to PC
  3. Start ionic server: ionic serve
  4. Chrome/Edge access chrome://inspect/#devices
    • You will see your device listed but you won't able to see inspect link
  5. Open the app in your android
    • You will see inspect link now
  6. Click inspect then you can debug it with source

References