lifelong learner — urip iku urup, currently working on accenture.

Upgrade angularfire2 versi 2.x ke 4.x

1
Degananda.com -

Angularfire 4.x

Saat ini angularfire2 telah memasuki versi 4.x bagi anda yang  memiliki project dengan angularfire2 yang ingin mengupgrade dapat dipastikan harus melakukan beberapa perubahan. Alasan mengupgrade angularfire2 adalah

  1. karena depedency dari package lainnya
  2. terjadi error saat melakukan build/serve
  3. memang ingin mengupgrade

Proses upgrade akan menjadi suatu momok jika project anda sangat besar dan banyak sekali modul yang dimanfaatkan di class/page/component/services dsb. Karena yang paling utama adalah modul dan package yang ada dalam angularfire2 versi 4.x sangat berbeda dengan angularfire2 versi 2.x. Bahkan untuk beberapa modul mengenai authorization/auth tidak lagi dihandle oleh angularfire2 melainkan berada di package firebase.

Perbedaan modul dan package inilah yang harus kita sesuaikan saat melakukan upgrade dari versi 2.x menuju ke versi 4.x. Paling penting, sebelum anda mengupgrade project pastikan telah melakukan backup/git untuk menjaga jika terjadi hal-hal yang tidak di inginkan. Tulisan ini kami buat berdasarkan pengalaman pribadi dalam mengupgrade angularfire2 2.x menuju ke versi 4.x. Modul yang kami gunakan adalah

  1. Authorization (Login/Signup dengan google atau email).
  2. Angularfire database

Sebenarnya kami juga menggunakan firebase storage untuk mekanisme penyimpanan data (upload dan download)  tetapi tidak menggunakan angularfire2 karena memang tidak disupport sehingga digunakanlah firebase sdk untuk javascript. Untuk sdk javascript tidak terjadi perubahan.

Upgrade

Sebelum mengupgrade pastikan telah melakukan backup/git untuk menghindari hal-hal yang tidak di inginkan. Berikut ini adalah langkah -langkah upgrade angularfire2 versi 2.x menuju 4.x dalam suatu project.

langkah 1 – uninstall firebase dan angularfire2

perintah yang digunakan untuk menguninstall firebase dan angularfire2 adalah

npm uninstall firebase angularfire2 --save

langkah 2 – install firebase dan angularfire2

npm install firebase angularfire2 --save

langkah 3 – mengubah package, modul dan firebase config

pada langkah ini firebase dan angularfire2 telah terupdate , khususnya untuk angularfire2 telah menjadi versi 4.x. Ada tiga hal yang harus disesuaikan atau diubah yakni pada modul (firebaseListObservable,dsb), package dan firebase config. Ketigannya akan dibreakdown dibawah. Sehingga pastikan ketiga hal tersebut telah diubah agar proses upgrade dapat berhasil.

3.1 Package & Modul + Pemanggilan fungsi dari instances modul

Package dan modul ini menjadi satu, berikut ini adalah tabel perubahan yang harus anda sesuaikan

Sebelum Sesudah
 modul angularFire dari package ‘angularfire2’  di pecah menjadi package – package kecil.

untuk database

import { AngularFireDatabase, FirebaseListObservable, FirebaseObjectObservable } from ‘angularfire2/database’;

untuk Auth, seluruh keperluan untuk auth diserahkan pada modul ini kecuali untuk provider harus didapatkan dari package firebase.

import { AngularFireAuth } from ‘angularfire2/auth’
pemanggilan .list() atau .object() dari modul angularfire.db.list()

nb : .db dihilangkan karena modul telah dibagi ke package-package kecil

langsung dipanggil dari angualrfire2/database. Contoh :

constructor(private af : AngularFireDatabase, private afAuth : AngularFireAuth) {

constructor(private af : AngularFireDatabase, private afAuth : AngularFireAuth) {

af.list(‘/’)

}

fungsi signup/login/logout parameter berubah, gunakan intellij untuk melihat nama fungsi dan parameter yang dibutuhkan. Seluruh fungsi tersebut berada pada package angularfire2/auth.

dengan pemisahan package seperti diatas angular mengklaim akan meningkatkan performa.

3.2 Firebase config

terahir adalah untuk bagian melakukan inisialisasi (initialize firebase app) dan juga konfigurasi untuk auth juga berbeda. Berikut ini adalah perubahannya.

initialize app

pada proses menginisiasi aplikasi yang menggunakan angularfire2 kali ini terdapat tiga modul yang harus di import. Perhatikan kode dibawah ini

import { AngularFireModule, AuthProviders, AuthMethods } from 'angularfire2';

imports: [
    AngularFireModule.initializeApp(firebaseConfig, 'riserf'),
    AngularFireDatabaseModule,
    AngularFireAuthModule, 
]

Jika sebelumnya kita hanya mengimport AngularFireModule maka kali ini terdapat dua modul lain yang harus di import. ini dikarenakan angularfire2 pada versi 4.x ini memisahkan package-package menjadi lebih kecil.

authorization/auth

kita tidak perlu memberikan parameter mengenai “firebaseAuthConfig” pada intializeApp karena telah dihandle oleh AngularFireAuthModule. Namun, saat melakukan login dan membutuhkan provider maka lokasi dari provider tidak lagi berada di package auth / af.auth melainkan langsung diambil pada package firebase.