Not able to create database with SQLite in Ionic

I am trying to create a database with the SQLite plugin in ionic.I want to create a table and store some registration detail in the table. here is my code. I have checked the official documentation but got no success.

This is my registerpage

-register.page.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() {

  }

}

-register.module.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 {}

-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 { 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 {}

-error

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

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 here?