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:
- Asegurate de que tienes una versión 3.x de npm con
npm --version
-
Desinstala la versión actual de ionic:
npm uninstall -g ionic
-
Instala la última versión de ionic:
npm install -g ionic
- Comprueba que estás en una versión 2.1 o superior con
ionic -v
Migrando tu aplicación
-
Crea una nueva app, que es donde pasaremos el código de la antigua, con:
ionic start --v2 myApp
-
Pasa todas tus páginas de
app/pages/
en la versión antigua asrc/pages/
del proyecto nuevo (y borra las que ha creado por defecto el comando start) -
Pasa todos tus providers de
app/providers
asrc/providers
-
Pasa todas tus pipes de
app/pipes
asrc/pipes
. -
En general pasa cualquier otra carpeta que tengas en app, a src (componentes custom, etc).
-
Convierte todas las URLs de templates en relativas en la parte TypeScript de tus componentes.
-
Abre
app/app.module.ts
y haz las siguientes modificaciones:- Borra las páginas que había creado el generador de proyectos
-
Incluye tus páginas en
declarations
y enentryComponents
. Por supuesto, también tendrás que hacer los imports necesarios. -
Importa e incluye en
declarations
todas las pipes -
Importa e incluye en
providers
todos los providers -
Elimina cualquier uso de providers y pipes de los decoradores de los componentes
-
Abre
app.component.ts
y reemplaza larootPage
de la plantilla por tu página principal -
Haz públicos los datos miembro de componentes a los que se accede desde sus templates
-
Pasa los
<button>
a<button ion-button>
, pero NO los FAB buttons -
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>
-
Modifica los elementos donde se usan colores de variables SaSS para usar la sintaxis
<div color=”primary”>
en lugar de<div primary>
. -
Mueve cualquier configuración de Ionic a
IonicModule.forRoot
enapp.module.ts
, como en el ejemplo:IonicModule.forRoot(MyApp, {configObject})
. -
Actualiza las variables SaSS que hayas modificado en
variables.scss
-
Añade selectores a todas las páginas para limitar su CSS a las mismas
- 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'
}) -
Actualiza la parte SCSS para usar el nombre del selector en lugar de la clase. Siguiendo con el ejemplo, en myPage.sass:
my-page{
...
}
- Ves a la parte TS de cada página (por ejemplo myPage.ts) y añade el selector al decorador de componente:
-
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!
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!
buen aporte y saludos enrique, a la hora de trabajar con el nuevo storage los parametros de get, set cambian?
no, es todo igual
Podrias realizar un tuto de como se utiliza ahora el storage de esta actualizacion?
Hola, segui el proceso pero me pone muchos errores en el codigo!
Y eso que era la version veta. Osea no era tan antigua