Ionic2 Cordova-SQLite-Storage：如何将SQLite用作服务

Question

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)}
      );


    });
  }
}

Answer 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();
}

Answer 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