10 Pesan Error Ionic yang Paling Sering Muncul dan Cara Mengatasinya

Kita semua sudah sering melihat berbagai pesan error saat mengembangkan aplikasi. Beberapa sering muncul, dan yang lainnya hanya sekali-kali. Namun bagi pemula pesan-pesan ini bisa cukup membingungkan karena pesan yang disampaikan Ionic terkadang tidak jelas bagian mananya yang menyebabkan error.

Berikut ini 10 pesan error Ionic yang paling sering muncul dan cara mengatasinya.

1. Cannot read property ‘xyz’ of undefined

Error klasik yang cukup mudah dicari penyebabnya meskipun tidak langsung mengatakan sumber masalahnya di baris berapa. Pesan error ini muncul saat kita memiliki kode:

// Di dalam class
item: string;
 
// Di dalam view
{{ item.myValue }}

Pada kode di atas, kita mencoba mengakses properti sebuah objek yang tidak memiliki isi atau undefined (bisa juga null).

Periksa dulu apakah objek tersebut null atau tidak menggunakan elvis operator untuk mengakses properti tersebut dengan aman tapan menyebabkan error saat diakses.

// ? operator prevents crashing here!
{{ item?.myValue }}

2. Uncaught (in promise): invalid link: MyPage

Error ini muncul saat kita mencoba pindah ke sebuah page yang tidak ada. Mungkin nama page nya salah tulis?

Umumnya saat memakai lazy loading dan mengirim nama page sebagai sebuah string, agak sulit untuk mencari sumber masalahnya karena linting tidak memberikan tanda di mana bagian yang salah.

Solusinya, cari nama page yang tertulis di pesan dan pastikan bahwa page tersebut ada dan memiliki nama yang persis sama.

3. _co.myFunction is not a function

Sumber error ini cukup mudah dibacari karena ia memberitahu bahwa kita memanggil sebuah fungsi dari template yang belum dibuat di dalam kelas.

Untuk menyelesaikannya, cukup pastikan bahwa fungsi yang ditulis sudah ada di kelas dan memiliki nama yang persis sama dengan yang ada di template.

4. Cannot find control with name: ‘myName’

Jika menggunakan reactive form, pesan error ini mengatakan bahwa kita mencoba menggunakan sebuah formControl yang belum didefinisikan (belum dideklarasi).

// Inside your class
this.registrationForm = this.fb.group({
  username: ['Simon', [Validators.required]]
});
 
// Inside your view
<form [formGroup]="registrationForm">
  <ion-input type="text" formControlName="myName"></ion-input>
</form>

Pada kode di atas, pembaca bisa lihat bahwa form memiliki control username, tapi name yang dipakai di view adalah myName. Kedua name ini harus memiliki nama yang sama!

5. Type TestPage is part of the declarations of 2 modules

Sekarang masalahnya mulai kompleks karena pesan error lebih sulit dibaca apalagi untuk pemula. Apa yang dimaksud dengan module?

Saat menggunakan lazy loading, page yang di generate akan memiliki module-nya sendiri di dalam folder page tersebut. Tanpa lazy loading, page tidak akan memiliki file module-nya sendiri.

Triknya: jika page yang kita buat tidak memiliki file module (yang artinya tidak memakai lazy loading) kita perlu menuliskannya secara manual di file app.module.ts.

Tapi jika page sudah ada dan memiliki module-nya sendiri serta kita impor disuatu tempat (untuk alasan apapun), pesan error ini akn muncul dan memberitahu bahwa kita tidak bisa memiliki sebuah page di dua module.

Oleh karena itu, cari apakah ada tempat dimana kita mengimpor Page tersebut dan pastikan satu page hanya diimpor di satu file module.

6. No Provider for xyz

Pesan ini tidak jelas mengatakan apa yang harus diperbaiki sehingga sulit untuk dicari masalahnya. Jadi, masalahnya adalah kita perlu memberitahu Angular tentang provider aplikasi kita sehingga Injector internal bisa memberikan provider yang benar ke kelas kita.

Pesan error ini ada hubungannya dengan dependency injection dan proses internal besar yang terjadi dibelakang layar tentang bagaimana kita bisa menggunakan provider dari dalam contstructor.

Jadi solusinya?

Tambahkan Provider yang dibuat ke array providers di dalam app.module.ts sehingga aplikasi kita tahu tentang provider tersebut. Di rilis Ionic CLI yang abru, proses ini terjadi secara otomatis, tapi jika terjadi suatu hari nanti pembaca sudah tahu bagaimana menyelesaikannya.

7. Cannot find a differ supporting object ‘[object Object]’ of type ‘object’

Melakukan looping array di dalam view dengan *ngFor merupakan salah satu fitur keren di Angular, tapi kita bisa dengan mudah membuat semuanya rusak tanpa sadar. Pesan error ini tidak begitu membantu, tapi biasanya akan ada pesan error tambahan yang lebih berguna:

“Only arrays and iterables are allowed Error: Cannot find a differ supporting object ‘[object Object]’ of type ‘object’. NgFor only supports binding to Iterables such as Arrays.”

Intinya dari pesan di atas adalah kita hanya bisa melakukan loop jika objek tersbut bersifat Iterable salah satunya Array. Jika objek tersbut bukan Iterable maka kita tidak bisa melakukan looping.

Mari kita lihat contoh kode:

// Di dalam class
items = {};
 
// Di dalam view
<ion-list>
  <ion-item *ngFor="let foo of items"></ion-item>
</ion-list>

Masalah pada kode di atas mudah sekali: Kita mencoba mengiterasi (melakuan looping) ke sebuah objek, tapi ngFor meminta sebuah array!

Biasanya pesan ini muncul saat kita mencoba membaca data dari REST API dan menggunakan data yang salah. Mungkin apa yang kita bayangkan sebuah array ternyata bukan array.

Jadi, periksa kembali responnya, gunakan key yang sesuai dengan apa yang ada di REST API dan mengirimkan array ke ngFor bukannya objek biasa.

8. Template parse errors: ‘custom-component’ is not a known element

Sekarang kita membahas 2 error yang akan langsung menghentikan aplikasi kita saat dibuka.

Pembaca mungkin sudah bisa melihat dari kata-kata Tempate parse error, ini pasti ada hubungannya dengan file view.

Error ini bisa terjadi kita kita membuat sebuah Component dan ingin memakainya di view. Tapi masalahnya component yang dibuat oleh Ionic akan di tambahkan ke ComponenetsModule dan kita harus mengimpor module ini saat ingin memakai Component tersebut.

Kita bisa mengimpor file ini di app.module.ts atau dengan lazy loading import module component kita di dalam file module page.

Angular akan tahu bagaimana mencari tag khusus yang ada di view dengan memberikan component yang sesuai dengan apa yang kita buat.

9. Template parse errors: Can’t bind to ‘enabled’ since it isn’t a known property of ‘button’.

Error lain yang bisa muncul akibat kesalahan tag adalah error di atas dan error ini lebih mudah untuk dicari sumber masalahnya.

Bayangkan kode seperti ini:

<button ion-button [enabled]="false">Test</button>

Tidak ada yang aneh sekali lihat, tapi permasalahannya enabled bukan properti yang bisa di bind di button!

Untuk memperbaikinya, kita bisa gunakan:

<button ion-button [disabled]="false">Test</button>

Pada intinya pesan error ini mengatakan bahwa kita mencoba mem-bind sesuatu di tag yang tidak tersedia. Error ini bisa muncul disemua jenis tag, component dan semua hal yang dipakai di view.

10. cordova_not_available

Untuk mengakhiri daftar ini, mari kita bahas salah satu pesan error yag mungkin sudah pernah dilihat semua pembaca.

Jika pembaca menulis kode dan menggunakan live preview di browser, biasanya tidak ada masalah. Tapi, saat mulai mengintegrasikan plugin Cordova, kita tidak bisa menguji atau menggunakannya di preview browser.

Cordova.js hanya di-inject saat kita mem-build aplikasi ke ke sebuah device (atau simulator), dan tidak semua fitur tersebut bisa berjalan di dalam preview sehingga kita akan mendapat pesan error ini.

Untuk menyelesaikannya: cukup jalankan aplikasi yang dibuat ke device asli (atau emulator). atau cara yang lebih canggih ialah dengan mock plugin yag dipakai.

Kita bisa meng-override Plugin sehingga browser akan mengembalikan result dummy sehingga tidak menyebabkan error. Terdapat sebuah package dari Chris Griffith untuk melakukan objek Mock diberbagai fitur Cordova.

Diterjemahkan dari 10 Common Ionic Problems & Error Messages (And How to Fix Them) karya Simon