"TypeError: Failed to fetch“导致Ionic 5应用程序卡在闪屏上

Question

我的Ionic 5 Android应用程序在网络(ionic serve)和模拟器上都工作得很好，但在构建APK并安装到设备上(甚至在模拟器上)后，它并不会超出闪屏。查看chrome dev tools错误日志显示以下内容...

    Angular is running in development mode. Call enableProdMode() to enable production mode.
addthis_widget.js:70 
Uncaught TypeError: Cannot read property 'split' of null
        at r (addthis_widget.js:70)
        at e.exports (addthis_widget.js:70)
        at addthis_widget.js:70
        at addthis_widget.js:70
        at i (addthis_widget.js:70)
        at addthis_widget.js:70
        at HTMLDocument.onReady (addthis_widget.js:70)
    polyfills-es2015.js:4284 
    Fetch API cannot load app://localhost/svg/wifi.svg. URL scheme "app" is not supported.
        (anonymous) @ polyfills-es2015.js:4284
        app://localhost/polyfills-es2015.js:3882 

Unhandled Promise rejection: Failed to fetch ; Zone: <root> ; Task: Promise.then ; Value: TypeError: Failed to fetch
        at app://localhost/polyfills-es2015.js:4284
        at proto.(app://localhost/anonymous function) (app://localhost/polyfills-es2015.js:3794:24)
        at getSvgContent (app://localhost/6-es2015.js:277)
        at Icon.loadIcon (app://localhost/6-es2015.js:366)
        at waitUntilVisible (app://localhost/6-es2015.js:330)
        at Icon.waitUntilVisible (app://localhost/6-es2015.js:353)
        at Icon.connectedCallback (app://localhost/6-es2015.js:328)
        at safeCall (app://localhost/vendor-es2015.js:185404)
        at fireConnectedCallback (app://localhost/vendor-es2015.js:185830)
        at initializeComponent (app://localhost/vendor-es2015.js:185793) TypeError: Failed to fetch
        at app://localhost/polyfills-es2015.js:4284:36
        at proto.(anonymous function) (app://localhost/polyfills-es2015.js:3794:24)
        at getSvgContent (app://localhost/6-es2015.js:277:13)
        at Icon.loadIcon (app://localhost/6-es2015.js:366:11)
        at waitUntilVisible (app://localhost/6-es2015.js:330:12)
        at Icon.waitUntilVisible (app://localhost/6-es2015.js:353:7)
        at Icon.connectedCallback (app://localhost/6-es2015.js:328:10)
        at safeCall (app://localhost/vendor-es2015.js:185404:36)
        at fireConnectedCallback (app://localhost/vendor-es2015.js:185830:9)
        at initializeComponent (app://localhost/vendor-es2015.js:185793:13)
    api.onUnhandledError @ app://localhost/polyfills-es2015.js:3882
    2assets.kochava.com/kochava.js/v2.2/kochava.min.js?c=0.08378216348533063:1 event sent successfully
    app://localhost/plugins/cordova-plugin-fcm-with-dependecy-updated/www/FCMPlugin.js:46 FCM: has been created
    cordova.js:1237 deviceready has not fired after 5 seconds.
    cordova.js:1230 Channel not fired: onCordovaInfoReady
    cordova.js:1230 Channel not fired: onFileSystemPathsReady
    cordova.js:1230 Channel not fired: onCordovaConnectionReady
    app://localhost/vendor-es2015.js:97655 Ionic Native: deviceready did not fire within 5000ms.

 This can happen when plugins are in an inconsistent state. Try removing plugins from plugins/ and reinstalling them.

我删除了' addthis‘插件，addthis错误消失了，但'Failed to Fetch’错误仍然存在。我如何解决这个问题，使其不会卡在闪屏中？

这是package.json

{
  "name": "XXXX",
  "version": "0.0.1",
  "author": "XXXX",
  "homepage": "http://whatever.com/",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^11.2.10",
    "@angular/common": "~11.2.10",
    "@angular/core": "~11.2.10",
    "@angular/fire": "^6.1.4",
    "@angular/forms": "~11.2.10",
    "@angular/google-maps": "^11.2.10",
    "@angular/platform-browser": "~11.2.10",
    "@angular/platform-browser-dynamic": "~11.2.10",
    "@angular/router": "~11.2.10",
    "@asymmetrik/ngx-leaflet": "^8.1.0",
    "@fortawesome/angular-fontawesome": "^0.8.2",
    "@fortawesome/fontawesome-svg-core": "^1.2.35",
    "@fortawesome/free-brands-svg-icons": "^5.15.2",
    "@fortawesome/free-regular-svg-icons": "^5.15.2",
    "@fortawesome/free-solid-svg-icons": "^5.15.2",
    "@ionic-native/app-version": "^5.19.1",
    "@ionic-native/background-mode": "^5.29.0",
    "@ionic-native/badge": "^5.29.0",
    "@ionic-native/camera": "^5.32.1",
    "@ionic-native/clipboard": "^5.19.1",
    "@ionic-native/core": "^5.0.0",
    "@ionic-native/deeplinks": "^5.21.6",
    "@ionic-native/device": "^5.17.1",
    "@ionic-native/file": "^5.22.0",
    "@ionic-native/file-path": "^5.17.1",
    "@ionic-native/firebase": "^5.28.0",
    "@ionic-native/firebase-x": "^5.17.1",
    "@ionic-native/geolocation": "^5.17.1",
    "@ionic-native/in-app-browser": "^5.23.0",
    "@ionic-native/in-app-purchase-2": "^5.17.1",
    "@ionic-native/ionic-webview": "^5.32.1",
    "@ionic-native/launch-review": "^5.28.0",
    "@ionic-native/mobile-accessibility": "^5.19.1",
    "@ionic-native/network": "^5.17.1",
    "@ionic-native/photo-viewer": "^5.19.1",
    "@ionic-native/social-sharing": "^5.20.0",
    "@ionic-native/splash-screen": "^5.0.0",
    "@ionic-native/status-bar": "^5.0.0",
    "@ionic-native/video-editor": "^5.27.0",
    "@ionic/angular": "^5.6.4",
    "@ionic/storage": "^2.2.0",
    "@ngxs-labs/select-snapshot": "^3.0.0",
    "@ngxs/devtools-plugin": "^3.7.1",
    "@ngxs/storage-plugin": "^3.7.1",
    "@ngxs/store": "^3.7.1",
    "@types/esri-leaflet": "^2.1.6",
    "@types/leaflet": "^1.5.21",
    "angular2-chartjs": "^0.5.1",
    "case": "^1.6.3",
    "cc.fovea.cordova.purchase": "8.1.1",
    "com-sarriaroman-photoviewer": "^1.2.5",
    "compare-func": "^2.0.0",
    "cordova-android": "9.0.0",
    "cordova-background-upload": "^1.0.2",
    "cordova-clipboard": "^1.3.0",
    "cordova-ios": "^6.2.0",
    "cordova-plugin-androidx": "^1.0.2",
    "cordova-plugin-app-version": "^0.1.9",
    "cordova-plugin-background-upload": "^1.1.0",
    "cordova-plugin-camera": "^4.1.0",
    "cordova-plugin-fcm-with-dependecy-updated": "^7.2.0",
    "cordova-plugin-file": "^6.0.2",
    "cordova-plugin-filepath": "^1.5.6",
    "cordova-plugin-firebase": "^2.0.5",
    "cordova-plugin-firebasex": "^8.0.1",
    "cordova-plugin-geolocation": "^4.0.2",
    "cordova-plugin-inappbrowser": "^4.0.0",
    "cordova-plugin-ionic-webview": "^5.0.0",
    "cordova-plugin-network-information": "^2.0.2",
    "cordova-plugin-video-editor": "^1.1.3",
    "cordova-plugin-x-socialsharing": "^5.6.3",
    "es6-promise-plugin": "^4.2.2",
    "esri-leaflet": "^2.5.3",
    "firebase": "^7.19.0",
    "globalthis": "^1.0.2",
    "ionic-plugin-deeplinks": "^1.0.20",
    "ios-deploy": "^1.11.4",
    "leaflet": "^1.7.1",
    "leaflet.vectorgrid": "^1.3.0",
    "moment": "^2.24.0",
    "phonegap-plugin-mobile-accessibility": "^1.0.5",
    "prettier": "^2.2.1",
    "rxjs": "~6.5.5",
    "tslib": "^2.0.0",
    "zone.js": "~0.11.4"
  },
  "devDependencies": {
    "@angular-devkit/architect": "~0.1102.9",
    "@angular-devkit/build-angular": "^0.1102.9",
    "@angular-devkit/core": "~11.2.9",
    "@angular-devkit/schematics": "~11.2.9",
    "@angular/cli": "~11.2.9",
    "@angular/compiler": "~11.2.10",
    "@angular/compiler-cli": "~11.2.10",
    "@angular/language-service": "~11.2.10",
    "@ionic/angular-toolkit": " ^3.1.1",
    "@types/jasmine": "~3.5.0",
    "@types/jasminewd2": "~2.0.3",
    "@types/jest": "^26.0.22",
    "@types/node": "^12.11.1",
    "codelyzer": "^6.0.0-next.1",
    "cordova-android-firebase-gradle-release": "^4.0.0",
    "cordova-android-play-services-gradle-release": "^4.0.0",
    "cordova-plugin-androidx-adapter": "^1.1.3",
    "cordova-plugin-background-mode": "^0.7.3",
    "cordova-plugin-badge": "^0.8.8",
    "cordova-plugin-device": "^2.0.3",
    "cordova-plugin-ionic-keyboard": "^2.2.0",
    "cordova-plugin-splashscreen": "^5.0.3",
    "cordova-plugin-statusbar": "^2.4.3",
    "cordova-plugin-whitelist": "^1.3.4",
    "jasmine-core": "~3.5.0",
    "jasmine-spec-reporter": "~5.0.0",
    "karma": "~6.3.2",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage-istanbul-reporter": "~3.0.2",
    "karma-jasmine": "~3.3.0",
    "karma-jasmine-html-reporter": "^1.5.0",
    "protractor": "~7.0.0",
    "ts-node": "~7.0.0",
    "tslint": "~6.1.3",
    "typescript": "~4.1.5"
  },
  "description": "By Drury Outdoors",
  "cordova": {
    "plugins": {
      "cordova-plugin-whitelist": {},
      "cordova-plugin-statusbar": {},
      "cordova-plugin-device": {},
      "cordova-plugin-splashscreen": {},
      "cordova-plugin-ionic-webview": {
        "ANDROID_SUPPORT_ANNOTATIONS_VERSION": "27.+"
      },
      "cordova-plugin-ionic-keyboard": {},
      "cordova-plugin-background-upload": {},
      "cordova-plugin-filepath": {},
      "cordova-plugin-camera": {
        "ANDROID_SUPPORT_V4_VERSION": "27.+"
      },
      "cordova-plugin-geolocation": {},
      "cordova-plugin-network-information": {},
      "cordova-plugin-firebasex": {
        "FIREBASE_ANALYTICS_COLLECTION_ENABLED": "true",
        "FIREBASE_PERFORMANCE_COLLECTION_ENABLED": "true",
        "FIREBASE_CRASHLYTICS_COLLECTION_ENABLED": "true",
        "ANDROID_FIREBASE_MESSAGING_VERSION": "20.0.1",
        "ANDROID_ICON_ACCENT": "#FF00FFFF",
        "ANDROID_PLAY_SERVICES_TAGMANAGER_VERSION": "17.0.0",
        "ANDROID_PLAY_SERVICES_AUTH_VERSION": "17.0.0",
        "ANDROID_FIREBASE_ANALYTICS_VERSION": "17.2.1",
        "ANDROID_FIREBASE_CONFIG_VERSION": "19.0.3",
        "ANDROID_FIREBASE_PERF_VERSION": "19.0.1",
        "ANDROID_FIREBASE_AUTH_VERSION": "19.1.0",
        "ANDROID_FIREBASE_INAPPMESSAGING_VERSION": "19.0.3",
        "ANDROID_FIREBASE_FIRESTORE_VERSION": "21.4.0",
        "ANDROID_CRASHLYTICS_VERSION": "2.10.1",
        "ANDROID_CRASHLYTICS_NDK_VERSION": "2.1.1",
        "ANDROID_GSON_VERSION": "2.8.6"
      },
      "cc.fovea.cordova.purchase": {
        "BILLING_KEY": "XXXXXXXXXXXXXXXXXXXXXXXXXXX"
      },
      "cordova-plugin-app-version": {},
      "cordova-clipboard": {},
      "phonegap-plugin-mobile-accessibility": {},
      "cordova-plugin-x-socialsharing": {
        "ANDROID_SUPPORT_V4_VERSION": "24.1.1+",
        "PHOTO_LIBRARY_ADD_USAGE_DESCRIPTION": "This app requires photo library access to function properly.",
        "PHOTO_LIBRARY_USAGE_DESCRIPTION": "This app requires photo library access to function properly."
      },
      "ionic-plugin-deeplinks": {
        "URL_SCHEME": "deercast",
        "DEEPLINK_SCHEME": "https",
        "DEEPLINK_HOST": "deercast.com",
        "ANDROID_PATH_PREFIX": "/",
        "ANDROID_2_PATH_PREFIX": "/",
        "ANDROID_3_PATH_PREFIX": "/",
        "ANDROID_4_PATH_PREFIX": "/",
        "ANDROID_5_PATH_PREFIX": "/",
        "DEEPLINK_2_SCHEME": " ",
        "DEEPLINK_2_HOST": " ",
        "DEEPLINK_3_SCHEME": " ",
        "DEEPLINK_3_HOST": " ",
        "DEEPLINK_4_SCHEME": " ",
        "DEEPLINK_4_HOST": " ",
        "DEEPLINK_5_SCHEME": " ",
        "DEEPLINK_5_HOST": " "
      },
      "cordova-plugin-file": {},
      "cordova-plugin-inappbrowser": {},
      "cordova-plugin-video-editor": {},
      "cordova-plugin-fcm-with-dependecy-updated": {
        "ANDROID_FCM_VERSION": "19.0.0",
        "ANDROID_GRADLE_TOOLS_VERSION": "3.5.3",
        "ANDROID_GOOGLE_SERVICES_VERSION": "4.3.3",
        "ANDROID_DEFAULT_NOTIFICATION_ICON": "@mipmap/ic_launcher",
        "IOS_FIREBASE_MESSAGING_VERSION": "~> 7.0.0"
      },
      "com-sarriaroman-photoviewer": {},
      "cordova-plugin-badge": {},
      "cordova-plugin-background-mode": {}
    },
    "platforms": [
      "android"
    ]
  }
}

还有“离子信息”。

Ionic:

   Ionic CLI                     : 6.14.1 (/Users/blingbling/.nvm/versions/node/v10.23.0/lib/node_modules/@ionic/cli)
   Ionic Framework               : @ionic/angular 5.6.6
   @angular-devkit/build-angular : 0.1102.12
   @angular-devkit/schematics    : 11.2.12
   @angular/cli                  : 11.2.12
   @ionic/angular-toolkit        : 3.1.1

Cordova:

   Cordova CLI       : 9.0.0 (cordova-lib@9.0.1)
   Cordova Platforms : android 9.0.0
   Cordova Plugins   : cordova-plugin-ionic-keyboard 2.2.0, cordova-plugin-ionic-webview 5.0.0, (and 24 other plugins)

Utility:

   cordova-res (update available: 0.15.3) : 0.10.0
   native-run                             : 1.3.0

System:

   Android SDK Tools : 26.1.1 (/Users/blingbling/Library/Android/sdk)
   ios-deploy        : 1.11.4
   ios-sim           : 8.0.2
   NodeJS            : v10.23.0 (/Users/blingbling/.nvm/versions/node/v10.23.0/bin/node)
   npm               : 7.11.1
   OS                : macOS Big Sur
   Xcode             : Xcode 12.5 Build version 12E262

Answer 1

如果您正在使用--prod构建您的应用程序，则需要启用生产状态，在您的main.ts文件中添加以下内容

enableProdMode();

第二个错误Uncaught : Cannot read property 'split‘of null似乎是因为您正在调用函数，需要的变量未初始化或没有返回值