Install & Compatibility
Where this runs
No compatibility data collected yet for this library.
Code
Verified usage
Verified import paths — ran on the pinned version, not inferred.
WebSqlite
✓ import { WebSqlite } from 'angular-web-sqlite';
✗ const WebSqlite = require('angular-web-sqlite');
ESM-only; TypeScript types included.
WebSqlite as provider
✓ providers: [WebSqlite]
✗ WebSqlite in imports array
Must be added as a provider in Angular module or component.
WebSqlite injection
✓ constructor(private webSqlite: WebSqlite) {}
✗ constructor(private webSqlite: any) {}
Use TypeScript type safety.
Shows initialization and basic CRUD with WebSqlite service.
// app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { WebSqlite } from 'angular-web-sqlite';
import { AppComponent } from './app.component';
@NgModule({
declarations: [AppComponent],
imports: [BrowserModule],
providers: [WebSqlite],
bootstrap: [AppComponent]
})
export class AppModule { }
// app.component.ts
import { Component } from '@angular/core';
import { WebSqlite } from 'angular-web-sqlite';
@Component({
selector: 'app-root',
template: '<button (click)="run()">Run SQL</button>'
})
export class AppComponent {
constructor(private db: WebSqlite) {}
async run() {
await this.db.init('mydb');
await this.db.executeSql('CREATE TABLE IF NOT EXISTS test (id INTEGER PRIMARY KEY, name TEXT)', []);
await this.db.executeSql('INSERT INTO test (name) VALUES (?)', ['Alice']);
const result = await this.db.executeSql('SELECT * FROM test', []);
console.log(result);
}
}
Errors
Common errors & fixes
Error: Module not found: Error: Can't resolve '@sqlite.org/sqlite-wasm'
Missing copy of assets from sqlite-wasm package.
fixAdd asset configuration in angular.json build options.
TypeError: Cannot read properties of undefined (reading 'executeSql')
Database not initialized before executing query.
fixCall await this.webSqlite.init(dbName) before any query.
SecurityError: Failed to construct 'Worker'
Cross-Origin-Opener-Policy and Cross-Origin-Embedder-Policy headers not set.
fixAdd headers in angular.json serve options.
Audit
Dependencies
@angular/commonoptionalPeer dependency; required for Angular common features
@angular/coreoptionalPeer dependency; required for Angular core features
@ionic/angularoptionalPeer dependency; required for Ionic integration