Ionic2 cordova-sqlite-storage: how to use SQLite as a service

问题

I am trying to use the Cordova plugin sqlite in Ionic 2 as a service.

The project builds but it runs a blank page.

Here is what I see in the android logcat related to that:

10-29 02:15:11.082 8010-8010/? I/chromium: [INFO:CONSOLE(5)] "EXCEPTION: No provider for t!", source: file:///android_asset/www/build/main.js (5)
10-29 02:15:11.082 8010-8010/? I/chromium: [INFO:CONSOLE(5)] "ORIGINAL STACKTRACE:", source: file:///android_asset/www/build/main.js (5)
10-29 02:15:11.082 8010-8010/? I/chromium: [INFO:CONSOLE(5)] "Error: DI Error
                                               at e.Error (<anonymous>)
                                               at e (file:///android_asset/www/build/main.js:5:5322)
                                               at e (file:///android_asset/www/build/main.js:5:10802)
                                               at new e (file:///android_asset/www/build/main.js:5:11130)
                                               at t._throwOrNull (file:///android_asset/www/build/main.js:5:28341)
                                               at t._getByKeyDefault (file:///android_asset/www/build/main.js:5:28697)
                                               at t._getByKey (file:///android_asset/www/build/main.js:5:28252)
                                               at t.get (file:///android_asset/www/build/main.js:5:24608)
                                               at e.get (file:///android_asset/www/build/main.js:7:16300)
                                               at e.get (file:///android_asset/www/build/main.js:8:3564)", source: file:///android_asset/www/build/main.js (5)
10-29 02:15:11.092 8010-8010/? I/chromium: [INFO:CONSOLE(5)] "EXCEPTION: No provider for t!", source: file:///android_asset/www/build/main.js (5)
10-29 02:15:11.092 8010-8010/? I/chromium: [INFO:CONSOLE(5)] "ORIGINAL STACKTRACE:", source: file:///android_asset/www/build/main.js (5)
10-29 02:15:11.092 8010-8010/? I/chromium: [INFO:CONSOLE(5)] "Error: DI Error
                                               at e.Error (<anonymous>)
                                               at e (file:///android_asset/www/build/main.js:5:5322)
                                               at e (file:///android_asset/www/build/main.js:5:10802)
                                               at new e (file:///android_asset/www/build/main.js:5:11130)
                                               at t._throwOrNull (file:///android_asset/www/build/main.js:5:28341)
                                               at t._getByKeyDefault (file:///android_asset/www/build/main.js:5:28697)
                                               at t._getByKey (file:///android_asset/www/build/main.js:5:28252)
                                               at t.get (file:///android_asset/www/build/main.js:5:24608)
                                               at e.get (file:///android_asset/www/build/main.js:7:16300)
                                               at e.get (file:///android_asset/www/build/main.js:8:3564)", source: file:///android_asset/www/build/main.js (5)
10-29 02:15:11.102 8010-8010/? I/chromium: [INFO:CONSOLE(3)] "Error: No provider for t!", source: file:///android_asset/www/build/polyfills.js (3)

My ionic files are like that: "[My project]\src\services\sql-settings\sql-settings.ts":

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

@Injectable()
export class SqlSettingsService {

    constructor(
        public db: SQLite
    ) {     
        this.db = new SQLite();
    }

    openDb(){
        return this.db.openDatabase({
             name: 'data.db',
             location: 'default' // the location field is required
        });
    }

}

"[My project]\src\app\app.module.ts":

import { NgModule } from '@angular/core'; import { IonicApp, IonicModule } from 'ionic-angular'; import { MyApp } from './app.component'; import { HomePage } from '../pages/home/home'; import { SqlSettingsService } from '../services/sql-settings/sql-settings';



@NgModule({   declarations: [
    MyApp,
    HomePage   ],   imports: [
    IonicModule.forRoot(MyApp)   ],   bootstrap: [IonicApp],   entryComponents: [
    MyApp,
    HomePage   ],   providers: [SqlSettingsService] }) export class AppModule {}

And finaly "[My project]\src\app\app.component.ts":

import { Component } from '@angular/core';
import { Platform } from 'ionic-angular';
import { StatusBar, Splashscreen } from 'ionic-native';

import { HomePage } from '../pages/home/home';


import { SqlSettingsService } from '../services/sql-settings/sql-settings';


@Component({
  template: `<ion-nav [root]="rootPage"></ion-nav>`,
  providers: [SqlSettingsService]
})
export class MyApp {
  rootPage = HomePage;

  constructor(platform: Platform, sqlSettingsService: SqlSettingsService) {


    platform.ready().then(() => {
      // Okay, so the platform is ready and our plugins are available.
      // Here you can do any higher level native things you might need.
      StatusBar.styleDefault();
      Splashscreen.hide();

      sqlSettingsService.openDb().then(
        ()=>{alert("OPEN DB IS SUCCESSFUL")},
        (err)=>{alert('Unable to open database: ' + err)}
      );


    });
  }
}

回答1:

Why are you doing this?

constructor(public db: SQLite) {     
   this.db = new SQLite();
}

This is pointless. 1. There is no provider, so it can't be injected. 2. Even if it were injected, you're assigning it something new. Pointless. What you probably want to do is

db: SQLite;

constructor() {
  this.bd = new SQLite();
}

回答2:

There is no need of that

public db: SQLite
) {     
    this.db = new SQLite();
}

simply use this in app.module.ts file

import { SqlSettingsService } from '../services/sql-settings/sql-settings';

and in provider use SqlSettingsService

来源：https://stackoverflow.com/questions/40314851/ionic2-cordova-sqlite-storage-how-to-use-sqlite-as-a-service

标签

sqlite

angular

cordova-plugins

ionic2