Angular 网站适用于 Chrome，而不是 Firefox 或 Safari答案

【问题标题】：Angular website works on Chrome, not Firefox or SafariAngular 网站适用于 Chrome，而不是 Firefox 或 Safari
【发布时间】：2021-08-20 21:21:59
【问题描述】：

我有一个由express 服务的网站，在 AWS Elastic Beanstalk、Node.js 14 上运行。登录并且在 Chrome 上一切正常，但在 Firefox 上我得到window.openDatabase is not a function，在 Safari 上我得到web sql is deprecated 当我尝试登录。网址：https://www.portapay.xyz/login。我目前不是为生产而建造的；我如何构建：ng build --configuration development。我已确保我所有的浏览器都是最新的并具有最新版本。我写的代码都没有使用window.openDatabase 或executeSql。我只使用Kinvey's SDK 连接到 MongoDB。我不使用 Cordova。

浏览器列表rc

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"
  },

【问题讨论】：

您使用的是“Web SQL 数据库”吗？此处表示已弃用，仅适用于 Chrome。不过它也有解决办法，把整个套路放在cordova的脚本里（不知道你有没有用）。看一看：stackoverflow.com/questions/18605614/…
@JuanBerzosaTejero 我写的代码都没有使用任何类型的 SQL 数据库连接；我不能代表我package.json 中的所有包裹；我应该试着弄清楚这个错误是从哪里来的，当所有的东西都编译好后就很难了；我使用Kinvey's SDK 将云数据库连接到他们的 MongoDB 后端
Kinvey 没事var db = window.openDatabase(dbName, 1, 'Kinvey WebSQL', SIZE);
@BojanKogoj 拍摄，你是对的； permalink;由于不推荐使用 Web SQL，我将向他们提出问题；谢谢
@xinthose 我撤回了接近投票。

标签： angular web-sql kinvey

【解决方案1】：

Kinvey 支持回复我，显然，在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。

【讨论】：