Not able to create database with SQLite

Ionic Framework
1

I am trying to create a database with SQLite.

Here is my code
#RegisterPage.ts

import { Component, OnInit } from '@angular/core';

import { FormBuilder, FormGroup, Validators } from '@angular/forms';

import { SQLite, SQLiteObject } from '@ionic-native/sqlite/ngx';

@Component({

  selector: 'app-register',

  templateUrl: './register.page.html',

  styleUrls: ['./register.page.scss'],

})

export class RegisterPage implements OnInit {

  registrationform: FormGroup

  private database: SQLiteObject;

  constructor(private fb: FormBuilder, private sqlite: SQLite) {

    this.registrationform = fb.group({

      firstname: [''],

      lastname: [''],

      date: [''],

      username: ['',Validators.required],

      password: ['',Validators.required]

    });

    this.sqlite.create({

      name: 'data.db',

      location: 'default'

    })

      .then((db: SQLiteObject) => {

    

        this.database =db;

        db.executeSql('create table if not exists items(name VARCHAR(32))', [])

        .then(() => console.log('Executed SQL'))

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

        

      })

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

   

  }

 ngOnInit() {

    

  }

}

#RegisterModule.ts

import { NgModule } from '@angular/core';

import { CommonModule } from '@angular/common';

import { FormsModule, ReactiveFormsModule } from '@angular/forms';

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

import { RegisterPageRoutingModule } from './register-routing.module';

import { RegisterPage } from './register.page';

import { IonicStorageModule } from '@ionic/storage-angular';

@NgModule({

  imports: [

    CommonModule,

    FormsModule,

    IonicModule,

    RegisterPageRoutingModule,

    IonicStorageModule.forRoot(),

    ReactiveFormsModule,

  ],

  declarations: [RegisterPage]

})

export class RegisterPageModule {}

#AppModule.ts

import { NgModule } from '@angular/core';

import { BrowserModule } from '@angular/platform-browser';

import { RouteReuseStrategy } from '@angular/router';

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

import { AppComponent } from './app.component';

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

import { SQLite, SQLiteObject } from '@ionic-native/sqlite/ngx';

@NgModule({

  declarations: [AppComponent],

  entryComponents: [],

  imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule],

  providers: [{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy },SQLite],

  bootstrap: [AppComponent],

})

export class AppModule {}

#warning

common.js:291 Native: tried accessing the SQLite plugin but Cordova is not available. Make sure to include cordova.js or run in a device/simulator

#error

core.js:6210 ERROR Error: Uncaught (in promise): TypeError: Cannot read property 'then' of undefined
TypeError: Cannot read property 'then' of undefined
    at new RegisterPage (register.page.ts:32)
    at NodeInjectorFactory.RegisterPage_Factory [as factory] (ɵfac.js? [sm]:1)
    at getNodeInjectable (core.js:3596)
    at instantiateRootComponent (core.js:10141)
    at createRootComponent (core.js:12454)
    at ComponentFactory$1.create (core.js:25102)
    at ViewContainerRef.createComponent (core.js:23142)
    at IonRouterOutlet.activateWith (ionic-angular.js:2926)
    at ActivateRoutes.activateRoutes (router.js:2129)
    at router.js:2080
    at resolvePromise (zone-evergreen.js:798)
    at resolvePromise (zone-evergreen.js:750)
    at zone-evergreen.js:860
    at ZoneDelegate.invokeTask (zone-evergreen.js:399)
    at Object.onInvokeTask (core.js:28561)
    at ZoneDelegate.invokeTask (zone-evergreen.js:398)
    at Zone.runTask (zone-evergreen.js:167)
    at drainMicroTaskQueue (zone-evergreen.js:569)
    at ZoneTask.invokeTask [as invoke] (zone-evergreen.js:484)
    at invokeTask (zone-evergreen.js:1621)

can someone tell me what I am doing wrong

2

Are you using Corova or capacitor? Hard to tell from what you’ve provided, but the “Cordova is not available” bit seems pretty sus

3

using capacitor which I think is using cordova-sqlite-storage.
These are the initial step for installation :

  1. npm install cordova-sqlite-storage
  2. npm install @ionic-native/sqlite
  3. ionic cap sync
4

Hmm, I’ll check with some folks on the team about compatibility with that plugin, not 100% sure. Another alternative is to use this sqlite plugin from the capacitor-community org. Ideally, you should use a capacitor plugin first vs trying to use the cordova compatibility layer.

5

i am referring to official documentation https://ionicframework.com/docs/native/sqlite. can you tell me what should I do next? followed all the steps on the above link.

6

The “native” pages (which are getting some attention soon) are more geared towards older cordova apps, not apps that are built using capacitor.

Use the capacitor community plugin instead.