Open devkbsc opened 7 months ago
jepiqueau
commented
7 months ago @devkbsc this app has not been updated to Ionic7 and Angular17 using components and not NGModules. I have updated the tutorial to include the definition of app.route.ts. But i think if you start a new app with ionic start and angular type it will create anyway this file. Take care that the two plugins are for different purpose Do to hesitate to ask me if you need more help
devkbsc
commented
7 months ago As i have started a new app with 'ionic start with parameters 'blank' and 'angular', i generated only a file named : app-routing.module.ts. I managed to create with the existed route file:
As I am a beginner to Angular ionic : i get this error when am clicking on add user :
ERROR Error: Uncaught (in promise): TypeError: Cannot read properties of undefined (reading 'run')
TypeError: Cannot read properties of undefined (reading 'run')
at user-service.ts:68:23
at Generator.next (<anonymous>)
at asyncGeneratorStep (asyncToGenerator.js:3:1)
at _next (asyncToGenerator.js:22:1)
at asyncToGenerator.js:27:1
at new ZoneAwarePromise (zone.js:1411:21)
at asyncToGenerator.js:19:1
at UserService.addUser (user-service.ts:69:31)
at users.component.ts:43:24
at Generator.next (<anonymous>)
at resolvePromise (zone.js:1193:31)
at zone.js:1100:17
at zone.js:1116:33
at asyncGeneratorStep (asyncToGenerator.js:6:1)
at _throw (asyncToGenerator.js:25:1)
at _ZoneDelegate.invoke (zone.js:368:26)
at Object.onInvoke (core.mjs:26259:33)
at _ZoneDelegate.invoke (zone.js:367:52)
at Zone.run (zone.js:129:43)
at zone.js:1257:36
It seems like the problème persiste here in services/storage.service.ts it's used in user.service.ts
async addUser(name: string) {
const sql = `INSERT INTO users (name) VALUES (?);`;
await this.db.run(sql, [name]);
await this.getUsers();
}{
"name": "ionic7-angular-sqlite-starter",
"version": "0.0.3",
"description": "Ionic7/Angular SQLite Starter Application",
"author": "Jean Pierre Quéau",
"license": "MIT",
"homepage": "./",
"scripts": {
"ng": "ng",
"start": "npm run copy:sql:wasm && ng serve",
"build:web": "npm run copy:sql:wasm && ng build",
"build:native": "npm run remove:sql:wasm && ng build",
"watch": "npm run copy:sql:wasm && 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",
"remove:sql:wasm": "rimraf src/assets/sql-wasm.wasm",
"ionic:ios": "npm run remove:sql:wasm && ionic capacitor build ios",
"ionic:android": "npm run remove:sql:wasm && ionic capacitor build android",
"electron:install": "cd electron && npm install && cd ..",
"electron:prepare": "npm run remove:sql:wasm && ng build && npx cap sync @capacitor-community/electron && npx cap copy @capacitor-community/electron",
"electron:start": "npm run electron:prepare && cd electron && npm run electron:start"
},
"private": true,
"dependencies": {
"@angular/animations": "^16.1.3",
"@angular/common": "^16.1.3",
"@angular/compiler": "^16.1.3",
"@angular/core": "^16.1.3",
"@angular/forms": "^16.1.3",
"@angular/platform-browser": "^16.1.3",
"@angular/platform-browser-dynamic": "^16.1.03",
"@angular/router": "^16.1.3",
"@capacitor-community/electron": "^4.1.2",
"@capacitor-community/sqlite": "^5.0.5-2",
"@capacitor/android": "^5.0.5",
"@capacitor/app": "5.0.2",
"@capacitor/core": "^5.0.5",
"@capacitor/dialog": "^5.0.2",
"@capacitor/haptics": "5.0.2",
"@capacitor/ios": "^5.0.5",
"@capacitor/keyboard": "5.0.2",
"@capacitor/status-bar": "5.0.2",
"@capacitor/toast": "^5.0.2",
"@ionic/angular": "^7.1.1",
"@ionic/pwa-elements": "^3.1.1",
"ionicons": "^7.1.2",
"rxjs": "~7.8.0",
"tslib": "^2.3.0",
"zone.js": "~0.13.0"
},
"devDependencies": {
"@angular-devkit/build-angular": "^16.1.2",
"@angular-eslint/builder": "^16.0.3",
"@angular-eslint/eslint-plugin": "^16.0.3",
"@angular-eslint/eslint-plugin-template": "^16.0.3",
"@angular-eslint/schematics": "^16.0.3",
"@angular-eslint/template-parser": "^16.0.3",
"@angular/cli": "^16.1.2",
"@angular/compiler": "^16.1.3",
"@angular/compiler-cli": "^16.1.3",
"@angular/language-service": "^16.1.3",
"@capacitor/cli": "^5.0.5",
"@ionic/angular-toolkit": "^9.0.0",
"@types/jasmine": "~4.3.0",
"@types/node": "^12.11.1",
"@typescript-eslint/eslint-plugin": "5.3.0",
"@typescript-eslint/parser": "5.3.0",
"copyfiles": "^2.4.1",
"eslint": "^7.26.0",
"eslint-plugin-import": "2.22.1",
"eslint-plugin-jsdoc": "30.7.6",
"eslint-plugin-prefer-arrow": "1.2.2",
"jasmine-core": "~4.6.0",
"jasmine-spec-reporter": "~5.0.0",
"karma": "~6.4.0",
"karma-chrome-launcher": "~3.2.0",
"karma-coverage": "~2.2.0",
"karma-coverage-istanbul-reporter": "~3.0.2",
"karma-jasmine": "~5.1.0",
"karma-jasmine-html-reporter": "~2.0.0",
"rimraf": "^5.0.1",
"ts-node": "^8.3.0",
"typescript": "~5.0.2"
}
}
@devkbsc i think you are mixing two things. Th angular-data-storage-sqlite-app-starter is using the capacitor-data-storage-sqlite plugin which to store key,value pairs in a sqlite database. The tutorial app is using the @capacitor-community/sqlite plugin which is a SQLite full features databases. If you decide that your app require the @capacitor-community/sqlite, start to do the tutorial step by step. Tell me what you are looking for
In this below example in the document: https://jepiqueau.github.io/2023/08/26/Ionic7Angular-SQLite-CRUD-App.html#part-1---web---table-of-contents
Where did you created ? : import { routes } from './app/app.routes' in main.ts
It is missing. It also seems deprecated. Can you provide correction of this code please.