diff --git a/demos/angular-supabase-todolist/.gitignore b/demos/angular-supabase-todolist/.gitignore index b22f52276..34ef67141 100644 --- a/demos/angular-supabase-todolist/.gitignore +++ b/demos/angular-supabase-todolist/.gitignore @@ -166,3 +166,5 @@ testem.log # System files .DS_Store Thumbs.db + +src/assets/@powersync \ No newline at end of file diff --git a/demos/angular-supabase-todolist/README.md b/demos/angular-supabase-todolist/README.md index 440f7edd5..34dd08e6e 100644 --- a/demos/angular-supabase-todolist/README.md +++ b/demos/angular-supabase-todolist/README.md @@ -19,7 +19,10 @@ A step-by-step guide on Supabase<>PowerSync integration is available [here](http 5. In a new terminal run `pnpm start` to start the server 6. Go to -**Note:** The Angular development server (`pnpm serve`) doesn't support service worker applications +### Notes + +- The Angular development server (`pnpm serve`) doesn't support service worker applications +- For Angular, workers need to be configured when instantiating `PowerSyncDatabase`. To do this, copy the worker assets (`pnpm powersync-web copy-assets -o src/assets` - done automatically in this demo for serving and building) and ensure the worker paths are specified ([example here](./src/app/powersync.service.ts)). ## Development Server diff --git a/demos/angular-supabase-todolist/package.json b/demos/angular-supabase-todolist/package.json index 2ec415e1e..7a1e29de2 100644 --- a/demos/angular-supabase-todolist/package.json +++ b/demos/angular-supabase-todolist/package.json @@ -2,12 +2,14 @@ "name": "angular-supabase-todolist", "version": "0.0.25", "scripts": { + "copy-assets": "pnpm powersync-web copy-assets -o src/assets", "ng": "ng", - "serve": "ng serve", + "serve": "pnpm copy-assets && ng serve", "start": "http-server -p 8080 -c-1 dist/", - "build": "ng build", + "build": "pnpm copy-assets && ng build", "format": "prettier --write .", "test:build": "pnpm build", + "prewatch": "pnpm copy-assets", "watch": "ng build --watch --configuration development" }, "private": true, diff --git a/demos/angular-supabase-todolist/src/app/powersync.service.ts b/demos/angular-supabase-todolist/src/app/powersync.service.ts index 55f9ca256..f5fb2bc08 100644 --- a/demos/angular-supabase-todolist/src/app/powersync.service.ts +++ b/demos/angular-supabase-todolist/src/app/powersync.service.ts @@ -6,9 +6,10 @@ import { Index, IndexedColumn, PowerSyncBackendConnector, + PowerSyncDatabase, Schema, Table, - WASQLitePowerSyncDatabaseOpenFactory + WASQLiteOpenFactory } from '@powersync/web'; export interface ListRecord { @@ -63,11 +64,21 @@ export class PowerSyncService { db: AbstractPowerSyncDatabase; constructor() { - const PowerSyncFactory = new WASQLitePowerSyncDatabaseOpenFactory({ + const factory = new WASQLiteOpenFactory({ + dbFilename: 'test.db', + + // Specify the path to the worker script + worker: 'assets/@powersync/worker/WASQLiteDB.umd.js' + }); + + this.db = new PowerSyncDatabase({ schema: AppSchema, - dbFilename: 'test.db' + database: factory, + sync: { + // Specify the path to the worker script + worker: 'assets/@powersync/worker/SharedSyncImplementation.umd.js' + } }); - this.db = PowerSyncFactory.getInstance(); } setupPowerSync = async (connector: PowerSyncBackendConnector) => {