diff --git a/docs/docs/bundler-support.md b/docs/docs/bundler-support.md index 7a0eb0a8b..7e72a881b 100644 --- a/docs/docs/bundler-support.md +++ b/docs/docs/bundler-support.md @@ -71,3 +71,120 @@ const nextConfig = { export default nextConfig ``` + +## Angular + +Create an app (skip if exists) + +```sh +npm install -g @angular/cli@latest +NG_PROJECT_NAME=${NG_PROJECT_NAME:-"ng-pglite-demo"} +ng new --ai-config=none --inline-style --inline-template --routing \ + --ssr=false --style=scss --zoneless $NG_PROJECT_NAME +cd $NG_PROJECT_NAME +``` + +1. Install `@electric-sql/pglite` package + +```sh +npm install @electric-sql/pglite +``` + +2. Update `angular.json` by adding the lines marked with `+`. If you've `jq` installed, run from terminal + +```sh +cp angular.json angular.json.bak + +jq --arg project_name "$NG_PROJECT_NAME" \ + '(.projects[$project_name].architect.build.configurations.development.externalDependencies += ["util"]) | + (.projects[$project_name].architect.build.configurations.production.externalDependencies += ["util"]) | + (.projects[$project_name].architect.build.options.allowedCommonJsDependencies += ["@electric-sql/pglite"]) | + (.projects[$project_name].architect.build.options.assets += [{"glob": "**/*", "input": "node_modules/@electric-sql/pglite/dist", "output": "/"}]) | + (.projects[$project_name].architect.serve.options.prebundle) = false' \ + angular.json > tmp.json && mv tmp.json angular.json +``` + +Or edit manually + +```json +{ + "projects": { + "ng-pglite-demo": { + "architect": { + "build": { + "options": { + "assets": [ ++ { ++ "glob": "**/*", ++ "input": "node_modules/@electric-sql/pglite/dist", ++ "output": "/" ++ } + ], ++ "allowedCommonJsDependencies": [ ++ "@electric-sql/pglite" ++ ] + }, + "configurations": { + "production": { ++ "externalDependencies": [ ++ "util" ++ ] + }, + "development": { ++ "externalDependencies": [ ++ "util" ++ ] + } + }, + }, + "serve": { ++ "options": { ++ "prebundle": false ++ } + } +``` + +3. Use PGlite in a service / component eg `src/app/app.ts` like below + +```ts +import { CommonModule } from '@angular/common' +import { Component, signal } from '@angular/core' +import { PGlite } from '@electric-sql/pglite' + +@Component({ + selector: 'app-root', + imports: [CommonModule], + template: ` +

PostgreSQL version

+ @if (version()) { + {{ version() }} + } @else { + Loading... + } + `, + styles: ``, +}) +export class App { + db = new PGlite() + version = signal(null) + + async ngOnInit() { + try { + const result = await this.db.query<{ version: string }>( + 'SELECT version()', + ) + this.version.set(result.rows[0].version) + } catch (err) { + console.error('Error initializing database:', err) + } + } +} +``` + +4. Verify + +```sh +ng serve +``` + +Visit `localhost:4200` and notice the PostgreSQL version is rendered.