IONIC 4+Angular+PhoneGap Build

Una vez hayas probado tu aplicación en el navegador con el comando ionic serve, puedes compilar el código para subirlo a PhoneGap Build y obtener el fichero .apk para instalarlo en tus dispositivos móviles. Bastará con seguir los pasos que se indican a continuación.

En primer lugar debemos cambiar el archivo tsconfig.json para que el campo target tenga el valor es5 (más información en stackoverflow):

...
    "target": "es5"
...

El segundo paso consistirá en ejecutar el siguiente comando desde el directorio del proyecto (puedes encontrar más información aquí):

ionic build --prod -- --base-href .

Ese comando generará una carpeta www dentro de tu proyecto con todo el código web necesario. A continuación deberemos añadir allí el fichero config.xml, incluyendo el plugin cordova-plugin-ionic-webview (puedes obtener más información en la página de github de dicho plugin):

...
<plugin name="cordova-plugin-ionic-webview" />
...

Un ejemplo del fichero config.xml (que debemos incluir en la carpeta www) podría ser el siguiente:

<?xml version="1.0" encoding="UTF-8" ?>
<widget xmlns   = "http://www.w3.org/ns/widgets"
    xmlns:gap   = "http://phonegap.com/ns/1.0"
    id          = "com.fernandoruizrico.todo"
    versionCode = "1"
    version     = "0.0.1" >

    <name>ToDo!</name>

    <description>
        ToDo List.
    </description>

    <author href="https://fernandoruizrico.com" email="[email protected]">
        Fernando Ruiz Rico
    </author>

    <access origin="*" />
    <allow-navigation href="*" />
    <allow-intent href="*" />

    <plugin name="cordova-plugin-whitelist" />
    <plugin name="cordova-plugin-ionic-webview" />
    <plugin name="cordova-plugin-geolocation" />
    <plugin name="cordova-plugin-camera" />

    <preference name="phonegap-version" value="cli-9.0.0" />
</widget>

Si deseamos utilizar algún plugin (la cámara, por ejemplo) también deberemos modificar el fichero src/index.html para enlazar el fichero cordova.js (no tenemos que crearlo nosotros, sólo enlazarlo, ya que dicho archivo se creará automáticamente al compilar el código con PhoneGap Build):

...
<body>
  <app-root></app-root>
  <script type="text/javascript" src="cordova.js"></script>
</body>
...

Como último paso sólo deberemos comprimir todos los archivos dentro de la carpeta www (index.html, config.xml, …) para generar el archivo zip que subiremos a PhoneGap Build.

Publicaciones Similares

  • Swift – Closures

    Introducción Los closures son bloques de código que pueden ser pasados por parámetro a otras funciones a lo largo del código. Una de las ventajas que proveen es que son capaces de capturar y guardar referencias de las constantes y variables del contexto en que son definidos. Las funciones, vistas en una entrada anterior, son…

  • | |

    Programación con JavaScript: Funciones

    Las funciones desempeñan un papel esencial en la creación de programas y aplicaciones porque incrementan la eficiencia, la modularidad y la legibilidad del código. En esta unidad abordaremos todo lo relativo a las funciones en JavaScript, desde su definición y tipos hasta parámetros, valores de retorno, ámbito, funciones anidadas, expresiones de función, y más. Además,…

  • Angular 7

    Installation Angular 7 Components Angular 7 Templating app.component.html nav.component.html nav.component.ts /src/styles.scss nav/component.scss Angular 7 Routing /src/app/app-routing.module.ts Angular 7 Event Binding /src/app/home/home.component.html  home.component.ts Angular 7 Class & Style Binding home.component.html home.component.ts home.component.scss home.component.html home.component.scss home.component.html Angular 7 Services /src/app/data.service.ts /src/app/home/home.component.ts Angular 7 HTTP Client /src/app/app.module.ts /src/app/data.service.ts home.component.ts home.component.html home.component.scss Angular 7 Forms app.module.ts  contact.component.ts contact.component.html contact.component.scss

  • Swift – Aspectos básicos

    Constantes y variables Cualquier tipo de aplicación necesita poder guardar datos temporalmente en la memoria para poder trabajar con ellos. Las constantes y variables son apartados reservados en la memoria del dispositivo para que podamos acceder a la información que contienen durante la ejecución del programa. En este sentido, se define una variable como un…