Errores en IONIC que me hicieron sufrir

Stalin MazaStalin Maza
4 min read

En esta publicación voy a listar los problemas que más me rompieron la cabeza y que pase horas y horas buscando la solución y que espero que otros no pasen lo mismo y puedan ahorrarse horas.

El Error "net::ERR_CLEARTEXT_NOT_PERMITTED"

Este error se debe ya que IONIC usa el archivo "network_security_config.xml" para configurar la seguridad de la red en Android, esto se encuentra en el archivo "config.xml" de la siguiente manera:

<access origin="*" />
<edit-config file="app/src/main/AndroidManifest.xml" mode="merge" target="/manifest/application" xmlns:android="http://schemas.android.com/apk/res/android">
    <application android:networkSecurityConfig="@xml/network_security_config" />
 </edit-config>
 <allow-navigation href="*" />
 <resource-file src="resources/android/xml/network_security_config.xml" target="app/src/main/res/xml/network_security_config.xml" />

El archivo de seguridad en la red se encuentra en la ruta "resources/android/xml/network_security_config.xml" y por defecto solo permite como dominios permitidos al localhost, por lo que para solucionar el error debemos añadir un nuevo dominio con el valor de la URL de la red a la que necesitamos conectarnos y nos da error.

Por ejemplo en mi caso me daba error con la IP local del servidor del Backend Laravel

<?xml version="1.0" encoding="utf-8"?>
<network-security-config>
    <domain-config cleartextTrafficPermitted="true">
        <domain>localhost</domain>
        <domain>192.168.1.6</domain>
    </domain-config>
</network-security-config>

Error con la Geolocalización

Al principio parecía problema del plugin de Cordova, lo que hacia pensar que no se ejecutaba la función para obtener la localización del usuario, pero el problema finalmente fue que el plugin de geolocalización no puede detectar o ejecutar la función de obtener coordenadas si el GPS o los servicios de localización están desactivados, por lo que primero se debe verificar si se tiene permisos de localización, luego pedir activar el GPS y luego si obtener la localización

Error con el Plugin de Cordova para el Login con Google

Se debia a que no deben haber dos paquetes que usen dos diferentes versiones de los servicios de google, se arregla usando las mismas versiones: esto se observa en la ruta "C:\ionicTest\SanIsidroApp\code\platforms\android\project.properties"

cordova.system.library.4=com.google.android.gms:play-services-auth:11.8.0
cordova.system.library.5=com.google.android.gms:play-services-identity:11.8.0

Por lo que en el package.json configuramos lo siguiente:

 "cordova-plugin-request-location-accuracy": {
        "PLAY_SERVICES_LOCATION_VERSION": "11.8.0"
  },
"cordova-plugin-googleplus": {
        "REVERSED_CLIENT_ID": "mi_reversed_client_id",
        "PLAY_SERVICES_VERSION": "11.8.0"
}

Si tienen más dudas no duden en expresarlas en el Foro de IONIC, para poder compartir y ayudarnos, tal como en este caso que me alegra haber ayudado, la referencia la puedes ver aquí: Ionic Google Error Cordova

ionic-google-solution-cordova.jpg

Error "Could not find an installed version of Gradle either in Android Studio"

Si estas en Windows debes:

  • Bajarte el .zip del gradle

  • Crear un directorio donde extraerlo por ejemplo en: "C:\Gradle"

  • Hecho esto añadir la ruta "C:\Gradle\bin" a las variables de entorno de Windows,

  • si no se actualiza el path debes reiniciar la pc y para comprobar que se añadió correctamente ejecutas el comando "gradle -v"

Si estas en Linux o MAC en la pagina de descarga esta un tutorial muy bien explicado pero en esencia puedes buscar la ruta de instalación del gradle e incluirla en tu path, parecido a:

export PATH=$PATH:/opt/gradle/gradle-5.4.1/bin

Migrar tu proyecto de IONIC con Cordova a Android X

Recientemente Google ha informado que para que las aplicaciones puedan estar disponibles y subir actualizaciones a la Google Play deben actualizar su minSDK a la versión 29 y utilizar AndroidX como librería.

Por lo cual para poder hacerlo correctamente en tu aplicación de IONIC debes seguir los siguientes pasos:

  • Instalar los siguientes plugins:
# añadir este plugin para habilitar AndroidX en el proyecto
cordova plugin add cordova-plugin-androidx

# añadir este plugin para parchear el origen de los plugins existentes que usen la "Android Support Library" para que usen ahora "AndroidX"
cordova plugin add cordova-plugin-androidx-adapter
  • Actualizar tu config.xml con los siguientes valores:
 <preference name="android-minSdkVersion" value="22" />
 <preference name="android-targetSdkVersion" value="29" />
  • Actualizar tu package.json reemplazando los valores de "ANDROID_SUPPORT_VERSION" de la versión que tengas a la "29.+"

  • Ejecutar el comando "ionic repair" para reinstalar los módulos de node, reinstalar la plataforma y los plugins o en caso que solo quieras que se ejecute la parte de cordova agregas el siguiente flag "--cordova" quedando asi "ionic repair --cordova"

  • Finalmente ya puedes ejecutar el comando "ionic cordova build android" para obtener el APK

4
Subscribe to my newsletter

Read articles from Stalin Maza directly inside your inbox. Subscribe to the newsletter, and don't miss out.

Written by

Stalin Maza
Stalin Maza

I have worked as a frontend and backend developer handling technologies such as Django, Ionic, Laravel, MySQL, Spring (Java), Oracle, NodeJS, Angular, VueJS with the goal of developing websites and mobile applications that offer high performance and are interactive. You can learn more about me by visiting my website: www.stalinmaza.com #frontend #backend #fullstack #javascript #nodejs #php