Hacktoberfest 2026：メンテナが10月に向けて印を付けた、オープンで初心者向けの issue。 Hacktoberfest の issue を見る

I am trying to run SQLite on the web using Ionic Angular, but I encounter this error right after initializing SQLite.

オープン
  • 何か問題がありますか？
#652 コメント 2 件 リアクション 0 件 担当者 0 名 GitHub で見る

まだ誰も着手していません。

評価

難易度
4/5
見積もり時間
3〜5日
初心者へのやさしさ
28/100
issue の種類
バグ
明瞭さ
説明が足りない
活発さ
停滞
技術スタック
angular, sqlite, typescript, wasm
領域
databases, web-dev

調査の方向性

まず、リンクされている Ionic Angular SQLite チュートリアルと、報告されている Angular、Ionic、Capacitor、plugin のバージョンを比較しながら、Web の初期化を再現します。InitializeAppService.initializeApp と bootstrap code に示されている jeep-sqlite のセットアップを調べ、WASM エラーがデータベースの使用前に発生するかどうかを確認します。ブラウザーが報告された LinkError なしで SQLite を初期化できれば完了です。

索引モデルが issue の本文から書いたものです。

説明

bug/fix needs: triage

i am following this side and i do exact every step from this side
(https://jepiqueau.github.io/2023/08/26/Ionic7Angular-SQLite-CRUD-App.html#part-1---web---table-of-contents)

Plugin version:
{
"name": "ionic7-angular-sqlite-app",
"version": "0.0.1",
"author": "Ionic Framework",
"homepage": "https://ionicframework.com/",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"watch": "ng build --watch --configuration development",
"test": "ng test",
"lint": "ng lint",
"ionic:serve:before": "npm run copy:sql:wasm",
"copy:sql:wasm": "copyfiles -u 3 node_modules/sql.js/dist/sql-wasm.wasm src/assets"
},
"private": true,
"dependencies": {
"@angular/animations": "^20.0.0",
"@angular/common": "^20.0.0",
"@angular/compiler": "^20.0.0",
"@angular/core": "^20.0.0",
"@angular/forms": "^20.0.0",
"@angular/platform-browser": "^20.0.0",
"@angular/platform-browser-dynamic": "^20.0.0",
"@angular/router": "^20.0.0",
"@capacitor-community/sqlite": "^7.0.1",
"@capacitor/app": "7.0.1",
"@capacitor/core": "7.4.2",
"@capacitor/haptics": "7.0.1",
"@capacitor/keyboard": "7.0.1",
"@capacitor/status-bar": "7.0.1",
"@capacitor/toast": "^7.0.1",
"@ionic/angular": "^8.0.0",
"@ionic/pwa-elements": "^3.3.0",
"ionicons": "^7.0.0",
"rxjs": "~7.8.0",
"tslib": "^2.3.0",
"zone.js": "~0.15.0"
},

Platform(s):

Current behavior:
chunk-SCNEKAWF.js:58 wasm streaming compile failed: LinkError: WebAssembly.instantiate(): Import #34 "a" "I": function import requires a callable

chunk-SCNEKAWF.js:58 falling back to ArrayBuffer instantiation

chunk-SCNEKAWF.js:58 failed to asynchronously prepare wasm: LinkError: WebAssembly.instantiate(): Import #34 "a" "I": function import requires a callable

chunk-SCNEKAWF.js:58 Aborted(LinkError: WebAssembly.instantiate(): Import #34 "a" "I": function import requires a callable)

chunk-SCNEKAWF.js:58 ERROR Error: LinkError: WebAssembly.instantiate(): Import #34 "a" "I": function import requires a callable

chunk-SCNEKAWF.js:58 ERROR RuntimeError: Aborted(LinkError: WebAssembly.instantiate(): Import #34 "a" "I": function import requires a callable). Build with -sASSERTIONS for more info.

Expected behavior:

Steps to reproduce:

Related code:
import { enableProdMode, importProvidersFrom, APP_INITIALIZER } from '@angular/core';
import { bootstrapApplication } from '@angular/platform-browser';
import { IonicModule } from '@ionic/angular';

import { RouteReuseStrategy, provideRouter, withPreloading, PreloadAllModules } from '@angular/router';
import { IonicRouteStrategy, provideIonicAngular } from '@ionic/angular/standalone';

import { routes } from './app/app.routes';
import { AppComponent } from './app/app.component';
import { environment } from './environments/environment';
import { defineCustomElements as pwaElements } from '@ionic/pwa-elements/loader';
import { defineCustomElements as jeepSqlite } from 'jeep-sqlite/loader';
import { Capacitor } from '@capacitor/core';
import { InitializeAppService } from './app/services/initialize.app.service';
import { SQLiteService } from './app/services/sqlite.service';
import { StorageService } from './app/services/storage.service';
import { DbnameVersionService } from './app/services/dbname-version.service';

if (environment.production) {
enableProdMode();
}
// --> Below only required if you want to use a web platform
const platform = Capacitor.getPlatform();
if (platform === "web") {
// Web platform
// required for toast component in Browser
pwaElements(window);

// required for jeep-sqlite Stencil component
// to use a SQLite database in Browser
jeepSqlite(window);

window.addEventListener('DOMContentLoaded', async () => {
const jeepEl = document.createElement("jeep-sqlite");
document.body.appendChild(jeepEl);
await customElements.whenDefined('jeep-sqlite');
jeepEl.autoSave = true;
});
}
// Above only required if you want to use a web platform <--

// Define the APP_INITIALIZER factory
export function initializeFactory(init: InitializeAppService) {
return () => init.initializeApp();
}

bootstrapApplication(AppComponent, {
providers: [
SQLiteService,
InitializeAppService,
StorageService,
DbnameVersionService,
{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy },
importProvidersFrom(IonicModule.forRoot({})),
provideIonicAngular(),
provideRouter(routes, withPreloading(PreloadAllModules)),
{
provide: APP_INITIALIZER,
useFactory: initializeFactory,
deps: [InitializeAppService],
multi: true
}
],
});

insert short code snippets here

Other information:

Capacitor doctor:

insert the output from `npx cap doctor` here
主要言語
Swift
スター
661
フォーク
158
30日以内にマージされた PR はありません

環境構築

はじめの一歩

  1. issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
  2. 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
  3. リポジトリをフォークし、ブランチを切って変更します。
  4. issue 番号を参照したプルリクエストを送ります。

capacitor-community/sqlite のほかの issue

capacitor-community/sqlite の issue をすべて見る

似ている issue

Swift の issue をもっと見る

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。