Menu

Migrando tu App hacia Ionic 4

ionic - February 28, 2019 por Carlos Rojas | Edita este Post.
ionic4.0.0ionic-cli4.1.0

Como anteriormente anunciamos ionic ya esta listo para producción, pero si tienes Apps en ionic 3 debes realizar una serie de pasos para poder disfrutar de la potencia de los Web Components.

Lo primero que tenemos que hacer es actualizar nuestro CLI si no lo has hecho aun tendras que ejecutar:

$npm install -g ionic

Crear un nuevo proyecto con Ionic 4

Ahora que tienes la última versión del CLI debes crear una App nueva con el template blank.

$ionic start myApp blank

src/providers - src/app/services.

Ahora que tenemos nuestra App con la estructura general nueva de Ionic vamos a empezar a mover nuestro providers hacia la nueva estructura de services

Ionic 3

Ionic 4

Debemos mover nuestro providers de src/providers hacia src/app/services

y debe quedar algo asi.

adicionalmente no te olvides de agregar. en cada servicio.

@Injectable({ providedIn: 'root' })

Copiar pages y otros componentes src/app/

Debido al cambio de estructura de Ionic ahora toca mover todas las paginas y demas componentes desde pages y otras carpetas hacias src/app/.

Ionic 3

Ionic 4

Una vez realices este cambio debes utilizar el router de Angular y actualizar toda la navegacion de tu App.

rxJS

Si usaste rxJS en tu App te recomiendo usar el tslinter oficial.

npm i -g rxjs-tslint
rxjs-5-to-6-migrate -p [path/to/tsconfig.json]

Markup

Despues que tengas todos tus controladores y servicios funcionando, ahora debes actualizar todo el Markup de tu App, para esto te recomiento tambien usar el tslinter del equipo de Ionic.

npm i -D @ionic/v4-migration-tslint
vi ionic-migration.json
{
  "rulesDirectory": ["@ionic/v4-migration-tslint/rules"],
  "rules": {
    "ion-action-sheet-method-create-parameters-renamed": true,
    "ion-alert-method-create-parameters-renamed": true,
    "ion-back-button-not-added-by-default": { "options": [true], "severity": "warning" },
    "ion-button-attributes-renamed": true,
    "ion-button-is-now-an-element": true,
    "ion-buttons-attributes-renamed": true,
    "ion-col-attributes-renamed": true,
    "ion-datetime-capitalization-changed": true,
    "ion-fab-attributes-renamed": true,
    "ion-fab-button-is-now-an-element": true,
    "ion-fab-fixed-content": true,
    "ion-icon-attribute-is-active-removed": true,
    "ion-item-attributes-renamed": true,
    "ion-item-divider-ion-label-required": true,
    "ion-item-ion-label-required": true,
    "ion-item-is-now-an-element": true,
    "ion-item-option-is-now-an-element": true,
    "ion-item-option-method-get-sliding-percent-renamed": true,
    "ion-item-options-attribute-values-renamed": true,
    "ion-label-attributes-renamed": true,
    "ion-list-header-ion-label-required": true,
    "ion-loading-method-create-parameters-renamed": true,
    "ion-menu-events-renamed": true,
    "ion-menu-toggle-is-now-an-element": true,
    "ion-navbar-is-now-ion-toolbar": true,
    "ion-option-is-now-ion-select-option": true,
    "ion-overlay-method-create-should-use-await": true,
    "ion-overlay-method-present-should-use-await": true,
    "ion-radio-attributes-renamed": true,
    "ion-radio-group-is-now-an-element": true,
    "ion-radio-slot-required": true,
    "ion-range-attributes-renamed": true,
    "ion-segment-button-ion-label-required": true,
    "ion-spinner-attribute-values-renamed": true,
    "ion-tabs-refactored": { "options": [true], "severity": "warning" },
    "ion-text-is-now-an-element": true
  }
}
npx tslint -c ionic-migration.json -p tsconfig.json

Bueno como vez la migración de un app en ionic 3 no es un proceso facíl y por lo tanto te recomiendo que hagas pequeños simulacros con Apps basicas antes de meterte con algo robusto, a mi personalmente me tomo bastante.

Bueno espero que esta info te ilumine un poco sobre este proceso y sigán programando :)

¡Compártelo!