Skip to content
Aprende a hacer apps móviles con Ionic 2 

Ionic CLI v3, lo que debes saber

Ionic es una gran plataforma para desarrollar web apps móviles, ¡pero evoluciona tan rápido que a veces te sacan de quicio! Hace unos días publicaron una actualización de su herramienta de linea de comandos (CLI) y han cambiado algunas cosas. Esta es una breve guía para adaptarte a Ionic CLI v3.

Requerimientos

Antes de nada comentar que para usar la nueva CLI de Ionic necesitas tener unas versiones bastante modernas de node y npm:

  • Node 6+
  • Npm 3+

Proceso de instalación

La CLI se instala con el paquete principal de ionic, así que es tan simple como hacer:

npm install -g ionic

Si ahora ejecutas ionic info, te debería salir por consola un resultado similar al siguiente:

global packages:

    @ionic/cli-utils : 1.1.2
    Ionic CLI        : 3.1.2

System:
    #...your node version and system details...

Como ves, mi CLI de Ionic está en una versión 3+.

Nuevo proyecto

El comando para crear un nuevo proyecto se ha modificado ligeramente para convertir a Ionic 2+ (Ionic v2 y Ionic v3) en la tipología principal de proyecto.

Ahora ya no debes indicar la versión --v2. Para crear un nuevo proyecto en la última versión de Ionic, debes hacer:

ionic start <name> [tmpl]

Si quieres iniciar un proyecto con la versión 1 de Ionic, siempre puedes indicarlo con --type ionic1.

Listar proyectos starter

Para saber que templates puedes usar al crear un nuevo proyecto (ese [tmpl] de comando anterior), lo puedes hacer igual que en versiones anteriores, con:

ionic start --list

Lanzar el servidor de desarrollo

Este comando tampoco ha cambiado. Si quieres lanzar el servidor de desarrollo, solo tienes que hacer:

ionic serve

Cambios sustanciales respecto a la CLI v2

Más rápido

El paquete que instala la CLI ha reducido su tamaño drásticamente y eso lo notarás en el tiempo de instalación. Ahora es mucho más rápido. Además, también se ha mejorado la velocidad del comando start.

Nomenclatura de comandos por plataformas

Uno de los cambios que más notarás es la nueva nomenclatura de comandos. Ahora han sido namespaced, es decir, se han delimitado por nombres. Siempre es engorroso esto de que te cambien algunos comandos…

¿Por qué lo hacen?

¿Qué sentido tiene?

 
Después del enfado inicial, si te fijas un poco, verás que tiene sentido lo que han hecho.

Ionic empezó orientado únicamente a plataformas móviles (y web mobile) y ahora se están abriendo a otras plataformas como por ejemplo Electron, para llegar a escritorio. Y claro, ahí la CLI antigua no estaba preparada.

Los comandos principales que usabas en desarrollo ahora pasan a tener el nombre de la plataforma delante, es decir, para móvil tienes los siguientes cambios:

  • ionic build ======> ionic cordova build
  • ionic emulate ====> ionic cordova emulate
  • ionic run ======== > ionic cordova run
  • ionic platform ===> ionic cordova platform
  • ionic plugins ====> ionic cordova plugins

Comandos guiados

Ahora muchos de los comandos te facilitan un guiado en caso de que te falte alguna dependencia o lo hayas introducido incompleto.

Por ejemplo, si creas un proyecto nuevo y lo intentas compilar para iOS o Android, la CLI te indica que te falta el plugin @ionic/cli-plugin-cordova. Además, se ofrece a instalarlo por ti.

ionic CLI v3 guided command

Lo mismo pasa con el comando start, así como con el comando generate que te permite crear nuevos archivos. Si no especificas el tipo de archivo que quieres crear, la CLI te lo pregunta.

enter image description here

Comandos eliminados

Los siguientes comandos (la mayoría de servicios en el cloud de Ionic), han sido eliminados: setup, share, lib, io, security, push, config, service, add, remove, list, hooks, state.

En el caso de este último (state), se ha eliminado por que ahora cordova ya implementa un mecanismo interno para guardar y restaurar los plugins que usas.

Nuevos comandos

La CLI v3 de Ionic ha añadido el comando signup, que está también relacionado con sus servicios en el cloud.

Conclusiones

Estos son los principales cambios de la nueva CLI de Ionic.

Aunque de entrada eso de oír que de nuevo Ionic está cambiando cosas te puede irritar (reconozco que a mí me pasa), la verdad es que son cambios menores y todos para mejor:

  • Ayuda en los comandos
  • Más información de contexto
  • Más rapidez
  • Es el primer paso para que la CLI te permita compilar a otras plataformas como Electron. Esto implica ligeros cambios en los comandos, pero nada drástico.

Espero que este resumen te ayude a asimilar las novedades.

¡Saludos!

Published inionicIonic 2Ionic 3Ionic Framework

10 Comments

  1. Excelente resumen ¿Para cuando un curso de Ionic nivel medio-avanzado? 😛

    • Enrique Oriol Enrique Oriol

      Pues no falta mucho, no 😉

      • Juanjo López Juanjo López

        Magnífica noticia!!! Estaré atento 🙂

  2. Buen post, al igual que todos los demás que posteas (Y)

  3. Hola,

    Estoy detrás de un proxy corporativo y, aunque consigo instalar Ionic 3, no consigo crear un proyecto porque me da error connect ETIMEDOUT.

    He visto que intenta acceder a esta url: https://github.com/driftyco/ionic2-app-base/archive/master.tar.gz

    Yo puedo acceder a esa url y descargarme ese archivo. ¿Sabes si, teniendo ya ese archivo, hay alguna forma de crear un nuevo proyecto? Ya sea a través de npm o “a mano”.

    Saludos

  4. Disculpa que te moleste, es muy bueno el post. Te consulto. Si agrego una pagina, y la quiero llamar con un botón o con un tag, como por ejemplo , como debería realizar la configuración para poder llamarla, porque de todas la formas que intente, me esta dando uno u otro error. Gracias. Javier.

  5. Gonzalo Gonzalo

    Hola que tal, tengo una consulta, al momento de crear un proyecto con ionic 2 uso el siguiente comando “ionic start proyecto –type ionic2” me sale la pregunta “? What starter would you like to use: (Use arrow keys)” y no me sale ninguna opcion para seleccionar y si presiono enter me sale este error

    “readline.js:973
    throw err;
    ^

    TypeError: Cannot read property ‘value’ of undefined
    at Prompt.getCurrentValue (C:\Users\Gonzalo\AppData\Roaming\npm\node_modules\ionic\node_modules\inquirer\lib\prompts\list.js:126:51)
    at tryCatcher (C:\Users\Gonzalo\AppData\Roaming\npm\node_modules\ionic\node_modules\rx-lite\rx.lite.js:67:31)
    at InnerObserver.next (C:\Users\Gonzalo\AppData\Roaming\npm\node_modules\ionic\node_modules\rx-lite\rx.lite.js:4495:43)
    at InnerObserver.Rx.internals.AbstractObserver.AbstractObserver.onNext (C:\Users\Gonzalo\AppData\Roaming\npm\node_modules\ionic\node_modules\rx-lite\rx.lite.js:1602:31)
    at InnerObserver.tryCatcher (C:\Users\Gonzalo\AppData\Roaming\npm\node_modules\ionic\node_modules\rx-lite\rx.lite.js:67:31)
    at AutoDetachObserverPrototype.next (C:\Users\Gonzalo\AppData\Roaming\npm\node_modules\ionic\node_modules\rx-lite\rx.lite.js:6495:51)
    at AutoDetachObserver.Rx.internals.AbstractObserver.AbstractObserver.onNext (C:\Users\Gonzalo\AppData\Roaming\npm\node_modules\ionic\node_modules\rx-lite\rx.lite.js:1602:31)
    at TakeObserver.next (C:\Users\Gonzalo\AppData\Roaming\npm\node_modules\ionic\node_modules\rx-lite\rx.lite.js:4681:17)
    at TakeObserver.Rx.internals.AbstractObserver.AbstractObserver.onNext (C:\Users\Gonzalo\AppData\Roaming\npm\node_modules\ionic\node_modules\rx-lite\rx.lite.js:1602:31)
    at TakeObserver.tryCatcher (C:\Users\Gonzalo\AppData\Roaming\npm\node_modules\ionic\node_modules\rx-lite\rx.lite.js:67:31)”

    A que podria deberse , ya que no sucede lo mismo cuando ejecuto el mismo comando para ionic1

    • Enrique Oriol Enrique Oriol

      Mírate la documentación de la CLI de Ionic, y asegúrate de estar actualizado a la versión más reciente.

      ¡Saludos!

Deja un comentario