Ionic 6+Capacitor在Android 6设备上无法运行的问题求助

我使用Ionic Angular和Capacitor开发应用，根据Capacitor官方文档，其支持Android 5.0（API级别21）及以上版本，但在Android 6.0.1真机启动时，Logcat出现以下错误，应用仅显示闪屏和白屏，这直接影响Meta审核（Meta使用Android 6设备测试）：

2023-02-07 20:17:30.316 1291-1291/com.my.app E/ApkAssets: Error while loading asset assets/natives_blob_64.bin: java.io.FileNotFoundException: assets/natives_blob_64.bin
2023-02-07 20:17:30.316 1291-1291/com.my.app E/ApkAssets: Error while loading asset assets/snapshot_blob_64.bin: java.io.FileNotFoundException: assets/snapshot_blob_64.bin
2023-02-07 20:17:33.179 1291-1291/com.my.app E/Capacitor: System WebView is not supported
2023-02-07 20:17:33.300 1291-1381/com.my.app E/libEGL: validate_display:255 error 3008 (EGL_BAD_DISPLAY)
2023-02-07 20:17:33.546 1291-1291/com.my.app E/Capacitor/Console: File: http://localhost/ - Line 80 - Msg: Uncaught SyntaxError: Unexpected token (

我已尝试调整多种browserslist配置，并将tsconfig.ts中的target设置为es2015，但均无效果。以下是我的配置文件：

package.json 配置 #

{  
  "name": "my-app",  
  "version": "0.0.3",  
  "author": "John Smith",  
  "scripts": {  
    "ng": "ng",  
    "start": "ng serve",  
    "build": "ng build",  
    "test": "ng test",  
    "lint": "ng lint",  
    "e2e": "ng e2e",  
    "android": "ionic capacitor sync && ionic capacitor open android",  
    "ios": "ionic capacitor sync && ionic capacitor open ios",  
    "androidProd": "ionic capacitor sync && ionic capacitor build android --prod",  
    "iosProd": "ionic capacitor sync && ionic capacitor build ios --prod",  
    "buildProd": "ionic capacitor sync && ionic build --prod"  
  },  
  "browserslist": [  
    "defaults and supports es6-module",  
    "maintained node versions"  
  ],  
  "private": true,  
  "dependencies": {  
    "@angular/common": "^15.0.2",  
    "@angular/core": "^15.0.2",  
    "@angular/forms": "^15.0.2",  
    "@angular/material": "^15.0.1",  
    "@angular/platform-browser": "^15.0.2",  
    "@angular/platform-browser-dynamic": "^15.0.2",  
    "@angular/router": "^15.0.2",  
    "@auth0/angular-jwt": "^5.1.0",  
    "@awesome-cordova-plugins/camera": "^6.3.0",  
    "@awesome-cordova-plugins/core": "^6.3.0",  
    "@awesome-cordova-plugins/device": "^6.3.0",  
    "@awesome-cordova-plugins/diagnostic": "^6.3.0",  
    "@awesome-cordova-plugins/geolocation": "^6.3.0",  
    "@awesome-cordova-plugins/local-notifications": "^6.3.0",  
    "@awesome-cordova-plugins/power-optimization": "^6.3.0",  
    "@awesome-cordova-plugins/screen-orientation": "^6.3.0",  
    "@awesome-cordova-plugins/social-sharing": "^6.3.0",  
    "@capacitor-community/facebook-login": "^4.0.0",  
    "@capacitor/android": "^4.6.1",  
    "@capacitor/app": "^4.1.1",  
    "@capacitor/browser": "^4.1.0",  
    "@capacitor/core": "^4.6.1",  
    "@capacitor/ios": "4.6.1",  
    "@capacitor/keyboard": "^4.1.0",  
    "@capacitor/push-notifications": "^4.1.2",  
    "@capacitor/status-bar": "^4.1.1",  
    "@ionic/angular": "^6.3.9",  
    "@ionic/pwa-elements": "^3.1.1",  
    "@ngx-translate/core": "^14.0.0",  
    "@ngx-translate/http-loader": "^7.0.0",  
    "cordova-plugin-badge": "^0.8.8",  
    "cordova-plugin-camera": "^6.0.0",  
    "cordova-plugin-device": "^2.1.0",  
    "cordova-plugin-geolocation": "^4.1.0",  
    "cordova-plugin-local-notification": "^0.9.0-beta.2",  
    "cordova-plugin-power-optimization": "^0.0.4",  
    "cordova-plugin-screen-orientation": "^3.0.2",  
    "cordova-plugin-x-socialsharing": "^6.0.4",  
    "cordova-support-android-plugin": "^2.0.4",  
    "cordova.plugins.diagnostic": "^7.1.1",  
    "crypto-js": "^4.1.1",  
    "es6-promise-plugin": "^4.2.2",  
    "jetifier": "^2.0.0",  
    "luxon": "^3.1.1",  
    "net": "^1.0.2",  
    "rxjs": "~7.6.0",  
    "sockjs-client": "^1.6.1",  
    "stompjs": "^2.3.3",  
    "swiper": "^8.4.5",  
    "tslib": "^2.4.1",  
    "uuid": "^9.0.0",  
    "zone.js": "~0.12.0"  
  },  
  "devDependencies": {  
    "@angular-devkit/build-angular": "^15.0.2",  
    "@angular-eslint/builder": "~15.1.0",  
    "@angular-eslint/eslint-plugin": "~15.1.0",  
    "@angular-eslint/eslint-plugin-template": "~15.1.0",  
    "@angular-eslint/template-parser": "~15.1.0",  
    "@angular/cli": "^15.0.2",  
    "@angular/compiler": "^15.0.2",  
    "@angular/compiler-cli": "^15.0.2",  
    "@angular/language-service": "^15.0.2",  
    "@capacitor/cli": "^4.6.1",  
    "@ionic/angular-toolkit": "^7.0.0",  
    "@types/jasmine": "~4.3.1",  
    "@types/jasminewd2": "~2.0.10",  
    "@types/node": "^18.11.11",  
    "@typescript-eslint/eslint-plugin": "5.45.1",  
    "@typescript-eslint/parser": "5.45.1",  
    "eslint": "^8.29.0",  
    "eslint-plugin-import": "2.26.0",  
    "eslint-plugin-jsdoc": "39.6.4",  
    "eslint-plugin-prefer-arrow": "1.2.3",  
    "jasmine-core": "~4.5.0",  
    "jasmine-spec-reporter": "~7.0.0",  
    "karma": "~6.4.1",  
    "karma-chrome-launcher": "~3.1.1",  
    "karma-coverage": "~2.2.0",  
    "karma-coverage-istanbul-reporter": "~3.0.3",  
    "karma-jasmine": "~5.1.0",  
    "karma-jasmine-html-reporter": "^2.0.0",  
    "protractor": "~7.0.0",  
    "ts-node": "~10.9.1",  
    "typescript": "~4.8.2"  
  },  
  "description": "An absolute awesome app"
}

tsconfig.json 配置 #

{  
  "compileOnSave": false,  
  "compilerOptions": {  
    "baseUrl": "./",  
    "outDir": "./dist/out-tsc",  
    "sourceMap": true,  
    "declaration": false,  
    "downlevelIteration": true,  
    "experimentalDecorators": true,  
    "moduleResolution": "node",  
    "importHelpers": true,  
    "target": "es2015",  
    "module": "es2020",  
    "lib": [  
      "es2018",  
      "dom"  
    ],  
    "useDefineForClassFields": false,  
    "allowSyntheticDefaultImports": true  
  },  
  "angularCompilerOptions": {  
    "enableI18nLegacyMessageIdFormat": false,  
    "strictInjectionParameters": true,  
    "strictInputAccessModifiers": true,  
    "strictTemplates": true,  
    "allowSyntheticDefaultImports": true  
  }
}

解决方案 #

1. 修正 browserslist 配置

替换 package.json 中的 browserslist 为以下内容，明确指定兼容安卓6及以上，让Angular打包时生成更兼容的代码：

"browserslist": [
  "Android >= 6",
  "iOS >= 12",
  "last 2 versions",
  "not dead"
]

2. 调整 tsconfig.json 编译选项

修改 compilerOptions 中的模块和lib配置，降低到安卓6 WebView支持的级别：

"compilerOptions": {
  "baseUrl": "./",
  "outDir": "./dist/out-tsc",
  "sourceMap": true,
  "declaration": false,
  "downlevelIteration": true,
  "experimentalDecorators": true,
  "moduleResolution": "node",
  "importHelpers": true,
  "target": "es2015",
  "module": "es2015",
  "lib": [
    "es2015",
    "dom"
  ],
  "useDefineForClassFields": false,
  "allowSyntheticDefaultImports": true
}

3. 添加必要的 Polyfill

安装 core-js：

npm install core-js@3 --save

然后在 src/polyfills.ts 中添加以下内容，补充安卓6 WebView缺失的ES6+ API：

import 'core-js/es/array';
import 'core-js/es/object';
import 'core-js/es/promise';
import 'core-js/es/function';
import 'core-js/es/map';
import 'core-js/es/set';

4. 重新构建并同步项目

执行以下命令确保所有配置生效：

ionic build --prod
ionic capacitor sync android

然后重新编译安卓项目并测试。

5. 处理第三方依赖兼容性

检查 luxon、sockjs-client 等依赖，若仍存在兼容性问题，可替换为更兼容的库，比如用 moment.js 替代 luxon，或使用对应库的ES5兼容版本。

内容的提问来源于stack exchange，提问作者TheWieand