Again! SQLite in Ionic 2.2.0, How to Use It?

Ionic Framework ionic-v3
1

Hi folks,

I’ve been googling around and cannot find a decent step by step tutorial on how to use SQLite in Ionic 2. The tutorials are out of date, I followed the Ionic 2 docs and tutorial here:

I still cannot make it work. There are a few confusions I need someone to clarify for me:

  1. In order to see SQLite in action, do I need to add platform while making a new project?
  2. If I use web browser to test the app (using “ionic serve” command), the SQLite will not work?
  3. The “Cordova-SQLite-Storage” is just a plugin for Ionic 2 in order to use SQLite, which is on the actual device or emulator?
  4. If the database does not exist, then I follow the instruction here: http://ionicframework.com/docs/v2/native/sqlite/, will it create a new database for me?
  5. I actually followed the docs, installed everything, but when I run the app in browser, it keeps giving me the following error:
    Native: tried accessing the SQLite plugin but it’s not installed.
    Install the SQLite plugin: ‘ionic plugin add cordova-sqlite-storage’

Could someone please show me how to use SQLite in Ionic 2? Thank you.

GJ Wu

2

Hi GJ Wu,
You will not be able to test ths sqlite plugin on your browser as this is a native plugin so… using android or IOS OS.
Try with your device or emulator…
and the database will be created if doesn’t exists, normally:wink:

3

Thanks, I was also looking for the same thing. But to be unable to test in browser sucks, Ionic team must do something about this to make app development easier.

4

They kinda did.

5

Hi folks,

It seems that Ionic team is making changes to their docs, I found that since two or three days ago, maybe they are making changes for the upcoming framework update. Keep an eye on it, I hope everything works beautifully later. Meanwhile, I am using PouchDB with SQLite adapter, it seems that they have some issues for adapter information returned from database.info, even if I uploaded the app to my phone, it does not show the true type of storage I use. I am waiting for the update. I hope this will help.

1 Like
6

Hi folks,

im trying to use the SQLite Storage but it doesn’t work. I’ve followed all the steps in the docs, but when I try to run nothing happens.

I’ve installed the ionic-native/storage via npm. And added the plugin to my App.
In my app.module.ts:
…
import { SQLite } from ‘@ionic-native/sqlite’;
…
providers: [
SQLite,
…

I need help!!! Thanks

7

This is what i have tried last night. I updated my repository Ionic 2 pre-populated example (repository now up to date with last version of ionic. It uses cordova-sqlite-ext but the code is similar to what you will need for cordova-sqlite-storage )

My home.ts:

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { SQLite, SQLiteObject } from '@ionic-native/sqlite';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  private options = { name: "data.db", location: 'default', createFromLocation: 1 };
  private queryDatabase= "SELECT * FROM tableName";

  constructor(public navCtrl: NavController, private sqlite: SQLite) {
    this.sqlite.create(this.options).then((db: SQLiteObject) => {
      db.executeSql(this.queryDatabase, {}).then((data) => {
        //Do Something with your data here
      })
    });
  }
}

Also you need to have a database on your www folder or if you don’t want to use a pre-populated database you don’t need to have one.

8

Hi ruialves_programming
1.Is this code working in browser (ionic serve) fore easy debugging ?
2. why you didn’t check for “platform.ready” before opening database !?

9

Hi,

1.Is this code working in browser (ionic serve) fore easy debugging ?

As far as i know sqlite won’t work in the browser because it needs Cordova to work. But you can use an emulator like Genymotion. For easy debugging you could create a mookup service that would replace sqlite when you are working in the browser.

  1. why you didn’t check for “platform.ready” before opening database !?

I’m not sure (because it was a long time ago) but i think it was because the App Component already is checking platform.ready.

1 Like