离子2错误'ReferenceError：未定义sqlitePlugin'答案

【问题标题】：ionic 2 Error 'ReferenceError: sqlitePlugin is not defined'离子2错误'ReferenceError：未定义sqlitePlugin'
【发布时间】：2016-12-21 18:15:17
【问题描述】：

我一直在使用 ionic 2 native sqlite plugin 制作一个基本的应用程序来捕获图像并将其存储到手机本地存储中。当我在 genymotion 模拟器上运行应用程序时，有时会不断收到未捕获的异常错误（似乎来自 sql 插件）。

当我使用 -live 参数（ionic run android -c -l）时应用程序重新加载时，通常会发生这种情况。我还注意到存储在应用程序上的数据没有出现（这再次表明在“实时重新加载”时加载存储的数据存在一些问题）我把我得到的错误放在下面的控制台上：

控制台错误消息

[13:28:27] Starting 'html'...
[13:28:27] Finished 'html' after 42 ms
HTML changed: www/build/pages/home/home.html
HTML changed: www/build/pages/map-detail-component/map-detail-component.html
HTML changed: www/build/pages/map-page/map-page.html
0     298305   log      Angular 2 is running in the development mode. Call enableProdMode() to enable the production mode.
1     298474   group    EXCEPTION: Error: Uncaught (in promise): ReferenceError: sqlitePlugin is not defined
2     298475   error    EXCEPTION: Error: Uncaught (in promise): ReferenceError: sqlitePlugin is not defined
3     298476   error    STACKTRACE:
4     298477   error    Error: Uncaught (in promise): ReferenceError: sqlitePlugin is not defined
    at resolvePromise (http://192.168.56.1:8100/build/js/zone.js:418:31)
    at resolvePromise (http://192.168.56.1:8100/build/js/zone.js:403:17)
    at http://192.168.56.1:8100/build/js/zone.js:451:17
    at ZoneDelegate.invokeTask (http://192.168.56.1:8100/build/js/zone.js:225:37)
    at Object.NgZoneImpl.inner.inner.fork.onInvokeTask (http://192.168.56.1:8100/build/js/app.bundle.js:37360:41)
    at ZoneDelegate.invokeTask (http://192.168.56.1:8100/build/js/zone.js:224:42)
    at Zone.runTask (http://192.168.56.1:8100/build/js/zone.js:125:47)
    at drainMicroTaskQueue (http://192.168.56.1:8100/build/js/zone.js:357:35)
    at XMLHttpRequest.ZoneTask.invoke (http://192.168.56.1:8100/build/js/zone.js:297:25)
5     298478   groupEnd 
6     298481   error    Unhandled Promise rejection:, sqlitePlugin is not defined, ; Zone:, angular, ; Task:, Promise.then, ; Value:, [object Object], ReferenceError: sqlitePlugin is not defined
    at http://192.168.56.1:8100/build/js/app.bundle.js:97420:13
    at new ZoneAwarePromise (http://192.168.56.1:8100/build/js/zone.js:467:29)
    at SQLite.openDatabase (http://192.168.56.1:8100/build/js/app.bundle.js:97419:16)
    at new SqlService (http://192.168.56.1:8100/build/js/app.bundle.js:218:21)
    at DebugAppView.Object.defineProperty.get (MyApp.template.js:18:67)
    at DebugAppView._View_MyApp_Host0.injectorGetInternal (MyApp.template.js:35:79)
    at DebugAppView.AppView.injectorGet (http://192.168.56.1:8100/build/js/app.bundle.js:31753:21)
    at DebugAppView.injectorGet (http://192.168.56.1:8100/build/js/app.bundle.js:31945:49)
    at ElementInjector.get (http://192.168.56.1:8100/build/js/app.bundle.js:31246:33)
    at ElementInjector.get (http://192.168.56.1:8100/build/js/app.bundle.js:31249:48)
7     298519   log      DEVICE READY FIRED AFTER, 1004, ms
8     298609   log      Entering: map-page
9     298620   log      ERROR: , {}

当我重新启动模拟器时这会消失，但有时会在更多使用后再次出现。

我认为这可能是由于在导入插件之前创建了 SQLite db，但我已经在我的根 app.ts 文件中导入了插件（如下所示）（整个应用程序可以在 github repo 中看到)

根应用程序.ts

@Component({
    template: '<ion-nav [root]="rootPage"></ion-nav>',
    // Declare services
    providers: [ SqlService ]
})
export class MyApp {
    rootPage: any = MapPage;

    constructor(platform: Platform) {
        platform.ready().then(() => {
            StatusBar.styleDefault();
        });
    }
}    
ionicBootstrap(MyApp);

我已将插件的任何使用限制在 sqlService（如下所示）

SQL 服务

import { Injectable } from '@angular/core';
import 'rxjs/add/operator/map';
import { SQLite} from 'ionic-native';

@Injectable()
export class SqlService {
  private db: SQLite;
  private isOpen: boolean;

  public constructor() {
    if(!this.isOpen){
      this.db = new SQLite();
      this.db.openDatabase({
        name: "data.db",
        location: "default"
      }).then(() => {
        this.db.executeSql("CREATE TABLE IF NOT EXISTS places (id INTEGER PRIMARY KEY AUTOINCREMENT, title TEXT, img TEXT)", []).then((data) => {
          console.log("TABLE CREATED: " + data);
        }, (error) => {
          console.log("Unable to execute SQL" + error);
        });
        this.isOpen=true;
      });
    }
  }

  public add(title: string, base64Img: string) {
    return new Promise((resolve, reject) => {
      this.db.executeSql("INSERT INTO places (title, img) VALUES ( '"+ title +"', '"+ base64Img +"')", [])
        .then((data) => {
          resolve(data);
        }, (error) => {
          reject(error);
        });
    });
  }

  // Remove individual Location
  public remove(id: number){
    return new Promise((resolve, reject) => {
      this.db.executeSql("DELETE FROM places WHERE id = "+ id +";", [])
        .then((data) => {
          resolve(data);
        }, (error) => {
          reject(error);
        });
    });
  }

  public locDetail(id: number){
    return new Promise((resolve, reject) => {
      this.db.executeSql("SELECT * FROM places WHERE id = "+ id +";",[])
        .then((data) => {
          if(data.rows.length===1){
            // console.log("ttitle: " + data.rows.item(0).title + " id: " + data.rows.item(0).id + " img: " + data.rows.item(0).img );
            let place = [];
            place.push({
              id: data.rows.item(0).id,
              title: data.rows.item(0).title,
              img: data.rows.item(0).img
            });
            resolve(place);
          }
        }, (error) => {
          reject(error);
        });
    });
  }

  // Refresh and initialise the places object
  public refresh() {
    return new Promise((resolve, reject) => {
        this.db.executeSql("SELECT * FROM places", []).then((data) => {
          let place = [];
          if (data.rows.length > 0) {
            for (var i = 0; i < data.rows.length; i++) {
              place.push({ 
                id: data.rows.item(i).id,
                title: data.rows.item(i).title, 
                img: data.rows.item(i).img 
              });
            }
          }
          resolve(place);
        }, (error) => {
          reject(error);
        });
      }
    );
  }
}

【问题讨论】：

我建议您改用SqlStorage。我最近一直在使用它，它运行良好，但我记得当我尝试单独使用 SQLite 时遇到问题
好的，但是如果您的数据存储在 webSQL 中，这不会让您的数据被操作系统清理吗？
在我的项目中有同样的问题。和@MorKadosh，我尝试使用 SqlStorage 但出现“没有导出成员”错误。是的，我已经安装了 cordova-sqlite-storage 插件。请指教。谢谢。

标签： sqlite angular ionic2 angular-services

【解决方案1】：

我最近遇到了同样的问题，请确保您检查平台是否也准备好为您服务。从“ionic-angular”导入“Platform”并在promise.then方法中执行你的sqlite交互代码。

【讨论】：

【解决方案2】：

我正在使用 IOS 并收到相同的错误 'ReferenceError: sqlitePlugin is not defined'。

由于在 Chrome 浏览器中测试时 sqlite 不起作用，我尝试了 ionic upload CLI 功能。然后得到同样的错误。

我在 Github 上遇到了this issue。

使用setTimeout 后，它可以在 IOS 上的 Ionic 视图应用程序中运行：

      setTimeout(function() {
          let db = new SQLite();
            db.openDatabase({
                name: "data.db",
                location: "default"
            }).then(() => {
                db.executeSql("CREATE TABLE IF NOT EXISTS people (id INTEGER PRIMARY KEY AUTOINCREMENT, firstname TEXT, lastname TEXT)", {}).then((data) => {
                    console.log("TABLE CREATED: ", data);
                    self.dummy = data
                }, (error) => {
                    console.error("Unable to execute sql", error);
                    self.dummy = error;
                })
            }, (error) => {
                console.error("Unable to open database", error);
                self.dummy = error;
            });
      }, 2000);

【讨论】：

【解决方案3】：

请在模拟器/模拟器或android设备/ios设备中运行您的项目。它不适用于浏览器。

【讨论】：

为什么不能在浏览器中运行？它一直在 Chrome 中工作？