SQLite plugin and Ionic Framework not working on real device - ionic-framework

Question

I have a simple app that needs to store name and email.
I have installed cordova-sqlite-storage with:
ionic cordova plugin add cordova-sqlite-storage
and it works fine on the emulator.
As soon as I deploy it on the device with:
ionic cordova run android --device
I get:
plugin_not_installed
ERROR Error: Uncaught (in promise): TypeError: Cannot read property 'executeSql' of undefined
TypeError: Cannot read property 'executeSql' of undefined
at main.js:443
at new t (polyfills.js:3)
at UsersProvider.webpackJsonp.56.UsersProvider.getTotalUser (main.js:442)
at main.js:164
at t.invoke (polyfills.js:3)
at Object.onInvoke (vendor.js:5085)
at t.invoke (polyfills.js:3)
at r.run (polyfills.js:3)
at polyfills.js:3
at t.invokeTask (polyfills.js:3)
at c (polyfills.js:3)
at c (polyfills.js:3)
at polyfills.js:3
at t.invokeTask (polyfills.js:3)
at Object.onInvokeTask (vendor.js:5076)
at t.invokeTask (polyfills.js:3)
at r.runTask (polyfills.js:3)
at o (polyfills.js:3)
at e.invokeTask (polyfills.js:3)
at i.isUsingGlobalCallback.invoke (polyfills.js:3)
This is my "home.ts"
import { UsersProvider } from './../../providers/users/users';
import { SyncPage } from './../sync/sync';
import { Component } from '#angular/core';
import { NavController, AlertController, LoadingController, ModalController, Platform } from 'ionic-angular';
#Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {
newUser: any = {
first_name: '',
last_name: '',
email: '',
gdpr: false
};
totalRegistered: number = 0;
lastSync = 'mai';
loading = null;
constructor(
public navCtrl: NavController,
private alertCtrl: AlertController,
private loadingCtrl: LoadingController,
private modalCtrl: ModalController,
private platform: Platform,
private userProvider: UsersProvider
) {}
ionViewDidLoad() {
this.platform.ready().then(()=>{
this.userProvider.getTotalUser().then((data)=>{
this.totalRegistered = data;
});
});
}
add() {
this.loading = this.loading = this.loadingCtrl.create({
content: 'Registrazione in corso',
enableBackdropDismiss: true
});
this.loading.present();
this.userProvider.addUser(this.newUser).then((data) =>{
var message = 'Non è stato possibile aggiungere l\'utente.';
if(data){
message = "Utente aggiunto correttamente";
this.totalRegistered++;
}
this.loading.dismiss();
this.alertCtrl.create({
message: message,
buttons: ['Ok']
}).present();
this.clear();
});
}
clear() {
this.newUser.first_name = '';
this.newUser.last_name = '';
this.newUser.email = '';
this.newUser.gdpr = false;
}
onOpenSync(){
this.modalCtrl.create(SyncPage).present();
}
checkEmail() {
let regex = /^\w+([\.-]?\w+)*#\w+([\.-]?\w+)*(\.\w{2,3})+$/;
if (this.newUser.email.length > 0 && !regex.test(this.newUser.email)) {
this.alertCtrl.create({
message: "L'indirizzo email non è valido.",
buttons: ['Ok']
}).present();
}
}
}
and this is the provider:
import { Injectable } from '#angular/core';
import { SQLite, SQLiteObject } from '#ionic-native/sqlite';
#Injectable()
export class UsersProvider {
public db: SQLiteObject;
constructor(private sqlite: SQLite) {
this.sqlite.create({
name: 'apritimoda.db',
location: 'default'
}).then((db: SQLiteObject) => {
this.db = db;
db.executeSql('create table if not exists users(id INTEGER PRIMARY KEY AUTOINCREMENT, first_name VARCHAR(64), last_name VARCHAR(64), email VARCHAR(64), gdpr INT(1), synced INT(1) DEFAULT 0 )', [])
.then(() => console.log('Executed SQL'))
.catch(e => console.log(e));
}).catch(e => {
console.log('DB non trovato: -->' + e);
})
}
findUser(email:string){
return new Promise<Boolean>((resolve, reject) => {
this.db.executeSql('SELECT email FROM users WHERE email=?', [email])
.then(res => {
var found = true;
if(res.rows.length == 0){
found = false;
}
console.log('AM: utente esiste? '+found);
resolve(found);
})
.catch(e => {
console.log('AM: errore verifica email');
reject(e);
})
});
}
addUser(user:any){
return new Promise((resolve,reject) =>{
this.findUser(user.email).then((userExists) =>{
if(!userExists){
this.db.executeSql('INSERT INTO users (id, first_name, last_name, email, gdpr) VALUES (NULL, ?,?,?,?)', [
user.first_name,
user.last_name,
user.email,
user.gdpr,
])
.then(res => {
console.log('AM: utente aggiunto');
resolve(true);
})
.catch(e => {
console.log(e);
console.log('AM: errore creazione utente');
reject(false);
})
}
});
});
}
getTotalUser(){
return new Promise<number>((resolve,reject)=>{
this.db.executeSql('SELECT count(id) as total FROM users', [])
.then(res => {
var totalRegistered = 0;
if(res.rows.legth != 0){
totalRegistered = res.rows.item(0).total;
}
resolve(totalRegistered);
})
.catch(e =>{
console.log('AM: Errore ->'+ JSON.stringify(e));
reject(e);
});
});
}
getUserToSync(){
return new Promise<any[]>((resolve, reject) => {
this.db.executeSql('SELECT * FROM users WHERE synced = 0', [])
.then(res => {
var contacts = []
if(res.rows.length > 0){
for(var i=0; i<res.rows.length; i++) {
contacts.push({
id:res.rows.item(i).id,
first_name:res.rows.item(i).first_name,
last_name:res.rows.item(i).last_name,
email:res.rows.item(i).email,
gdpr:res.rows.item(i).gdpr,
});
}
}
resolve(contacts);
})
.catch(err => {
console.log('Error: '+err);
reject(err)
})
})
}
markAsSynced(ids){
if(ids.length > 0) {
var prepareQuery = "UPDATE users SET synced=1 WHERE id IN ("+this.prepareQuery(ids.length)+")";
this.db.executeSql(prepareQuery, ids)
.then(res => {
console.log(JSON.stringify(res));
})
.catch(e => {
console.log(JSON.stringify(e));
});
}
}
prepareQuery(ids){
var placeholders = [];
for(var i=0; i<ids; i++){
placeholders.push('?');
}
return placeholders.join();
}
}
Here the plugin installed:
<plugin name="cordova-plugin-whitelist" spec="1.3.3" />
<plugin name="cordova-plugin-statusbar" spec="2.4.2" />
<plugin name="cordova-plugin-device" spec="2.0.2" />
<plugin name="cordova-plugin-splashscreen" spec="5.0.2" />
<plugin name="cordova-plugin-ionic-webview" spec="^3.0.0" />
<plugin name="cordova-plugin-ionic-keyboard" spec="^2.0.5" />
<plugin name="cordova-plugin-network-information" spec="2.0.1" />
<plugin name="cordova-sqlite-storage" spec="3.2.0" />
<engine name="android" spec="7.1.4" />
Looks like that the getTotalUser is called before the DB creation in ionViewDidLoad function in home.ts.
What am I missing?

Answer 1

Did you install the plugin this way?
$ ionic cordova plugin add cordova-sqlite-storage
$ npm install #ionic-native/sqlite
then try this code
export class UsersProvider {
public db: SQLiteObject;
constructor(private sqlite: SQLite) {
platform.ready().then(() => {
StatusBar.styleDefault();
let db = new SQLite();
db.openDatabase({
name: "data.db",
location: "default"
}).then(() => {
db.executeSql("CREATE TABLE ....)", {}).then((data) => {
console.log("TABLE CREATED: ", data);
}, (error) => {
console.error("Unable to execute sql", error);
})
}, (error) => {
console.error("Unable to open database", error);
});
});
}
}

Answer 2

Call DB creation in the app.module.ts
in provider add the following function
createAndOpenDb(){
this.sqlite.create({
name: 'apritimoda.db',
location: 'default'
}).then((db: SQLiteObject) => {
this.db = db;
db.executeSql('create table if not exists users(id INTEGER PRIMARY KEY AUTOINCREMENT, first_name VARCHAR(64), last_name VARCHAR(64), email VARCHAR(64), gdpr INT(1), synced INT(1) DEFAULT 0 )', [])
.then(() => console.log('Executed SQL'))
.catch(e => console.log(e));
}).catch(e => {
console.log('DB non trovato: -->' + e);
})
}
then call that function in the app.module.ts
userProvider.createAndOpenDb()