Dexie example not working in angular

[nesanmano]

I am trying to use Dexi in my application. I am having a hard time doing it. The problem is that the indexed databse is not even getting created.

method where I invoke dexi

  createImageFromBlob(ficname:any , image: Blob) {
    let reader = new FileReader();
    reader.addEventListener("load", (evt) => {
      let res = evt.target.result;

      // Store Data URL in localStorage
      try {
        if (typeof res === "string") {
          localStorage.setItem(ficname, res);
          this.dixieDbService.addNewImage(ficname, res).then(r => console.log("inserted: "));
        }
      }
      catch (e) {
        console.log("Storage failed: " + e);
      }
    }, false);
    if (image) {
      reader.readAsDataURL(image);
    }
  }

// db.ts

import Table = Dexie.Table;
import Dexie from "dexie";

export interface ImageList {
  id?: number;
  imgName: string;
  imgDataUrlValue: string|ArrayBuffer;
}


export class AppDB extends Dexie {
  imageList!: Table<ImageList, number>;


  constructor() {
    super('ngdexieliveQuery');
    this.version(3).stores({
      imageList: '++id'
    });
   // this.on('populate', () => this.populate());
  }
  
}

export const db = new AppDB();

// my service class

import {Injectable} from "@angular/core";
import {liveQuery} from "dexie";
import {db, ImageList} from "../dixie/db";

@Injectable()
export class DixieIndexedDbService {

  imageList$ = liveQuery(() => db.imageList.toArray());
  listName = 'My local image list';

  async addNewImage(imgName:string, imgDataVal:any) {
    await db.imageList.add({
      imgName: imgName,
      imgDataUrlValue:imgDataVal
    });
  }

  async getImgDataValue(imgName:string) {
    return db.imageList.get({imgName: imgName});
  }


}

[David Fahlander]

It's hard to tell why the database isn't even created. It would depend on how your app is bootstrapped. So, ... without having the full repro I couldn't tell. I wonder a bit about the line import Table = Dexie.Table which seems to be an old style import. The two lines should be replaced with import Dexie, { Table } from "dexie" but probably that's not the issue but rather an issue with your setup and how the app is being executed.

If you believe there is an issue in Dexie, please provide a full repro, preferrably using codesandbox or stackblitz. Start out with an angular template and add your code to it.

[nesanmano]

I have the sample code on stackblitz:

https://stackblitz.com/edit/angular-ivy-znzhv8

[David Fahlander]

A ran it and is sais

I saw you posted on stackoverflow also. Please add the repro there instead so people have easier time to help you find the issue. I will close this one. Feel free to reopen in case it turns out to be an issue with Dexie.

[nesanmano]

Hi, I have fixed the issue. Now it works in stack blitz. I keep getting this error. I have drilled down the problem and came to know that this is the cause: dexie.mjs:1201 Unhandled rejection: SchemaError: KeyPath imgName on object store imageList is not indexed

[nesanmano]