Ionic 5 Sqlite Angular 14 Capacitor 4

Capacitor
1

Hello,

I am creating an app using Ionic 5, Angular 14, Capacitor 4.
I am trying to create a database using SQLite, as below.

Can somebody help me to solve this situation (erros below)?
Many thanks.

npm install cordova-sqlite-storage
npm install @awesome-cordova-plugins/sqlite*

db.service.ts

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { SQLitePorter } from '@awesome-cordova-plugins/sqlite-porter/ngx';
import { Platform } from '@ionic/angular';
import { SQLite, SQLiteObject } from '@awesome-cordova-plugins/sqlite/ngx';

@Injectable({
  providedIn: 'root'
})
export class DbService {

  public dbInstance: SQLiteObject;

  constructor(
    private plt: Platform,
    private sqlPorter: SQLitePorter,
    private http: HttpClient,
    private sqlite: SQLite
  ) {

    this.plt.ready().then(() => {
      this.sqlite.create({
        name: 'data.db',
        location: 'default'
      })
        .then((db: SQLiteObject) => {
          this.dbInstance = db;
          this.dataBase();
        });
    });
  }

  async dataBase() {
    this.http.get('assets/banco.sql', { responseType: 'text' })
      .subscribe(sql => {
        this.sqlPorter.importSqlToDb(this.dbInstance, sql)
          .then(_ => {
            console.log('Db criado');
          })
          .catch(e =>
            console.error(e));
      });
  }

}

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';

import { IonicModule, IonicRouteStrategy } from '@ionic/angular';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

import { SQLite } from '@awesome-cordova-plugins/sqlite/ngx';
import { DbService } from './services/db.service';
import { HttpClientModule } from '@angular/common/http';
import { SQLitePorter } from '@awesome-cordova-plugins/sqlite-porter/ngx';

@NgModule({
  declarations: [AppComponent],
  imports: [HttpClientModule, BrowserModule, IonicModule.forRoot(), AppRoutingModule],
  providers: [
    SQLite,
    DbService,
    SQLitePorter,
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }],
  bootstrap: [AppComponent],
})
export class AppModule {}

app.component.ts

import { Component } from '@angular/core';
import { DbService } from './services/db.service';
import { Platform } from '@ionic/angular';

@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.scss'],
})
export class AppComponent {
  constructor(
    platform: Platform,
    db: DbService
    ) {
      db.dataBase();
    }

}

These error messages appear:

ERROR Error: Uncaught (in promise): TypeError: Cannot read properties of undefined (reading ‘executeSql’)
TypeError: Cannot read properties of undefined (reading ‘executeSql’)
at db.service.ts:52:23
at Generator.next ()
at asyncGeneratorStep (asyncToGenerator.js:3:1)
at _next (asyncToGenerator.js:25:1)
at asyncToGenerator.js:32:1
at new ZoneAwarePromise (zone.js:1351:25)
at asyncToGenerator.js:21:1
at DbService.deleteTable (db.service.ts:49:20)
at new AppComponent (app.component.ts:15:10)
at NodeInjectorFactory.AppComponent_Factory [as factory] (ɵfac.js? [sm]:1:1)
at resolvePromise (zone.js:1262:35)
at zone.js:1169:21
at zone.js:1185:37
at asyncGeneratorStep (asyncToGenerator.js:6:1)
at _next (asyncToGenerator.js:25:1)
at asyncToGenerator.js:32:1
at new ZoneAwarePromise (zone.js:1351:25)
at asyncToGenerator.js:21:1
at DbService.deleteTable (db.service.ts:49:20)
at new AppComponent (app.component.ts:15:10)

ERROR Error: Uncaught (in promise): TypeError: Cannot read properties of undefined (reading ‘then’)
TypeError: Cannot read properties of undefined (reading ‘then’)
at db.service.ts:23:7
at _ZoneDelegate.invoke (zone.js:409:30)
at Object.onInvoke (core.mjs:26231:33)
at _ZoneDelegate.invoke (zone.js:408:56)
at Zone.run (zone.js:169:47)
at zone.js:1326:38
at _ZoneDelegate.invokeTask (zone.js:443:35)
at Object.onInvokeTask (core.mjs:26218:33)
at _ZoneDelegate.invokeTask (zone.js:442:64)
at Zone.runTask (zone.js:214:51)
at resolvePromise (zone.js:1262:35)
at zone.js:1333:21
at _ZoneDelegate.invokeTask (zone.js:443:35)
at Object.onInvokeTask (core.mjs:26218:33)
at _ZoneDelegate.invokeTask (zone.js:442:64)
at Zone.runTask (zone.js:214:51)
at drainMicroTaskQueue (zone.js:632:39)

2

The error messages still show up in the browser, but SQLite is working on the device.

db.service.ts

constructor(
    private plt: Platform,
    private sqlPorter: SQLitePorter,
    private http: HttpClient,
    private sqlite: SQLite
  ) {
   createDb();
  }

createDb(){
this.plt.ready().then(() => {
      this.sqlite.create({
        name: 'data.db',
        location: 'default'
      })
        .then((db: SQLiteObject) => {
          this.dbInstance = db;
          this.dataBase();
        });
    });
}

dataBase(){

this.http.get('assets/banco.sql', { responseType: 'text' })
      .subscribe(sql => {
        this.sqlPorter.importSqlToDb(this.dbInstance, sql)
          .then(_ => {
            console.log('Db criado');
          })
          .catch(e =>
            console.error(e));
      });
  }
}

app.component.ts

import { Component } from '@angular/core';
import { DbService } from './services/db.service';
import { Platform } from '@ionic/angular';

@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.scss'],
})
export class AppComponent {
  constructor(
    platform: Platform,
    db: DbService
    ) {
      db.createDb();
    }
}