Fixed angular demo app issues related to newer versions of web SDK an…

…d wa-sqlite. (#442)
powersync-ja · Dec 13, 2024 · efff686 · efff686
1 parent bd8c026
commit efff686
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 7 deletions.
diff --git 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
diff --git 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 <http://localhost:8080>
 
-**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
@@ -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
@@ -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) => {