sqlite: TypeORM with Angular - Data is not saved across browser refresh

I don’t think this is really a bug. Perhaps more to do with some mistakes in my code.

As the title says, I’m trying to integrate TypeORM with an Ionic/Angular project and I encounter this problem of data not being persisted across sessions. I can create tables and query them, but upon browser refresh it’s all gone. As if data is being saved to a memory database rather than a persistent storage such as IndexedDB.

My code is pretty much entirely borrowed from the samples in this repo. Anyway this is what I do:

1. Copied the sqlite.service.ts from the angular starter project. Call its initializePlugin() method and setup the webstore.

  async initializeDB() {
    await this.sqlite.initializePlugin();
    // const p = this.sqlite.platform;
    // console.log(`plaform ${p}`);
    const platform = Capacitor.getPlatform();
    if (platform === 'web') {
      await customElements.whenDefined('jeep-sqlite');
      const jeepSqliteEl = document.querySelector('jeep-sqlite');
      if (jeepSqliteEl != null) {
        await this.sqlite.initWebStore();
        console.log(`isStoreOpen ${await jeepSqliteEl.isStoreOpen()}`);
        console.log(`$$ jeepSqliteEl is defined $$`);
      } else {
        console.log('$$ jeepSqliteEl is null');
        throw Error('jeepSqliteEl is null');
      }
    }
  }

1. Initialize TypeORM based on the code in the Vue sample.

  private async createConnection(): Promise<Connection> {
    // when using Capacitor, you might want to close existing connections,
    // otherwise new connections will fail when using dev-live-reload
    // see https://github.com/capacitor-community/sqlite/issues/106
    CapacitorSQLite.checkConnectionsConsistency({
      dbNames: ['test'], // i.e. "i expect no connections to be open"
    }).catch((e) => {
      // the plugin throws an error when closing connections. we can ignore
      // that since it is expected behaviour
      console.log(e);
      return null;
    });

    // create a SQLite Connection Wrapper
    const sqliteConnection = new SQLiteConnection(CapacitorSQLite);

    // copy preloaded dbs (optional, not TypeORM related):
    // the preloaded dbs must have the `YOUR_DB_NAME.db` format (i.e. including
    // the `.db` suffix, NOT including the internal `SQLITE` suffix from the plugin)
    // await sqliteConnection.copyFromAssets();

    let dbOptions: ConnectionOptions;

    // eslint-disable-next-line prefer-const
    dbOptions = {
      logging: ['error', 'query', 'schema'],
      type: 'capacitor',
      driver: sqliteConnection, // pass the connection wrapper here
      database: 'test', // database name without the `.db` suffix,
      mode: 'no-encryption',
      synchronize: true,
      entities: [User],
    };
    // create the TypeORM connection
    return await createConnection(dbOptions);
  }

1. I have an OrmService which has initialize() which I call during application startup:

  async initialize() {
    try {
      await this.initializeDB();
      await getConnection();
    } catch (ex) {
      console.log('Connection not established, creating connection', ex);
      await this.createConnection();
      console.log('Connection created!');
    }
    //await this.createMockData();
    console.log('All users:', JSON.stringify(await User.find(), null, 2));
  }

What am I missing?

My expectation of the sqlite plugin is that this app when run on the web, it would use jeep-sqlite and on a physical device it would use the actual on-device sqlite databases. Pls correct me if this assumption is wrong and if the TypeORM plugin only works with device (I’m yet to test that).

My test repo is here.

Thanks in advance.

UPDATE Versions:

• @capacitor-community/sqlite v3.4.0-2
• jeep-sqlite v1.3.5
• Ionic v6
• Angular 13

Hari