Menu

Aprende a migrar tu proyecto de Ionic 2 a Ionic 3

tipsnews - April 15, 2017 por Nicolas Molina
ionic3.5.3ionic-native4.1.0ionic-app-scripts2.0.2cordova-cli7.0.0ionic-cli3.5.0

Hace poco Ionic lanzó su más reciente versión (Ionic v3) y mencionamos acerca de sus principales novedades, ahora en este artículo vamos a ver cómo actulizar un proyecto desde la versión 2 a la versión 3 y como resolver los problemas más comunes.

Paso 1: Actualizar Ionic CLI y Cordova

Debemos aseguranos que tenemos la ultima versión de ionic CLI y cordova con:

npm install -g ionic@latest cordova@latest

Paso 2: Borrar node_modules

Debemos borrar la carpeta node_modules de nuestro proyecti, para luego instalar las nuevas dependencias. Se puede borrar desde la terminal de la siguiente manera:

Mac / Linux rm -rf node_modules

Windows rd /s node_modules

Paso 3: Actualizar package.json

Ahora debemos actualizar las versiones de las dependencias de nuestro proyecto y las que de ionic 3 necesita para trabajar correctamente, las versiones deben quedar de la siguiente manera:

"dependencies": {
  "@angular/common": "4.1.3",
  "@angular/compiler": "4.1.3",
  "@angular/compiler-cli": "4.1.3",
  "@angular/core": "4.1.3",
  "@angular/forms": "4.1.3",
  "@angular/http": "4.1.3",
  "@angular/platform-browser": "4.1.3",
  "@angular/platform-browser-dynamic": "4.1.3",
  "@ionic-native/core": "4.1.0",
  "@ionic-native/splash-screen": "4.1.0",
  "@ionic-native/status-bar": "4.1.0",
  "@ionic/storage": "2.0.1",
  "ionic-angular": "3.5.3",
  "ionicons": "3.0.0",
  "rxjs": "5.4.0",
  "sw-toolbox": "3.6.0",
  "zone.js": "0.8.12"
},
"devDependencies": {
  "@ionic/app-scripts": "2.0.2",
  "@ionic/cli-plugin-cordova": "1.4.1",
  "@ionic/cli-plugin-ionic-angular": "1.3.2",
  "typescript": "2.3.4"
}

Si existen otras dependencias aparte de las que maneja Ionic, se debe revisar la documentación de estas dependencias y si es necesario actualizarlas, lo más importante es que sean compatibles con la versión de angular 4.

Paso 4: Instalar nuevas dependencias

Ahora solo debemos instalar las nuevas dependencias en el proyecto y para esto ejecutamos el comando npm install desde la terminal.

Paso 5: Importar BrowserModule

Ahora debemos agregar BrowserModule en nuestro archivo app.module.ts, así:

import { BrowserModule } from '@angular/platform-browser';

...

@NgModule({
  declarations: [
    MyApp
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp),
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    DuetyApp
  ],
  providers: [
    // Keep this to enable Ionic's runtime error handling during development
    { provide: ErrorHandler, useClass: RavenErrorHandler },
  ]
})
export class AppModule {}

Paso 6: Importar HttpModule

Ahora debemos agregar HttpModule en nuestro archivo app.module.ts, este paso es muy importante si dentro de la aplicación se usa la dependencia Http:

import { HttpModule } from '@angular/http';

...

@NgModule({
  declarations: [
    MyApp,
    HomePage
  ],
  imports: [
    BrowserModule,
    HttpModule,
    IonicModule.forRoot(MyApp),
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage
  ],
  providers: [
    // Keep this to enable Ionic's runtime error handling during development
    { provide: ErrorHandler, useClass: RavenErrorHandler },
  ]
})
export class AppModule {}

Paso 7: Agregar vendors a Index.html

Por último vamos a agregar en nuestro src/index.html, la ruta build/vendor.js, así debe quedar:

...
<!-- Ionic's root component and where the app will load -->
<ion-app></ion-app>

<!-- The polyfills js is generated during the build process -->
<script src="build/polyfills.js"></script>

<!-- The vendor js is generated during the build process
      It contains all of the dependencies in node_modules -->
<script src="build/vendor.js"></script>

<!-- The main bundle js is generated during the build process -->
<script src="build/main.js"></script>
...

!Y ya eso es todo! Se ve algo fácil, pero ahora explicaré algunos de los problemas más comunes y como solucionarlos:

Tip 1: Ionic Native 3

Hace poco tuvimos la más reciente actualización de Ionic Native, ahora cada uno de los plugins debe ser inyectado como dependencia en los controladores o pages, esto hace más fácil hacer pruebas unitarias o soportar estos plugins en las web. Por supuesto si quieres actualizar a ionic 3 también debes actualizar tu versión de ionic native.

Desde ahora cada plugin se debe instalar con su dependencia de ionic native, por ejemplo se debe instalar el plugin correspondiente junto con su provider, por ejemplo con el plugin de la cámara sería de la siguiente manera:

ionic plugin add cordova-plugin-camera -save
npm install @ionic-native/camera --save

Luego de instalar el plugin y el provider debemos agregar este provider en el array de providers en el archivo app.module.ts , asi:

import { Camera } from '@ionic-native/camera';

...

@NgModule({
  declarations: [
    MyApp,
    HomePage
  ],
  imports: [
    BrowserModule,
    HttpModule,
    IonicModule.forRoot(MyApp),
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    DuetyApp,
    HomePage
  ],
  providers: [
    // Keep this to enable Ionic's runtime error handling during development
    { provide: ErrorHandler, useClass: RavenErrorHandler },
    Camera
  ]
})
export class AppModule {}

Y por último, se debe inyectar el provider como dependencia en la clase que se quiera hacer uso de este plugin, así:

import { Camera } from '@ionic-native/camera';
import { Component } from '@angular/core';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage{

  constructor(
    public camera: Camera,
  ) {}

  ...
}

Tip 2: Grid

Con la versión 3 de Ionic el sistema de grillas de ionic v2 ya no es soportado, ahora para brindar soporte a aplicaciones de escritorio y tablets, se usa un nuevo sistema de grillas, mucho más amplio y versátil, por consecuencia si usábamos el anterior sistema debemos actualizarlo, este es un pequeño ejemplo del nuevo sistema de grillas:

Antes (v2)

<ion-grid>
  <ion-row center>
    <ion-col width-20>...</ion-col>
    <ion-col width-80>...</ion-col>
  </ion-row>
</ion-grid>

Ahora (v3)

<ion-grid>
  <ion-row align-items-center>
    <ion-col col-4>...</ion-col>
    <ion-col col-8>...</ion-col>
  </ion-row>
</ion-grid>

Pueden ver la documentación completa en Ionic Grids Docs.

Tip 3: Typography

También han removido selectores de color en textos, esto quiere decir que si usábamos la propiedad color en los textos para cambiar el color, con ionic v3 ya no funcionará, ahora se debe agregar la propiedad ion-text para que esta funcione:

Antes (v2)

<p color="danger">...</p>
<strong color="secondary">...</strong>
<span color="dark">...</span>

Ahora (v3)

<p ion-text color="danger">...</p>
<strong ion-text color="secondary">...</strong>
<span ion-text color="dark">...</span>

Tip 4: Animations

La API de animaciones de Angular ha cambiado en la versión 4 y sí estabamos haciendo uso de esta API ahora debemos instalar el módulo @angular/animations, así:

npm install @angular/animations --save

Luego debemos importar BrowserAnimationsModule en el archivo app.module.ts, asi:

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

...

@NgModule({
  declarations: [
    MyApp,
    HomePage
  ],
  imports: [
    BrowserModule,
    HttpModule,
    BrowserAnimationsModule,
    IonicModule.forRoot(MyApp),
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    DuetyApp,
    HomePage
  ],
  providers: [
    // Keep this to enable Ionic's runtime error handling during development
    { provide: ErrorHandler, useClass: RavenErrorHandler },
  ]
})
export class AppModule {}

Y ahora en las páginas que estemos usando el API de animaciones, ya no importamos las utilidades desde @angular/core sino desde angular/animations, así:

Antes (v2)

import { Component, trigger, state, style, transition, animate } from '@angular/core';

@Component({
  selector: 'home-page',
  templateUrl: 'home.html',
  animations: [
    ...
  ]
})
export class HomePage {
  ...

Ahora (v3)

import { Component } from '@angular/core';
import { trigger, state, style, transition, animate } from '@angular/animations';

@Component({
  selector: 'home-page',
  templateUrl: 'home.html',
  animations: [
    ...
  ]
})
export class HomePage {
  ...

Tip 5: Ionic generator

Si te fijas últimamente cuando creamos una página con el generador de ionic, así:

ionic g page login

Nos crea un archivo más login.module.ts:

Y esto es debido a que ahora ionic en la versión 3 soporta lazy loading, lo cual es maravilloso, pero hablaremos de cómo usar esta característica en el siguiente artículo. Por ahora si quieres continuar sin problemas debemos borrar este archivo y quitar el decorador de @IonicPage que crea en la página login.ts y luego agregar LoginPage en el array de entryComponents y declarations en el archivo app.modules.ts (como siempre lo hemos hecho).

Este último tip es para no tener problemas con la migración de ionic 2 a ionic 3, ya que usar el nuevo decorador @IonicPage y lazy loading es opcional.

En el próximo artículo haremos la implementación exitosa en un proyecto usando @IonicPage y lazy loading.

Spoiler: Usar @IonicPage y lazy loading, baja el peso de la app y reduce el tiempo de carga.

¡Compártelo!