Implementar Angular en App de Apache Cordova

Muchas veces las posibilidades de una plataforma específica son requeridas dentro de otra. En anteriores oportunidades, comentamos una forma de integrar el desarrollo en Angular dentro de un entrono de Electron. No obstante, ¿Y si necesitamos compilar una aplicación para dispositivos móviles? Apache Cordova aparece como una opción, ya sea en un entorno de Ionic o por su cuenta. En esta ocasión vamos a generar un entorno de programación que utilice Angular y pueda compilar con Apache Cordova a las distintas plataformas.

Para comenzar, es necesario tener instalado de forma Global el Apache Cordova y el Angular-CLI. Si no fuera el caso, podemos utilizar las siguientes lineas de comando (npm requerido):

sudo npm install -g cordova

sudo npm install -g @angular/cli

Ahora es momento de crear nuestra app de Angular primero, utilizando el comando de Angular-CLI:

ng new App

Ingresamos a la carpeta generada (mediante cd App) y nos disponemos a instalar el entorno de Cordova de forma local:

cordova create cordova

En este punto ya tendremos el proyecto generado, pero previo a la implementación vamos a decidir en que plataforma lo vamos a compilar. En este ejemplo utilizaremos la plataforma browser, ya que al ser solo el navegador nos sirve de testeo. Pero si se quisiera utilizar una móvil podemos modificar donde dice browser por android o ios (para agregar una plataforma de android, puede consultarse este artículo). Vamos a entrar a la carpeta donde se instaló el entornó de cordova (mediante cd cordova) y a agregar la plataforma:

cordova add platform browser

Finalmente, para la integración, vamos a volver a la carpeta raíz (en este caso App, o simplemente ejecutamos cd ..) y a modificar el archivo package.json, hacemos nano package.json y en la parte de scripts agregaremos los siguientes:

"cordova": "cd cordova && rm -r www && cd .. && ng build --prod --bh . --output-hashing none --output-path cordova/www/",
"cordova-run": "npm run cordova && cd cordova && cordova run browser",
"cordova-build": "npm run cordova && cd cordova && cordova build browser --release"

Lo guardamos y la integración estará completa. Con este simple entorno al ejecutar npm run cordova-run el sistema va a compilar la App de Angular, la moverá al directorio de Cordova y acto seguido la ejecutará en la plataforma correspondiente, lo que simplifica mucho el desarrollo. Si queremos compilarla, usaremos el comando npm run cordova-build.

Para mayor comodidad, el repositorio de esta integración se encuentra en el siguiente vínculo de github:

https://github.com/ibuioli/angular-cordova