Can Ionic Native SQLite be used with Capacitor?

Ionic Native
1

Perhaps this belongs in the Capacitor forum, but for some reason, I cannot post to it.

At any rate, I have just created a new blank Ionic 4 application, and added Capacitor. I have an upcoming app, where I will require to store quite a bit of local data (for offline), and also need to query etc, in other words, access to SQLite.

I attempted to add the SQLite native plugin. I have imported as I have before using Ionic3/Cordova, but when I run (Ionic serve) …

ERROR Error: Uncaught (in promise): TypeError: Object(...) is not a function
TypeError: Object(...) is not a function
    at index.js:125
    at Module../node_modules/@ionic-native/sqlite/index.js (index.js:188)
    at __webpack_require__ (bootstrap:83)
    at Module../src/app/home/home.module.ts (home-home-module.js:421)
    at __webpack_require__ (bootstrap:83)
    at $_lazy_route_resource lazy namespace object:18
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke (zone.js:388)
    at Object.onInvoke (core.js:16156)
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke (zone.js:387)
    at Zone.push../node_modules/zone.js/dist/zone.js.Zone.run (zone.js:138)
    at resolvePromise (zone.js:814)
    at resolvePromise (zone.js:771)
    at zone.js:873
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:421)
    at Object.onInvokeTask (core.js:16147)
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:420)
    at Zone.push../node_modules/zone.js/dist/zone.js.Zone.runTask (zone.js:188)
    at drainMicroTaskQueue (zone.js:595)

Should I be able to use this plugin in Capacitor?

Thanks in advance for any help

2

OK, I realised I should be looking at the v4 docs, so I uninstalled the previous and added this one.

I now get a different error…

ERROR Error: Uncaught (in promise): Error: Unexpected value 'SQLite' imported by the module 'HomePageModule'. Please add a @NgModule annotation.
Error: Unexpected value 'SQLite' imported by the module 'HomePageModule'. Please add a @NgModule annotation.
    at syntaxError (compiler.js:2427)
    at compiler.js:18351
    at Array.forEach (<anonymous>)
    at CompileMetadataResolver.push../node_modules/@angular/compiler/fesm5/compiler.js.CompileMetadataResolver.getNgModuleMetadata (compiler.js:18326)
    at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._loadModules (compiler.js:25715)
    at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileModuleAndComponents (compiler.js:25696)
    at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler.compileModuleAsync (compiler.js:25656)
    at CompilerImpl.push../node_modules/@angular/platform-browser-dynamic/fesm5/platform-browser-dynamic.js.CompilerImpl.compileModuleAsync (platform-browser-dynamic.js:143)
    at core.js:17173
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke (zone.js:388)
    at resolvePromise (zone.js:814)
    at resolvePromise (zone.js:771)
    at zone.js:873
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:421)
    at Object.onInvokeTask (core.js:16147)
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:420)
    at Zone.push../node_modules/zone.js/dist/zone.js.Zone.runTask (zone.js:188)
    at drainMicroTaskQueue (zone.js:595)

All I have done is the following…

home.module.ts…

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

import { HomePage } from './home.page';

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    IonicModule,
    SQLite,
   ....

home.page.ts…

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

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {

  constructor(private sqlite: SQLite) {
   
  }

So not written any code yet.

I am not sure what it means by the

Please add a @NgModule annotation ?

3

Do you need to import it into app.module.ts and declare it as a provider?

2 Likes
4

Thankyou @beck24, yes that was the problem.

Looks like I could also put it into the home module, but again in there I need to put it in the providers list, and not the imports as I had it.

However, it probably would belong more in the application wide module.

1 Like