Skip to content
Aprende Angular de forma rápida y efectiva  Ver curso

Actualización a Ionic 2 RC0, paso a paso

Ya hace unos días que se publicó Ionic 2 RC0. Como algunos cambios estructurales rompen la compatibilidad con versiones anteriores, quiero compartir contigo una guía paso a paso para migrar tus aplicaciones de Ionic 2 beta a Ionic 2 RC0.

Actualizate a la versión 2.1.0 del CLI de ionic

Lo primero que tienes que hacer es actualizar el CLI de ionic. Sigue estos pasos:

  1. Asegurate de que tienes una versión 3.x de npm con npm --version

  2. Desinstala la versión actual de ionic: npm uninstall -g ionic

  3. Instala la última versión de ionic: npm install -g ionic

  4. Comprueba que estás en una versión 2.1 o superior con ionic -v

Migrando tu aplicación

  1. Crea una nueva app, que es donde pasaremos el código de la antigua, con: ionic start --v2 myApp

  2. Pasa todas tus páginas de app/pages/ en la versión antigua a src/pages/ del proyecto nuevo (y borra las que ha creado por defecto el comando start)

  3. Pasa todos tus providers de app/providers a src/providers

  4. Pasa todas tus pipes de app/pipes a src/pipes.

  5. En general pasa cualquier otra carpeta que tengas en app, a src (componentes custom, etc).

  6. Convierte todas las URLs de templates en relativas en la parte TypeScript de tus componentes.

  7. Abre app/app.module.ts y haz las siguientes modificaciones:

    1. Borra las páginas que había creado el generador de proyectos

    2. Incluye tus páginas en declarations y en entryComponents. Por supuesto, también tendrás que hacer los imports necesarios.

    3. Importa e incluye en declarations todas las pipes

    4. Importa e incluye en providers todos los providers

    5. Elimina cualquier uso de providers y pipes de los decoradores de los componentes

  8. Abre app.component.ts y reemplaza la rootPage de la plantilla por tu página principal

  9. Haz públicos los datos miembro de componentes a los que se accede desde sus templates

  10. Pasa los <button> a <button ion-button>, pero NO los FAB buttons

  11. Revisa la nueva documentación de FAB buttons. Modifica los FAB buttons para pasar de
    <button ion-fab fab-right>
    a
    <ion-fab right> <button ion-fab> </ion-fab>

  12. Modifica los elementos donde se usan colores de variables SaSS para usar la sintaxis <div color=”primary”> en lugar de <div primary>.

  13. Mueve cualquier configuración de Ionic a IonicModule.forRoot en app.module.ts, como en el ejemplo: IonicModule.forRoot(MyApp, {configObject}).

  14. Actualiza las variables SaSS que hayas modificado en variables.scss

  15. Añade selectores a todas las páginas para limitar su CSS a las mismas

    1. Ves a la parte TS de cada página (por ejemplo myPage.ts) y añade el selector al decorador de componente:
      @Component({
      selector: 'my-page'
      })

    2. Actualiza la parte SCSS para usar el nombre del selector en lugar de la clase. Siguiendo con el ejemplo, en myPage.sass:
      my-page{
      ...
      }

  16. Si utilizabas LocalStorage, cambia el path de importación a import { Storage } from '@ionic/storage', y elimina toda referencia a LocalStorage.
    En este sentido, Cabe decir, que ahora Storage utiliza por debajo localForage, que usa IndexedDB o WebSQL si es posible, y si no localStorage.

En principio eso es todo, con estos cambios te debería funcionar tu app.

¡Saludos!

Published inAngular 2Ionic 2Ionic Framework

5 Comments

  1. Andres Jimenez Andres Jimenez

    Hola Enrique un saludo!, cual seria la equivalencia de lo que explicas en este articulo https://blog.enriqueoriol.com/2016/01/ionic-framework-cache-y-refresco-de-vista.html en ionic 2, a la hora de hacer push y pop a una pagina o vista, el sistema de rutas de angular 2 te permite tener un metodo resolve para que los datos de la vista siempre se actualicen, como manejar este caso en ionic 2, gracias por el gran aporte!

  2. Guillermo Guillermo

    buen aporte y saludos enrique, a la hora de trabajar con el nuevo storage los parametros de get, set cambian?

    • Enrique Oriol Enrique Oriol

      no, es todo igual

      • Guillermo Guillermo

        Podrias realizar un tuto de como se utiliza ahora el storage de esta actualizacion?

  3. Hola, segui el proceso pero me pone muchos errores en el codigo!
    Y eso que era la version veta. Osea no era tan antigua

Deja un comentario