Having trouble installing the storage plugin npm install @ionic/storage

I have developed a mobile app and started using storage plugin. The plugin was downloaded from npm install@ionic/storage version 2.3.0. Initially we had hiccups in the app with freezing issues. We resolved it and continued. however we faced login delay issues. When our users log in it takes 7 to 8 seconds delay in presenting the first page. Sometimes the login was quick however, first link will take 7 to 8 seconds. I recreated a dummy project and identified that without storage the login process is quick. When tried to add the storage plugin faced issues. the forum suggested to use the latest version from the npm install @ionic/storage-angular plugin. However, when tried using this we are facing one more issue “Database not found”. The plugin installed and imported without any errors. Any help in overcoming this issue is highly appreciated.

I would check out the discussion here - Migration from IonicStorage in Cordova app to Capacitor Storage in Capacitor 3

Two things to note in v3:

  1. The driver order changed
  2. The SQLite plugin is no longer included by default

It’s shows core.js:6456 ERROR Error: Uncaught (in promise): Error: Custom driver not compliant

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 { TranslateModule, TranslateLoader } from ‘@ngx-translate/core’;
import { FormsModule } from ‘@angular/forms’;
import { HttpClientModule } from ‘@angular/common/http’;
import { ReactiveFormsModule} from ‘@angular/forms’;
import { NgxNavigationWithDataComponent } from ‘ngx-navigation-with-data’;
import { WebIntent } from ‘@ionic-native/web-intent/ngx’;
import { PhotoViewer } from ‘@ionic-native/photo-viewer/ngx’;
import { Camera } from ‘@ionic-native/camera/ngx’;
import { FCM } from ‘cordova-plugin-fcm-with-dependecy-updated/ionic/ngx’;
import { FileTransfer } from ‘@ionic-native/file-transfer/ngx’;
import { FileChooser } from ‘@ionic-native/file-chooser/ngx’;
import { FilePath } from ‘@ionic-native/file-path/ngx’;
import { File } from ‘@ionic-native/file/ngx’;
import { StreamingMedia } from ‘@ionic-native/streaming-media/ngx’;
import { NgxIonicImageViewerModule } from ‘ngx-ionic-image-viewer’;
import { SocialSharing } from ‘@ionic-native/social-sharing/ngx’;
import { CallNumber } from ‘@ionic-native/call-number/ngx’;
import { SplashScreen } from ‘@ionic-native/splash-screen/ngx’;
import { StatusBar } from ‘@ionic-native/status-bar/ngx’;
import { FirebaseAuthentication } from ‘@ionic-native/firebase-authentication/ngx’;
import * as CordovaSQLiteDriver from ‘localforage-cordovasqlitedriver’;
import { Drivers } from ‘@ionic/storage’;
import { IonicStorageModule } from ‘@ionic/storage-angular’;
import {enableProdMode} from ‘@angular/core’;
enableProdMode();
@NgModule({
declarations: [AppComponent],
entryComponents: ,
imports: [TranslateModule,FormsModule,ReactiveFormsModule,HttpClientModule, BrowserModule, NgxIonicImageViewerModule, IonicModule.forRoot(), IonicStorageModule.forRoot({
driverOrder: [Drivers.SecureStorage, Drivers.IndexedDB, Drivers.LocalStorage]
}),AppRoutingModule,FormsModule],
providers: [NgxNavigationWithDataComponent, WebIntent, PhotoViewer, Camera, FCM,FileTransfer, FileChooser, FilePath, File, StreamingMedia, SocialSharing, CallNumber, SplashScreen, StatusBar, FirebaseAuthentication, { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }],
bootstrap: [AppComponent],
})
export class AppModule {}

app.component.ts

import { Component } from ‘@angular/core’;

import { Router } from ‘@angular/router’;

import { Platform } from ‘@ionic/angular’;

import { SplashScreen } from ‘@ionic-native/splash-screen/ngx’;

import { StatusBar } from ‘@ionic-native/status-bar/ngx’;

import { NgxNavigationWithDataComponent } from ‘ngx-navigation-with-data’;

import { Drivers } from ‘@ionic/storage’;

import { Storage } from ‘@ionic/storage-angular’;

import * as CordovaSQLiteDriver from ‘localforage-cordovasqlitedriver’;

@Component({

selector: ‘app-root’,

templateUrl: ‘app.component.html’,

styleUrls: [‘app.component.scss’],

})

export class AppComponent {

UserId :any;

_storage : any;

constructor(private statusBar: StatusBar,private splashScreen: SplashScreen,private router: Router,

private platform: Platform,private navCtrl:NgxNavigationWithDataComponent, private storage: Storage) {

this.initializeApp();

}

initializeApp(){

  this.platform.ready().then(async () => {

    this.statusBar.styleDefault();

    this.splashScreen.hide();

    await this.storage.defineDriver(IonicSecureStorageDriver);

    await this.storage.create();

    console.log("jhjhjh")

    this.navCtrl.navigate('login');

  });

}

async migrateDatabase() {

  const origStore = new Storage({

    name: 'originalDB', // the original database name

    driverOrder: [CordovaSQLiteDriver._driver, Drivers.IndexedDB, Drivers.LocalStorage]

  });

  await origStore.defineDriver(CordovaSQLiteDriver);



  const newStore = new Storage({

    name: 'encryptedDB', // pick a new db name for the encrypted db

    driverOrder: [Drivers.SecureStorage, Drivers.IndexedDB, Drivers.LocalStorage]

  });

  await newStore.defineDriver(IonicSecureStorageDriver);

  newStore.setEncryptionKey('mykey');



  if (await origStore.length() > 0) {

    // copy existing data into new, encrypted format

    await origStore.forEach((key, value, index) => {

      newStore.set(key, value);

    });



    // remove old data

    await origStore.clear();

  }



  this._storage = newStore;

}

}

function IonicSecureStorageDriver(IonicSecureStorageDriver: any) {

throw new Error(‘Function not implemented.’);

}

These are the plugins i am using.
com-badrit-base64 0.2.0 “Base64”
com-darryncampbell-cordova-plugin-intent 2.0.0 “Intent Shim”
com-sarriaroman-photoviewer 1.2.4 “PhotoViewer”
cordova-plugin-androidx-adapter 1.1.3 “cordova-plugin-androidx-adapter”
cordova-plugin-androidx 3.0.0 “cordova-plugin-androidx”
cordova-plugin-cache-clear 1.3.7 “Cordova Cache Clear”
cordova-plugin-camera 5.0.2 “Camera”
cordova-plugin-device 2.0.2 “Device”
cordova-plugin-fcm-with-dependecy-updated 7.8.0 “Cordova FCM Push Plugin”
cordova-plugin-file-transfer 1.7.1 “File Transfer”
cordova-plugin-file 6.0.2 “File”
cordova-plugin-filechooser 1.2.0 “File Chooser”
cordova-plugin-filepath 1.6.0 “cordova-plugin-filepath”
cordova-plugin-firebase-authentication 5.0.0 “cordova-plugin-firebase-authentication”
cordova-plugin-ionic-keyboard 2.2.0 “cordova-plugin-ionic-keyboard”
cordova-plugin-ionic-webview 4.2.1 “cordova-plugin-ionic-webview”
cordova-plugin-splashscreen 5.0.2 “Splashscreen”
cordova-plugin-statusbar 2.4.2 “StatusBar”
cordova-plugin-streaming-media 2.3.0 “StreamingMedia”
cordova-plugin-whitelist 1.3.3 “Whitelist”
cordova-plugin-x-socialsharing 6.0.3 “SocialSharing”
cordova-sqlite-storage 6.0.0 “Cordova SQLite storage plugin - cordova-sqlite-storage plugin version”
cordova-support-android-plugin 1.0.2 “cordova-support-android-plugin”
cordova-support-google-services 1.4.1 “cordova-support-google-services”
es6-promise-plugin 4.2.2 “Promise”
mx.ferreyra.callnumber 0.0.2 “Cordova Call Number Plugin”

Thank you so much!! . Your wok is highly appreciated.

1 Like