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
Acerca de:
Ignacio Buioli
Degree on Multimedia Arts. He has developed numerous Multimedia projects as well as written articles and translated texts of the mentioned subject. In Moldeo Interactive, He is a Partner and Programmer; also taking care of a large part of the online networks and courses.