I’m trying to use sqlite-wasm in my angular 18 app, but i’m not being able to create a file in the OPFS.

I have created a test web-worker in order to spin up the sqlite-wasm database on the client side.

The logs seem to show that I did it correctly, I can save data and retrieve it, but the data don’t seem to be saved in a file inside OPFS.

Or maybe i’m missing something.

Here is my worker code:

/// <reference lib="webworker" />

import { Database, Sqlite3Static, default as sqlite3InitModule } from '@sqlite.org/sqlite-wasm';

addEventListener('message', ({ data }) => {

    console.log(`worker got message: ${data}`);
    // execute the command and post the response back

    init() // initializes the sqlite3 dastabase

    postMessage("response + " + data);
});

let sqlite3: Sqlite3Static;
let db: Database;

async function init(): Promise<void> {
    sqlite3 = await sqlite3InitModule({
        locateFile: () => './sqlite3.wasm',
        print: console.log,
        printErr: console.error,

    })

    let vfs;
    if (sqlite3.capi.sqlite3_vfs_find('opfs')) {
        vfs = 'opfs';
    }
    db = new sqlite3.oo1.DB('mydb.sqlite3', 'ct', vfs);

    console.log('add table');
    
    db.exec('CREATE TABLE IF NOT EXISTS t(a,b)');

    console.log('Insert some data using exec()...');
    for (let i = 20; i <= 25; ++i) {
      db.exec({
        sql: 'INSERT INTO t(a,b) VALUES (?,?)',
        bind: [i, i * 2],
      });
    }

    console.log('Query data with exec()...');
    db.exec({
      sql: 'SELECT * FROM t ORDER BY a LIMIT 4',
      callback: (row) => {
        console.log(row);
      },
    });

}

And here are my browser logs:

enter image description here

It seems that i’m missing something in the headers, but i dont underestand how to change it.

And the database, even without the OPFS enabled, seems to work, as it can be seen in the logs:

enter image description here

Maybe i’m missing something in the configuration or is something that can’t be done while developing locally.

Maybe it will work only when compiled and exposed in a production server that could add the headers on every response.

"Cross-Origin-Opener-Policy": "same-origin",
"Cross-Origin-Embedder-Policy": "require-corp"

Any help will be apreciated to underestand what is happening.

I have added this configurations in my angular.json, this make the sqlite-wasm load, without it i dosn’t even load the DB. But dont solve the problem with the last js file.

"serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "configurations": {
            "production": {
              "headers": {
                "Cross-Origin-Opener-Policy": "same-origin",
                "Cross-Origin-Embedder-Policy": "require-corp"
              },
              "buildTarget": "dividendos-fontend:build:production"
            },
            "development": {
              "headers": {
                "Cross-Origin-Opener-Policy": "same-origin",
                "Cross-Origin-Embedder-Policy": "require-corp"
              },
              "buildTarget": "dividendos-fontend:build:development"
            }
          },
          "defaultConfiguration": "development"
        },