Angular integration

[Hiekki4]

Hello, is there a way to use this with the latest version of angular and possible with capacitor?

[hmoazzem]

Yes, I've finally got it working. Please see PR #777.

The example there is basic. A slightly better approach could be something like

src/app/app.config.ts

import { ApplicationConfig, inject, provideAppInitializer, provideBrowserGlobalErrorListeners, provideZonelessChangeDetection } from '@angular/core';
import { provideRouter, withComponentInputBinding } from '@angular/router';

import { routes } from './app.routes';
import { provideHttpClient, withFetch, withInterceptors, withInterceptorsFromDi } from '@angular/common/http';
import { PGliteService } from './pglite.service';

export const appConfig: ApplicationConfig = {
  providers: [
    provideBrowserGlobalErrorListeners(),
    provideZonelessChangeDetection(),
    provideAppInitializer(() => inject(PGliteService).init()),
    provideHttpClient(withFetch(), withInterceptorsFromDi(), withInterceptors([])),
    provideRouter(routes, withComponentInputBinding()),
  ]
};

src/app/pglite.service.ts

import { Injectable, signal, computed, DestroyRef, inject } from '@angular/core';
import { PGlite } from '@electric-sql/pglite';

@Injectable({ providedIn: 'root' })
export class PGliteService {
  private readonly destroyRef = inject(DestroyRef);
  private db: PGlite | null = null;
  private initPromise: Promise<void> | null = null;

  readonly isInitialized = signal(false);
  readonly isReady = computed(() => this.isInitialized() && this.db !== null);

  async init(): Promise<void> {
    // prevent race conditions when init() is called multiple times before the first call completes
    if (this.initPromise) return this.initPromise;
    if (this.db) return;

    return this.initPromise = (async () => {
      try {
        this.db = new PGlite('idb://pgdata');
        // do whatever initdb stuff
        const result = await this.db.query<{ version: string }>(
          'SELECT version()',
        )
        console.log('PostgreSQL version\n', result.rows[0].version)
        this.isInitialized.set(true);
        this.destroyRef.onDestroy(() => this.cleanup());
      } catch (error) {
        console.error('Database initialization failed:', error);
        this.cleanup();
        throw error;
      }
    })();
  }

  public getDB(): PGlite {
    if (!this.isInitialized() || !this.db) {
      throw new Error('Database not initialized. Call init() first.');
    }
    return this.db;
  }

And use inject(PGliteService).getDB() to get the db instance in components / services.