Stigao je Ionic 3!

Stigao nam je Ionic 3! Iako se iz samog naziva nove verzije promjena može činiti velikom zapravo nije, barem ne u onoj mjeri u kojoj je nakon Ionic verzije 1 stigla verzija 2.

Ako pokrećete novi projekt naredbom $ ionic start NazivAplikacije blank –v2 od petka, 07.04.2017., onda već koristite Ionic 3 i ne morate raditi izmjene koje ću opisati u nastavku.

Za sve vas koji imate postojeće projekte temeljene na Ionicu 2 i želite prijeći na Ionic 3 u nastavku možete saznati kako to napraviti.

Ionic 2 -> Ionic 3

Angular 4, koji je izašao prije nekoliko dana, jedan je od važnijih razloga zašto sada imamo i Ionic 3.

1.) package.json

Prije svega potrebno je obrisati postojeću node_modules mapu jer ćemo od sada koristiti nove NPM pakete.

Nakon toga, potrebno je navesti nove NPM pakete koji sada uključuju novi Angular 4 i novi TypeScript. To je moguće učiniti na način otvorite postojeću package.json datoteku i dodate sljedeće:

"dependencies": {
    "@angular/common": "4.0.0",
    "@angular/compiler": "4.0.0",
    "@angular/compiler-cli": "4.0.0",
    "@angular/core": "4.0.0",
    "@angular/forms": "4.0.0",
    "@angular/http": "4.0.0",
    "@angular/platform-browser": "4.0.0",
    "@angular/platform-browser-dynamic": "4.0.0",
    "@ionic-native/core": "3.4.2",
    "@ionic-native/splash-screen": "3.4.2",
    "@ionic-native/status-bar": "3.4.2",
    "@ionic/storage": "2.0.1",
    "ionic-angular": "3.0.1",
    "ionicons": "3.0.0",
    "rxjs": "5.1.1",
    "sw-toolbox": "3.4.0",
    "zone.js": "^0.8.4"
},
"devDependencies": {
  "@ionic/app-scripts": "1.3.0",
  "typescript": "~2.2.1"
}

VAŽNO!

Naravno, ako u postojećem Ionic 2 projektu imate neki NPM paket naveden pod dependencies ili devDependencies navedite i njega unutar package.json datoteke kako bi se i on ponovno instalirao jer vam u suprotnom Ionic 3 projekt neće raditi.

U jednom od svojih projekata koristio sam @ngx-translate/core NPM paket pa sam zato i njega naveo unutar package.json datoteke.

Sada možemo instalirati nove NPM pakete jednostavnom naredbom $ npm install

2.) BrowserModule

U app.module.ts je potrebno uvesti BrowserModule koji zapravo omogućava korištenje mogućnosti koje Angular pruža.

import { BrowserModule } from '@angular/platform-browser';
...
imports: [
  BrowserModule,
  IonicModule.forRoot(MyApp)
],

Ako koristite Http onda trebate uvesti i HttpModule

import { HttpModule } from '@angular/http';
...
imports: [
  BrowserModule,
  HttpModule,
  IonicModule.forRoot(MyApp)
],

3.) Ionic Native 3.x

Nekoliko dana prije nego što je stigao Ionic 3 dobili smo Ionic Native 3.x. To je zapravo novi način korištenja Cordova pluginova tj. Ionic Native pluginova. Više o tome možete saznati ovdje.

Uglavnom, u postojećoj Ionic 2 aplikaciji trebate opet instalirati sve pluginove tako da budu prilagođeni novoj strukturi ostatka aplikacije. Do sada ste pluginove instalirali na Ionic Native 2.x način, a to znači korištenje naredbe kao što je npr. $ ionic plugin add cordova-plugin-device te se onda taj plugin u aplikaciju poziva na sljedeći način import { Device } from ‘ionic-native’;

Ionic Native 3.x način instalacije i korištenja podrazumijeva instalaciju plugina još i s naredbom $ npm install –save @ionic-native/device pri čemu se uvoz plugina vrši na sljedeći način

import { Device } from '@ionic-native/device';

constructor(private device: Device) { }

...

console.log('Device UUID is: ' + this.device.uuid);

Znači, od sada svoje Ionic Native 3.x pluginove instalirate koristeći obje ranije navedene naredbe. Također obavezno provjerite dokumentaciju svakog plugina jer se vrlo lako može dogoditi da po novome koristi neke nove metode, a stare više ne i zbog toga vam se može dogoditi da aplikacija prikazuje grešku vezanu uz neki od pluginova.

4.) module.ts i IonicPage

Kada bi u Ionic 2 aplikaciji kreirali novu stranicu dobili biste tri datoteke (.html,.scss,.ts), dok ako idete kreirati novu stranicu u verziji 3 dobit ćete dodatnu datoteku s nastavkom .module.ts, a kako se ovdje radi o prebacivanju Ionic 2 aplikacije u Ionic 3 znači da svaka vaša ranije kreirana stranica treba dobiti svoju .module.ts datoteku.

U nastavku možete vidjeti primjer jedne takve datoteke

import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { HomeTabsPage } from './home-tabs';
 
@NgModule({
  declarations: [
    HomeTabsPage,
  ],
  imports: [
    IonicPageModule.forChild(HomeTabsPage),
  ],
  exports: [
    HomeTabsPage
  ]
})
export class HomeTabsPageModule {}

Nakon toga u .ts datoteci koju imate od ranije za sve stranice dodajte IonicPage dekorator na sljedeći način

import { IonicPage } from 'ionic-angular';
...
...
@IonicPage()
@Component({

5.) Uklanjanje uvoza stranica

Nakon prethodnog koraka možete proći kroz sve stranice tj. njihove .ts datoteke i maknuti uvoze drugih stranica import {AboutPage} from ‘../about/about’;. Isto napravite i unutar app.module.ts datoteke u kojoj ćete također maknuti stranice iz declarations i entryComponents nizova.

Način na koji ćete od sada međusobno povezivati stranice ne razlikuje se puno od “starog” načina osim što ćete naziv svake stranice proslijediti kao string.

Znači, umjesto let modal = this.modalCtrl.create(ReplacementModalPage); koristit ćete let modal = this.modalCtrl.create(‘ReplacementModalPage’); .

Mogući problemi

Ako ste napravili sve ranije navedeno vi od sada koristite novi Ionic 3 i Angular 4. Ipak, unatoč tome vaš Ionic 3 projekt i dalje ne mora raditi kako bi trebao, a uzroka može biti nekoliko.

ionic-native

Ako dobijete grešku “Uncaught Error: Cannot find module “ionic-native”” znači da još negdje u aplikaciji koristite Ionic Native 2.x način uvoza pluginova. Kada iz svih datoteka izbacite import { NazivPlugina } from ‘ionic-native’; ovu grešku više nećete vidjeti.

forChild

Kreirali ste novu stranicu i dobili grešku Property ‘forChild’ does not exist on type ‘typeof IonicModule’ rješenje se da umjesto IonicModule koristite IonicPageModule .

ion-img

Ako dobijete grešku “TypeError: Cannot read property ‘isImgsUpdatable’ of null” to znači da unutar neke .html datoteke koristite <ion-img> tag, a koji se ne nalazi unutar <ion-content> taga. Više o tome ovdje.

Kako bi ovu grešku izbjegli koristite običan <img> tag na svim mjestima koja se ne nalaze unutar <ion-content> taga.

ionic grid

Sve ranije ste dobro napravili i gore navedenih grešaka više nema, ali aplikacija i dalje ne izgleda kako bi trebala i sve je nekako razbacano, nije na svojem mjestu,… Zašto je to tako? Odgovor se nalazi u novom Ionic Grid sistemu.

Npr.

<ion-col width-50>col</ion-col>

će od sada biti

<ion-col col-6>col</ion-col>

Više o tome u službenoj dokumentaciji.

Prođite kroz .html datoteke i napravite potrebne izmjene kako bi vaša nova Ionic 3 aplikacija zasjala u punom sjaju!

Zaključak

Kao što ste mogli vidjeti migracija na Ionic 3 može se obaviti relativno brzo i relativno jednostavno kada znate što treba napraviti. Ipak, prije nego objavite novu verziju aplikacije na Google Play Store ili Apple Store uložite nešto vremena u testiranje svih funkcionalnosti vaše Ionic 3 aplikacije pogotovo zato što ste instalirali nove verzije pluginova čije metode se mogu razlikovati od onih koje trenutno koristite u mobilnoj aplikaciji i koje je zbog toga potrebno prilagoditi.