Angular 网站适用于 Chrome，不适用于 Firefox 或 Safari

Question

我在 AWS Elastic Beanstalk 上有一个由 express 运行提供服务的网站，Node.js 14。登录后在 Chrome 上一切正常，但在 Firefox 上我得到window.openDatabase is not a function 在 Safari 上，当我尝试登录时我得到 web sql is deprecated。网站：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。我不使用 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"
  },

Answer 1

Kinvey support 回复我，显然，在 app.module.ts 的 imports 中初始化 KinveyModule 时，您必须设置 storage 类型。 WebSQL 如果未设置，则为当前默认值。 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 是我能找到的 WebSQL 的替代品 online.

Angular 网站适用于 Chrome，不适用于 Firefox 或 Safari

Angular website works on Chrome, not Firefox or Safari

angular

web-sql

kinvey