Compilar y ejecutar

Para ejecutar el proyecto tenemos tres opciones: abrirlo en el navegador, emularlo o ejecutarlo en un terminal real. Según lo que queramos hacer nos puede interesar una opción un otra. Abrirlo en una navegador sería la opción más rápida y la más recomendable durante el desarrollo. Sin embargo, si usamos características nativas del dispositivo y queremos probarlas no podremos usar el navegador y tendremos que abrirlo en un emulador o dispositivo real.

Abrir en el navegador

Para abrir nuestro proyecto en un navegador para poder ver y depurar lo que vamos haciendo, simplemente tenemos que ejecutar el siguiente comando en un terminal en la raíz del proyecto:

$ ionic serve

Este terminal lo tenemos que dejar abierto mientras que estemos trabajando para que funcione el servidor. Al ejecutarlo nos mostrará una salida similar a la siguiente por pantalla:

> ng run app:serve --host=localhost --port=8100
[ng] ℹ ｢wds｣: Project is running at http://localhost:8100/webpack-dev-server/
[ng] ℹ ｢wds｣: webpack output is served from /
[ng] ℹ ｢wds｣: 404s will fallback to //index.html
[ng] chunk {common} common.js, common.js.map (common) 24.8 kB  [rendered]
...
[ng] Date: 2019-11-30T11:21:07.303Z - Hash: 36770ba2006c6c9b2ccd - Time: 15221ms

[INFO] Development server running!

       Local: http://localhost:8100

       Use Ctrl+C to quit this process

[INFO] Browser window opened to http://localhost:8100!

[INFO] ... and 78 additional chunks
[ng] ℹ ｢wdm｣: Compiled successfully.

Como se puede ver el servidor se creara en la URL http://localhost:8100/. Automáticamente se nos tendría que abrir una ventana del navegador en esta dirección, si no se abre también podemos poner la dirección manualmente. Con cada cambio que hagamos en el código del proyecto se recargará automáticamente el contenido del navegador, por lo tanto tendremos que mantener abierto este terminal mientras estemos trabajando.

Para algunas versiones de Linux es posible que falle la recarga al actualizar el código del proyecto. Para solucionar este problema tendremos que borrar la carpeta node_modules y el fichero package-lock.json, y a continuación ejecutar npm install --save. Esto debería solucionar el problema, en caso de que persista también podemos probar a escribir el siguiente comando en un terminal: echo fs.inotify.max_user_watches=524288 | sudo tee /etc/sysctl.d/40-max-user-watches.conf && sudo sysctl --system

Para finalizar, cuando queramos detener el servidor podemos pulsar Ctrl+C o simplemente cerrar el terminal.

Como opción podemos añadir el parámetro --lab en la llamada (ionic serve --lab) que nos mostrará como quedaría la aplicación a la vez para las principales plataformas destino. Por defecto nos mostrará solo una plataforma, pero desde el menú superior "Platforms" podremos añadir el resto.

Emular o instalar en un dispositivo real

Ionic también permite emular o ejecutar el proyecto en un dispositivo real. Para esta opción primero tendremos que haber añadido una plataforma como vimos en la sección "Añadir plataformas", ya que en otro caso daría error.

Para emular un proyecto simplemente tendríamos que escribir en un terminal:

$ ionic cordova emulate <PLATFORM>

Donde <PLATFORM> es la plataforma para la que queremos emular. Por ejemplo para emular en Android escribiríamos:

$ ionic cordova emulate android

Y para instalar y ejecutar en un dispositivo real se hace de igual forma pero usando el comando run:

$ ionic cordova run <PLATFORM>

Si al ejecutar run no encuentra ningún dispositivo real conectado procedería a lanzar un emulador. En caso de que tengamos varios emuladores o varios dispositivos conectados los podríamos seleccionar con la opción "--target" y el nombre del dispositivo. Además, con la opción "--list" podemos consultar la lista de dispositivos disponibles. Por ejemplo, con el siguiente comando podemos consultar los nombres de los emuladores disponibles:

$ ionic cordova emulate android --list

# O para consultar todas las plataformas:
$ ionic cordova emulate --list

Y posteriormente si el emulador Android que queremos utilizar se llama "Nexus_5X_API_26" ejecutaríamos:

$ ionic cordova emulate android --target Nexus_5X_API_26

También podemos utilizar la opción --livereload o -l (tanto con emulate como con run), de esta forma, tras cada cambio que hagamos, se volverá a compilar el código y se recargará automáticamente la emulación o la aplicación en el dispositivo. Por ejemplo:

$ ionic cordova run ios -l

Otra opción que podemos añadir en ambos casos es --consolelogs or -c para ver en el terminal la información que imprime por consola la aplicación.

Por último mencionar que si no queremos ejecutar el proyecto y solamente queremos compilarlo y generar el código destino de la plataforma podemos usar la opción build indicando también la plataforma de compilación:

$ ionic cordova build <PLATFORM>

Si no indicamos la plataforma este comando compilaría el proyecto para todas las plataformas que tengamos instaladas.

Errores de compilación

Dado que Ionic está basado en Angular y escrito en TypeScript, cada vez que guardemos y se recargue la emulación o el servidor, nuestro código volverá a ser "transpilado". Y dado que TypeScript comprueba tipos y gestiona errores puede que nos aparezcan determinados errores que detengan la compilación. En este caso se mostrarán por consola las líneas que han producido el error y tendremos que solucionarlo antes de continuar con la compilación.

Otro posible error con el que nos podemos encontrar es por una versión incorrecta de los plugins. Un error común es no contar con la versión correcta del plugin de Cordova. En caso de que nos aparezca este error lo podremos solucionar reinstalando la versión correcta, por ejemplo:

$ npm install --save --save-exact @ionic/cli-plugin-cordova@1.5.0