Database creation issue

Ionic Framework ionic-v3
1

Hi,
I am new in ionic v2. I want to create database in ionic v2 how i am achieve it? Please give me an example.
I tried it from https://blog.nraboy.com/2015/12/use-sqlite-in-ionic-2-instead-of-local-storage/ but it will not work i will give me error =>

EXCEPTION: Error during instantiation of MyApp!.
app.bundle.js:32079 EXCEPTION: Error during instantiation of MyApp!.BrowserDomAdapter.logError @ app.bundle.js:32079BrowserDomAdapter.logGroup @ app.bundle.js:32089ExceptionHandler.call @ app.bundle.js:7857(anonymous function) @ app.bundle.js:16955NgZone._notifyOnError @ app.bundle.js:17596collection_1.StringMapWrapper.merge.onError @ app.bundle.js:17491run @ app.bundle.js:1186(anonymous function) @ app.bundle.js:17509zoneBoundFn @ app.bundle.js:1156lib$es6$promise$$internal$$tryCatch @ app.bundle.js:2556lib$es6$promise$$internal$$invokeCallback @ app.bundle.js:2568lib$es6$promise$$internal$$publish @ app.bundle.js:2539(anonymous function) @ app.bundle.js:1288microtask @ app.bundle.js:17549run @ app.bundle.js:1183(anonymous function) @ app.bundle.js:17509zoneBoundFn @ app.bundle.js:1156lib$es6$promise$asap$$flush @ app.bundle.js:2350
app.bundle.js:32079 ORIGINAL EXCEPTION: Error: constructor(options={}) not implemented for this storage engineBrowserDomAdapter.logError @ app.bundle.js:32079ExceptionHandler.call @ app.bundle.js:7866(anonymous function) @ app.bundle.js:16955NgZone._notifyOnError @ app.bundle.js:17596collection_1.StringMapWrapper.merge.onError @ app.bundle.js:17491run @ app.bundle.js:1186(anonymous function) @ app.bundle.js:17509zoneBoundFn @ app.bundle.js:1156lib$es6$promise$$internal$$tryCatch @ app.bundle.js:2556lib$es6$promise$$internal$$invokeCallback @ app.bundle.js:2568lib$es6$promise$$internal$$publish @ app.bundle.js:2539(anonymous function) @ app.bundle.js:1288microtask @ app.bundle.js:17549run @ app.bundle.js:1183(anonymous function) @ app.bundle.js:17509zoneBoundFn @ app.bundle.js:1156lib$es6$promise$asap$$flush @ app.bundle.js:2350
app.bundle.js:32079 ORIGINAL STACKTRACE:BrowserDomAdapter.logError @ app.bundle.js:32079ExceptionHandler.call @ app.bundle.js:7869(anonymous function) @ app.bundle.js:16955NgZone._notifyOnError @ app.bundle.js:17596collection_1.StringMapWrapper.merge.onError @ app.bundle.js:17491run @ app.bundle.js:1186(anonymous function) @ app.bundle.js:17509zoneBoundFn @ app.bundle.js:1156lib$es6$promise$$internal$$tryCatch @ app.bundle.js:2556lib$es6$promise$$internal$$invokeCallback @ app.bundle.js:2568lib$es6$promise$$internal$$publish @ app.bundle.js:2539(anonymous function) @ app.bundle.js:1288microtask @ app.bundle.js:17549run @ app.bundle.js:1183(anonymous function) @ app.bundle.js:17509zoneBoundFn @ app.bundle.js:1156lib$es6$promise$asap$$flush @ app.bundle.js:2350
app.bundle.js:32079 Error: constructor(options={}) not implemented for this storage engine
at Error (native)
at SqlStorage.StorageEngine (http://localhost:8100/build/js/app.bundle.js:59959:16)
at new SqlStorage (http://localhost:8100/build/js/app.bundle.js:60119:17)
at new Storage (http://localhost:8100/build/js/app.bundle.js:59917:27)
at MyApp.database (http://localhost:8100/build/js/app.bundle.js:3272:25)
at new MyApp (http://localhost:8100/build/js/app.bundle.js:3229:15)
at http://localhost:8100/build/js/app.bundle.js:8120:52
at Injector._instantiate (http://localhost:8100/build/js/app.bundle.js:6695:28)
at Injector._instantiateProvider (http://localhost:8100/build/js/app.bundle.js:6649:26)
at Injector._new (http://localhost:8100/build/js/app.bundle.js:6638:22)BrowserDomAdapter.logError @ app.bundle.js:32079ExceptionHandler.call @ app.bundle.js:7870(anonymous function) @ app.bundle.js:16955NgZone._notifyOnError @ app.bundle.js:17596collection_1.StringMapWrapper.merge.onError @ app.bundle.js:17491run @ app.bundle.js:1186(anonymous function) @ app.bundle.js:17509zoneBoundFn @ app.bundle.js:1156lib$es6$promise$$internal$$tryCatch @ app.bundle.js:2556lib$es6$promise$$internal$$invokeCallback @ app.bundle.js:2568lib$es6$promise$$internal$$publish @ app.bundle.js:2539(anonymous function) @ app.bundle.js:1288microtask @ app.bundle.js:17549run @ app.bundle.js:1183(anonymous function) @ app.bundle.js:17509zoneBoundFn @ app.bundle.js:1156lib$es6$promise$asap$$flush @ app.bundle.js:2350
app.bundle.js:32079 ERROR CONTEXT:BrowserDomAdapter.logError @ app.bundle.js:32079ExceptionHandler.call @ app.bundle.js:7873(anonymous function) @ app.bundle.js:16955NgZone._notifyOnError @ app.bundle.js:17596collection_1.StringMapWrapper.merge.onError @ app.bundle.js:17491run @ app.bundle.js:1186(anonymous function) @ app.bundle.js:17509zoneBoundFn @ app.bundle.js:1156lib$es6$promise$$internal$$tryCatch @ app.bundle.js:2556lib$es6$promise$$internal$$invokeCallback @ app.bundle.js:2568lib$es6$promise$$internal$$publish @ app.bundle.js:2539(anonymous function) @ app.bundle.js:1288microtask @ app.bundle.js:17549run @ app.bundle.js:1183(anonymous function) @ app.bundle.js:17509zoneBoundFn @ app.bundle.js:1156lib$es6$promise$asap$$flush @ app.bundle.js:2350
app.bundle.js:32079 _Context {element: ion-app, componentElement: null, injector: Injector}

also i tried on my device after run my app it will show me white screen.
Please help me.
Thanks in advance !!

2

Can you show the portion of code where you try to open the database?

3

Thanks for replay
in my database.js file contains
import {Platform, Page, Storage, SqlStorage} from ‘ionic/ionic’;

@Page({
templateUrl: ‘build/pages/home/home.html’,
})

export class HomePage {
constructor(platform: Platform) {
this.platform = platform;
this.people = [];
this.platform.ready().then(() => {
this.storage = new Storage(SqlStorage);
this.refresh();
});
}

add() {
    this.platform.ready().then(() => {
        this.storage.query("INSERT INTO people (firstname, lastname) VALUES ('Nic', 'Raboy')").then((data) => {
            console.log(JSON.stringify(data.res));
        }, (error) => {
            console.log("ERROR -> " + JSON.stringify(error.err));
        });
    });
}

refresh() {
    this.platform.ready().then(() => {
        this.storage.query("SELECT * FROM people").then((data) => {
            this.people = [];
            if(data.res.rows.length > 0) {
                for(var i = 0; i < data.res.rows.length; i++) {
                    this.people.push({firstname: data.res.rows.item(i).firstname, lastname: data.res.rows.item(i).lastname});
                }
            }
        }, (error) => {
            console.log("ERROR -> " + JSON.stringify(error.err));
        });
    });
}

}

my app.js file:
import {App, Platform, Storage, SqlStorage} from ‘ionic/ionic’;
import {HomePage} from ‘./pages/home/home’;

@App({
template: ‘<ion-nav [root]=“rootPage”>’,
config: {} // http://ionicframework.com/docs/v2/api/config/Config/
})
export class MyApp {
constructor(platform: Platform) {
this.platform = platform;
this.initializeApp();
this.root = HomePage;
}

initializeApp() {
this.platform.ready().then(() => {
this.storage = new Storage(SqlStorage, {name : ‘Demo’});
this.storage.query(‘CREATE TABLE IF NOT EXISTS people (id INTEGER PRIMARY KEY AUTOINCREMENT, firstname TEXT, lastname TEXT)’).then((data) => {
console.log("TABLE CREATED -> " + JSON.stringify(data.res));
}, (error) => {
console.log("ERROR -> " + JSON.stringify(error.err));
});
});
}
}

and my html file:
<ion-navbar *navbar>

Home

<button clear (click)=“refresh()”>Refresh
<button clear (click)=“add()”>Add

{{person.firstname}} {{person.lastname}}
4

Type ionic info and post the result.

5

Cordova CLI: 5.4.1
Gulp version: CLI version 3.9.0
Gulp local:
Ionic Version: 2.0.0-alpha.51
Ionic CLI Version: 2.0.0-beta.17
Ionic App Lib Version: 2.0.0-beta.8
OS:
Node Version: v5.3.0

6

Have you tried using the same name in the storage config options? you have the name in one and in the other you don’t, try fixing that and come back if error still the same or if has changed you can post it, btw try using pastebin for errors, filling the post with error messages isn’t that useful, most people with same error will look at the solution and will have to scroll a lot if the post has error logs all over the place.

7

I check i your mentioned changes and run app on device it will give me error:
“EXCEPTION: Error: constructor(options={}) not implemented for this storage engine”, source: file:///android_asset/www/build/js/app.bundle.js (32038)

8

So the error got smaller?

9

I refer some links related with this error:



But didn’t get solved. Please help me.

10

Can you post the lines from 10 up to 10 down respect line 32038 in your bundle:

11

var StorageEngine = (function () {
function StorageEngine(options) {
if (options === void 0) { options = {}; }
throw Error(“constructor(options={}) not implemented for this storage engine”);
}
StorageEngine.prototype.get = function (key, value) {
throw Error(“get() not implemented for this storage engine”);
};
StorageEngine.prototype.set = function (key, value) {
throw Error(“set() not implemented for this storage engine”);
};
StorageEngine.prototype.remove = function (key) {
throw Error(“remove() not implemented for this storage engine”);
};
StorageEngine.prototype.query = function (query, params) {
throw Error(“query() not implemented for this storage engine”);
};
return StorageEngine;
})();
exports.StorageEngine = StorageEngine;

12

Did you installed the cordova sqlite plugin?

13

I am install plugin by below command:
ionic plugin add cordova-sqlite-storage

14

This error was fixed by an issue in github, if still persists update your ionic-framework version.

15

i solve my issue by using below link


and this link

Thanks for help !!