SQLite Integration in an Angular 18 Standalone Application and CapacitorJS
This tutorial explains how to integrate SQLite into an Angular 18 application that uses standalone components and Signals. We will use the @capacitor-community/sqlite plugin to enable SQLite functionality for both Android and iOS platforms.
Prerequisites
Ensure you have the following installed:
- Node.js and npm
- CapacitorJS
- Angular 18 with standalone components and Signals
Step 1: Install Required Packages
Run the following commands to install the necessary dependencies:
npm install @capacitor-community/sqlite
npx cap sync
These commands install the SQLite plugin and synchronize the changes with the native platforms.
Step 2: Create a Database Service
The database logic will be encapsulated in a service for better maintainability.
// src/app/services/database.service.ts
import { Injectable } from '@angular/core';
import { CapacitorSQLite, SQLiteConnection, SQLiteDBConnection } from '@capacitor-community/sqlite';
@Injectable({
providedIn: 'root',
})
export class DatabaseService {
private sqlite: SQLiteConnection;
private db: SQLiteDBConnection | null = null;
constructor() {
this.sqlite = new SQLiteConnection(CapacitorSQLite);
}
async initializeDatabase(): Promise<void> {
try {
// Check connection consistency
const retCC = (await this.sqlite.checkConnectionsConsistency()).result;
// Check is connected
const isConnection = (await this.sqlite.isConnection('appDB', false)).result;
if (!isConnection && !retCC) {
// Create a new connection
this.db = await this.sqlite.createConnection('appDB', false, 'no-encryption', 1, false);
await this.db.open();
await this.createTables();
} else {
// Retrieve existing connection
this.db = await this.sqlite.retrieveConnection('appDB', false);
await this.db.open();
}
} catch (error) {
console.error('Error initializing the database:', error);
}
}
private async createTables(): Promise<void> {
if (!this.db) throw new Error('Database connection is not open');
const createTableQuery = `
CREATE TABLE IF NOT EXISTS users (
id INTEGER PRIMARY KEY AUTOINCREMENT,
name TEXT NOT NULL,
age INTEGER NOT NULL
);
`;
await this.db.execute(createTableQuery);
}
async addUser(name: string, age: number): Promise<void> {
if (!this.db) throw new Error('Database connection is not open');
const insertQuery = `INSERT INTO users (name, age) VALUES (?, ?);`;
await this.db.run(insertQuery, [name, age]);
}
async getUsers(): Promise<any[]> {
if (!this.db) throw new Error('Database connection is not open');
const result = await this.db.query('SELECT * FROM users;');
return result.values || [];
}
async closeDatabase(): Promise<void> {
if (this.db) {
await this.sqlite.closeConnection('appDB');
this.db = null;
}
}
}
Step 3: Initialize the Database Service in the Root Component
In the root component of your application, initialize the DatabaseService.
// src/app/app.component.ts
import { Component, OnInit } from '@angular/core';
import { DatabaseService } from './services/database.service';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
})
export class AppComponent implements OnDestroy, AfterViewInit {
constructor(private databaseService: DatabaseService) {}
// Important: Initialize the database connection when the component is created
async ngAfterViewInit() {
await this.databaseService.initializeDatabase();
}
// Important: Close the database connection when the component is destroyed
async ngOnDestroy() {
await this.databaseService.closeDatabase();
}
}
Step 4: Use the Database Service in a Component
You can now use the DatabaseService in any component to perform CRUD operations.
// src/app/components/user-list/user-list.component.ts
import { Component, OnInit } from '@angular/core';
import { DatabaseService } from '../../services/database.service';
@Component({
selector: 'app-user-list',
templateUrl: './user-list.component.html',
})
export class UserListComponent implements OnInit {
users: any[] = [];
constructor(private databaseService: DatabaseService) {}
async ngOnInit() {
await this.databaseService.addUser('Max Mustermann', 25);
await this.databaseService.addUser('Erika Musterfrau', 30);
this.users = await this.databaseService.getUsers();
}
}
Notes
-
Connection Consistency: Ensure you check the connection consistency using
checkConnectionsConsistency()to avoid duplicate connection errors. -
Singleton Service: Use Angular's
@InjectablewithprovidedIn: 'root'to ensure thatDatabaseServiceis a singleton. - Test on Both Platforms: Always test your implementation on both Android and iOS devices.
Conclusion
With these steps, you have successfully integrated SQLite into your Angular 18 standalone application with CapacitorJS. This implementation ensures connection consistency and encapsulates database operations in a reusable service.
Top comments (0)