SQLite, First Time

Hello, its my first time using SQLite in ionic, and i stay very lost, how to configure. i’m follow step by step the docs but i have some error, can u help me.

[app.module.ts]

import { BrowserModule } from '@angular/platform-browser';
import { ErrorHandler, NgModule } from '@angular/core';
import { HttpModule } from '@angular/http';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
import { SplashScreen } from '@ionic-native/splash-screen';
import { StatusBar } from '@ionic-native/status-bar';
import { IonicStorageModule } from '@ionic/storage';

import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';
import { agenda } from '../pages/agenda/agenda';
import { conta } from '../pages/conta/conta'


@NgModule({
  declarations: [
    MyApp,
    HomePage,
    agenda,
    conta
  ],
  imports: [
    BrowserModule,
    HttpModule,
    IonicModule.forRoot(MyApp),
    IonicStorageModule.forRoot({
      name: 'Aula.db',
      driverOrder: ['indexddb', 'sqlite', 'websql']
    })
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage,
    agenda,
    conta
  ],
  providers: [
    StatusBar,
    SplashScreen,
    {provide: ErrorHandler, useClass: IonicErrorHandler}
  ]
})
export class AppModule {}

[Agenda.ts]

import { Component } from '@angular/core';
import { ModalController, NavParams } from 'ionic-angular'
import { conta } from '../conta/conta' 
import { SQLite, SQLiteObject } from '@ionic-native/sqlite';
//import { DAOagenda } from '../../app/dao/DAOagenda'

@Component({
    selector: 'agenda',
    templateUrl: 'agenda.html'
})

export class agenda {
    dao:any; 
    items: any[];
    platform: any;
    public db: any;
    public people: Array<Object>;
    constructor(public modalCtrl: ModalController, private sqlite: SQLite) {
        //this.dao = new DAOagenda('');
        //this.items = this.dao.getList();
        //this.insert();
        this.sqlite.create({
            name: 'Aula.db',
            location: 'default'
        })
        .then((db: SQLiteObject) => {


            db.executeSql('CREATE TABLE IF NOT EXISTS CONTA (id integer primary key AUTOINCREMENT, descicao TEXT)', {})
            .then(() => console.log('Executed SQL'))
            .catch(e => console.log(e));


        })
        .catch(e => console.log(e));

    }

    presentProfileModal() {
        let profileModal = this.modalCtrl.create(conta);
        profileModal.onDidDismiss((data) => {
            if (data == null) {
                return false
            } else {
                this.items.push(data)
            }
        })
        profileModal.present();
    }
    insert() {
        this.items = [
        {
            descricao: "Spiga"
        },
        {
            descricao: "spiga2"
        },
        {
            descricao: "spiga3"
        }
        ];
    }
    editar(data) {
        let profileModal = this.modalCtrl.create(conta, {parametro: data});
        profileModal.present();
    }
    delete(conta) {
        let pos = this.items.indexOf(conta);
        this.items.splice(pos, 1);
    }
}

class Profile {

    constructor(params: NavParams) {
        console.log('UserId', params.get('userId'));
    }


}

[ERROR MSG]

Runtime Error
Uncaught (in promise): Error: No provider for SQLite! Error at g (http://localhost:8100/build/polyfills.js:3:7133) at injectionError (http://localhost:8100/build/main.js:1511:86) at noProviderError (http://localhost:8100/build/main.js:1549:12) at ReflectiveInjector_.throwOrNull (http://localhost:8100/build/main.js:3051:19) at ReflectiveInjector.getByKeyDefault (http://localhost:8100/build/main.js:3090:25) at ReflectiveInjector.getByKey (http://localhost:8100/build/main.js:3022:25) at ReflectiveInjector.get (http://localhost:8100/build/main.js:2891:21) at AppModuleInjector.NgModuleInjector.get (http://localhost:8100/build/main.js:3856:52) at resolveDep (http://localhost:8100/build/main.js:11260:45) at createClass (http://localhost:8100/build/main.js:11120:91) at createDirectiveInstance (http://localhost:8100/build/main.js:10954:37) at createViewNodes (http://localhost:8100/build/main.js:12303:49) at createRootView (http://localhost:8100/build/main.js:12208:5) at callWithDebugContext (http://localhost:8100/build/main.js:13339:42) at Object.debugCreateRootView [as createRootView] (http://localhost:8100/build/main.js:12800:12)
Stack
Error: Uncaught (in promise): Error: No provider for SQLite!
Error
at g (http://localhost:8100/build/polyfills.js:3:7133)
at injectionError (http://localhost:8100/build/main.js:1511:86)
at noProviderError (http://localhost:8100/build/main.js:1549:12)
at ReflectiveInjector_.throwOrNull (http://localhost:8100/build/main.js:3051:19)
at ReflectiveInjector
.getByKeyDefault (http://localhost:8100/build/main.js:3090:25)
at ReflectiveInjector
.getByKey (http://localhost:8100/build/main.js:3022:25)
at ReflectiveInjector
.get (http://localhost:8100/build/main.js:2891:21)
at AppModuleInjector.NgModuleInjector.get (http://localhost:8100/build/main.js:3856:52)
at resolveDep (http://localhost:8100/build/main.js:11260:45)
at createClass (http://localhost:8100/build/main.js:11120:91)
at createDirectiveInstance (http://localhost:8100/build/main.js:10954:37)
at createViewNodes (http://localhost:8100/build/main.js:12303:49)
at createRootView (http://localhost:8100/build/main.js:12208:5)
at callWithDebugContext (http://localhost:8100/build/main.js:13339:42)
at Object.debugCreateRootView [as createRootView] (http://localhost:8100/build/main.js:12800:12)
at g (http://localhost:8100/build/polyfills.js:3:7133)
at l (http://localhost:8100/build/polyfills.js:3:6251)
at http://localhost:8100/build/polyfills.js:3:6805
at t.invokeTask (http://localhost:8100/build/polyfills.js:3:15213)
at Object.onInvokeTask (http://localhost:8100/build/main.js:4415:37)
at t.invokeTask (http://localhost:8100/build/polyfills.js:3:15134)
at n.runTask (http://localhost:8100/build/polyfills.js:3:10390)
at a (http://localhost:8100/build/polyfills.js:3:5313)
at HTMLButtonElement.invoke (http://localhost:8100/build/polyfills.js:3:16210)
Ionic Framework: 3.0.1
Ionic App Scripts: 1.3.0
Angular Core: 4.0.0
Angular Compiler CLI: 4.0.0
Node: 6.10.3
OS Platform: Windows 10
Navigator Platform: Win32
User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/58.0.3029.81 Safari/537.36 OPR/45.0.2552.635

You need to add SQLite into your providers:

  providers: [
    StatusBar,
    SplashScreen,
    SQLite,
    {provide: ErrorHandler, useClass: IonicErrorHandler}
  ]
1 Like

i make this and return another error cordova_not_available, i dont what do.

Cordova isn’t available in the browser, only on a phone. Are you testing on an actual phone?

1 Like

not, i test in browser… as possible teste in mysql or another BD. in browser?

If that’s your actual data structure, I see no need whatsoever for SQL. You should be just fine with ionic-storage, which will work seamlessly in all environments, including browsers.

Thank you rapropos … I will study more about ion storage … it is very different from what I am used to using php / mysql

you can use SQLiteMock if you want to test on browser