Ionic2 sqlitePlugin is not defined

Question

How to evade this error: VM18193:27 Unable to open database ReferenceError: sqlitePlugin is not defined(…)

    setTimeout(function() {
      let db = new SQLite(         


        

Answer 1

The plugin sqlLite does not work in a browser, you can use Websql for the browser instead (with compatible browsers, including Chrome and Opera as far as I know).

Transactions written for Websql are compatible with transactions written for SQLite.

Here is a service I have done to manage the Connection to the DB and make it work regardless if the program runs in a browser or a on real device:

import { Injectable } from '@angular/core';
import { SQLite } from 'ionic-native';
import { Platform } from 'ionic-angular';
import { Storage } from '@ionic/storage';

@Injectable()
export class SqlSettingsService {

    private db: any = null;
    private isOpened: boolean = false;


    constructor() { 
        console.log('SqlSettingsService() starts');
    }

    public getDB(){
        return this.db;
    }

    public openDb = (platform:Platform,winSer:any):Promise => {
        console.log('SqlSettingsService() opend DB starts');
        let p:Promise;
        if(!this.isOpened){
            this.isOpened = true;

            if(platform.is('core')){
                this.db = winSer.window.openDatabase("ionic2BrowserDev","1.0","",5*1024*1024);
                p = new Promise(function(resolve,reject){resolve('websql success')});
            } else {
                this.db = new SQLite();
                p = this.db.openDatabase({
                    name: 'data.db',
                    location: 'default' // the location field is required
                }).then(
                    ()=>{console.log("SqlSettingsService open db successful")},
                    (err)=>{console.error(err)}
                );
            }

        } else {
             p = new Promise(function(resolve,reject){
                resolve('db already opened');
             });
        }
        return p;

    }

    public closeDb = () => {
        this.isOpened = false;
        return this.db.close();
    }


}

winSer is another service to access the window Object that I use in my app.component.ts when I call openDB() on SqlSettingsService. It's just this:

import { Injectable } from '@angular/core';

@Injectable()
export class WindowService {
  public window = window;
}

To execute query:

    [SqlSettingsService-instance].openDb();
[SqlSettingsSevice-instance].getDB().transaction(
            function(tx){
                tx.executeSql([your sql],[bracket values you want to pass],success,error);
                function success(tx,rs){
                     console.log("success exec sql: ")
                     console.info(rs);

                }
                function error(tx,error){
                     console.log('execSqlCustom error ' + error.message + " for tx " + tx);

                }
            });