I have a website served by express running on AWS Elastic Beanstalk, Node.js 14. Login and everything works fine on Chrome, but on Firefox I get window.openDatabase is not a function and on Safari I get web sql is deprecated when I try to login. Website: https://www.portapay.xyz/login. I am currently not building for production; how I build: ng build --configuration development. I have made sure that all of my browsers are up to date and have the latest version. None of the code I wrote uses window.openDatabase or executeSql. I only connect to a MongoDB with Kinvey's SDK. I do not use Cordova.
browserlistrc
last 1 Chrome version
last 1 Firefox version
last 2 Edge major versions
last 2 Safari major versions
last 2 iOS major versions
Firefox ESR
not IE 11 # Angular supports IE 11 only as an opt-in. To opt-in, remove the 'not' prefix on this line.
tsconfig.json
{
"compileOnSave": false,
"compilerOptions": {
"baseUrl": "./",
"outDir": "./dist/out-tsc",
"sourceMap": true,
"declaration": false,
"downlevelIteration": true,
"experimentalDecorators": true,
"moduleResolution": "node",
"importHelpers": true,
"typeRoots": [
"node_modules/@types"
],
"target": "es2015",
"module": "es2020",
"lib": [
"es2018",
"dom"
],
"resolveJsonModule": true,
"allowJs": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"strict": true,
"strictPropertyInitialization": true,
"noImplicitAny": true,
"strictNullChecks": true,
"noImplicitReturns": true
},
"angularCompilerOptions": {
"fullTemplateTypeCheck": true,
"strictInjectionParameters": true,
"strictInputAccessModifiers": true,
"strictTemplates": false,
"enableI18nLegacyMessageIdFormat": false
},
"exclude": [
"node_modules",
"**/*.spec.ts",
"dist"
]
}
package.json
"dependencies": {
"@angular-devkit/schematics": "^12.2.2",
"@angular/animations": "^12.2.2",
"@angular/cdk": "^12.2.2",
"@angular/common": "^12.2.2",
"@angular/compiler": "^12.2.2",
"@angular/core": "^12.2.2",
"@angular/forms": "^12.2.2",
"@angular/localize": "^12.2.2",
"@angular/platform-browser": "^12.2.2",
"@angular/platform-browser-dynamic": "^12.2.2",
"@angular/router": "^12.2.2",
"@babel/plugin-proposal-class-properties": "^7.14.5",
"@fortawesome/angular-fontawesome": "^0.6.0",
"@fortawesome/fontawesome-free": "^5.15.4",
"@fortawesome/fontawesome-pro": "^5.15.4",
"@fortawesome/fontawesome-svg-core": "^1.2.36",
"@fortawesome/free-brands-svg-icons": "^5.15.4",
"@fortawesome/free-regular-svg-icons": "^5.15.4",
"@fortawesome/free-solid-svg-icons": "^5.15.4",
"@fortawesome/pro-duotone-svg-icons": "^5.15.4",
"@fortawesome/pro-light-svg-icons": "^5.15.4",
"@googlemaps/google-maps-services-js": "^3.1.16",
"@progress/kendo-angular-buttons": "^5.5.2",
"@progress/kendo-angular-charts": "^4.2.1",
"@progress/kendo-angular-common": "^2.0.0",
"@progress/kendo-angular-dateinputs": "^4.4.1",
"@progress/kendo-angular-dialog": "^4.2.3",
"@progress/kendo-angular-dropdowns": "^4.4.1",
"@progress/kendo-angular-excel-export": "^3.1.6",
"@progress/kendo-angular-grid": "^4.8.4",
"@progress/kendo-angular-indicators": "^1.1.0",
"@progress/kendo-angular-inputs": "^6.7.4",
"@progress/kendo-angular-intl": "^3.0.0",
"@progress/kendo-angular-l10n": "^3.0.0",
"@progress/kendo-angular-label": "^2.3.4",
"@progress/kendo-angular-notification": "^2.1.3",
"@progress/kendo-angular-pdf-export": "^2.1.0",
"@progress/kendo-angular-popup": "^3.0.7",
"@progress/kendo-angular-ripple": "^2.0.3",
"@progress/kendo-angular-tooltip": "^2.1.6",
"@progress/kendo-data-query": "^1.5.5",
"@progress/kendo-drawing": "^1.11.0",
"@progress/kendo-licensing": "^1.0.2",
"@progress/kendo-theme-default": "^4.41.0",
"@schematics/angular": "^9.1.15",
"@stripe/stripe-js": "^1.17.1",
"@types/axios": "^0.14.0",
"@types/chart.js": "^2.9.34",
"@types/jquery": "^3.5.6",
"@types/lodash": "^4.14.172",
"@types/loglevel": "^1.6.3",
"@types/request-ip": "0.0.37",
"@types/uuid": "^8.3.1",
"@types/winston-loggly-bulk": "^3.0.1",
"animate.css": "^3.7.2",
"axios": "^0.21.1",
"chart.js": "^2.9.4",
"compression": "^1.7.4",
"easy-pie-chart": "^2.1.7",
"express": "^4.17.1",
"gulp": "^4.0.2",
"gulp-cli": "^2.3.0",
"gulp-typescript": "^6.0.0-alpha.1",
"hammerjs": "^2.0.0",
"inactivity-countdown-timer": "^2.0.0-beta-2",
"kinvey-angular-sdk": "^5.1.1",
"lodash": "^4.17.21",
"mdb-angular-ui-kit": "^1.0.0",
"moment": "^2.29.1",
"ng-recaptcha": "^8.0.1",
"ngx-animate": "^1.0.1",
"ngx-logger": "^4.3.3",
"ngx-spinner": "^9.0.2",
"ngx-stripe": "^9.3.0",
"ngx-ui-loader": "^11.0.0",
"request-ip": "^2.1.3",
"rxjs": "^6.6.7",
"screenfull": "^3.3.3",
"stripe": "^8.170.0",
"terser": "^4.8.0",
"tslib": "^2.3.1",
"uuid": "^8.3.2",
"winston": "^3.3.3",
"winston-loggly-bulk": "^3.2.1",
"zone.js": "~0.11.4"
},
Kinvey support replied to me, apparently, you have to set your storage type when initializing KinveyModule in the imports of app.module.ts. WebSQL is the current default if it is not set. Kinvey Documentation.
import { NgModule } from '@angular/core';
import { KinveyModule, StorageProvider } from 'kinvey-angular-sdk';
@NgModule({
imports: [
KinveyModule.init({
appKey: '<appKey>',
appSecret: '<appSecret>',
storage: StorageProvider.IndexedDB
})
]
})
export class AppModule { }
IndexedDB is the replacement for WebSQL from what I could find online.