Offline app, failed to fetch dynamically loaded components

Hello
Has anyone faced this issue.

We have an app where we are trying to show data in offline mode.
We have data stored in sqlite but if we do not access a page (only on some pages) while online, then the page fails to load, shows this error and freezes the app too.

our project is in ionic 4 and cordova.

Deploy the app with sourcemap so u know where it fails

Ionic build without the —prod flag

Thanks I tried but I have never used source map and when I tried to read the file which was causing it to break, I still cannot identify what could have caused it.
Any other tips?

Hi

I just took a better look at your OP and from the screendump I can see you seem to be importing Ionic UI from CDN. Which is not available offline.

If you want your app to work offline, you need to bundle Ionic UI in your package.

What framework are you using? Angular?VUe etc?

Angular
How do i bundle Ionic UI for offline any links I can follow ?
Thanks again for the help, we are in a pinch

well…if you are using Ionic & Angular out-of-the-box, then it should bundle itself.

Can you share package.json here?

This is our package.json
we are infact using ionic and angular

{
  "name": "hidden",
  "version": "0.0.1",
  "author": "Ionic Framework",
  "homepage": "https://ionicframework.com/",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@agm/core": "^1.0.0",
    "@angular/animations": "^7.2.11",
    "@angular/cdk": "^7.2.2",
    "@angular/common": "^7.2.2",
    "@angular/core": "^7.2.2",
    "@angular/fire": "^5.2.1",
    "@angular/forms": "^7.2.2",
    "@angular/http": "^7.2.2",
    "@angular/platform-browser": "^7.2.2",
    "@angular/platform-browser-dynamic": "^7.2.2",
    "@angular/router": "^7.2.2",
    "@google/maps": "^0.5.5",
    "@ionic-native/android-permissions": "^5.23.0",
    "@ionic-native/background-mode": "^5.34.0",
    "@ionic-native/badge": "^5.33.0",
    "@ionic-native/camera": "^5.5.1",
    "@ionic-native/clipboard": "^5.10.0",
    "@ionic-native/core": "^5.8.0",
    "@ionic-native/crop": "^5.13.0",
    "@ionic-native/deeplinks": "^5.10.0",
    "@ionic-native/device": "^5.36.0",
    "@ionic-native/email-composer": "^5.24.0",
    "@ionic-native/fcm": "^5.14.0",
    "@ionic-native/file": "^5.5.1",
    "@ionic-native/file-opener": "^5.7.0",
    "@ionic-native/file-path": "^5.7.0",
    "@ionic-native/file-picker": "^5.9.0",
    "@ionic-native/file-transfer": "^5.36.0",
    "@ionic-native/geolocation": "^5.8.0",
    "@ionic-native/globalization": "^5.28.0",
    "@ionic-native/in-app-browser": "^5.15.0",
    "@ionic-native/ionic-webview": "^5.0.0",
    "@ionic-native/keyboard": "^5.13.0",
    "@ionic-native/local-notifications": "^5.10.0",
    "@ionic-native/media": "^5.8.0",
    "@ionic-native/media-capture": "^5.19.1",
    "@ionic-native/native-keyboard": "^5.16.0",
    "@ionic-native/network": "^5.12.0",
    "@ionic-native/photo-viewer": "^5.15.1",
    "@ionic-native/preview-any-file": "^5.25.0",
    "@ionic-native/social-sharing": "^5.23.0",
    "@ionic-native/splash-screen": "^5.0.0",
    "@ionic-native/sqlite": "^5.26.0",
    "@ionic-native/status-bar": "^5.0.0",
    "@ionic-native/transfer": "^3.14.0",
    "@ionic-native/video-editor": "^5.28.0",
    "@ionic/angular": "^4.11.0",
    "@ionic/cli": "^6.2.0",
    "@ionic/storage": "^2.2.0",
    "@ngx-translate/core": "^11.0.1",
    "@ngx-translate/http-loader": "^4.0.0",
    "@types/socket.io-client": "^1.4.32",
    "ajax": "0.0.4",
    "angular-animations": "0.0.9",
    "call-number": "1.0.1",
    "com-badrit-base64": "^0.2.0",
    "com-sarriaroman-photoviewer": "^1.2.5",
    "compare-func": "^2.0.0",
    "cordova": "^8.1.2",
    "cordova-android": "^7.1.4",
    "cordova-browser": "5.0.4",
    "cordova-clipboard": "^1.3.0",
    "cordova-common": "^3.2.0",
    "cordova-ios": "^5.1.1",
    "cordova-pdf-generator": "^2.1.1",
    "cordova-plugin-actionsheet": "^2.3.3",
    "cordova-plugin-add-swift-support": "^2.0.2",
    "cordova-plugin-android-permissions": "^1.1.2",
    "cordova-plugin-background-mode": "^0.7.3",
    "cordova-plugin-badge": "^0.8.8",
    "cordova-plugin-call-directory": "^1.7.0",
    "cordova-plugin-camera": "^4.1.0",
    "cordova-plugin-camera-preview": "^0.11.2",
    "cordova-plugin-compat": "^1.2.0",
    "cordova-plugin-contacts": "^3.0.1",
    "cordova-plugin-crop": "^0.4.0",
    "cordova-plugin-device": "^2.0.3",
    "cordova-plugin-dialogs": "^2.0.2",
    "cordova-plugin-email-composer": "^0.9.2",
    "cordova-plugin-fcm-with-dependecy-updated": "^3.2.0",
    "cordova-plugin-file": "^6.0.2",
    "cordova-plugin-file-opener2": "^2.2.1",
    "cordova-plugin-file-transfer": "^1.7.1",
    "cordova-plugin-filechooser": "^1.2.0",
    "cordova-plugin-filepath": "^1.6.0",
    "cordova-plugin-filepicker": "^1.1.6",
    "cordova-plugin-geolocation": "^4.1.0",
    "cordova-plugin-globalization": "^1.11.0",
    "cordova-plugin-inappbrowser": "^3.2.0",
    "cordova-plugin-ionic-keyboard": "^2.2.0",
    "cordova-plugin-ionic-webview": "^4.2.1",
    "cordova-plugin-ios-camera-permissions": "^1.2.0",
    "cordova-plugin-local-notification": "^0.9.0-beta.2",
    "cordova-plugin-media": "^5.0.3",
    "cordova-plugin-media-capture": "^3.0.3",
    "cordova-plugin-native-keyboard": "^2.0.6",
    "cordova-plugin-network-information": "^2.0.2",
    "cordova-plugin-preview-any-file": "^0.1.7",
    "cordova-plugin-splashscreen": "^5.0.4",
    "cordova-plugin-video-editor": "git+https://github.com/ffMathy/cordova-plugin-video-editor.git",
    "cordova-plugin-whitelist": "^1.3.4",
    "cordova-plugin-x-socialsharing": "^5.6.8",
    "cordova-res": "^0.15.1",
    "cordova-sqlite-storage": "^3.4.1",
    "cordova-support-android-plugin": "^1.0.1",
    "cordova-support-google-services": "1.1.0",
    "core-js": "^2.5.4",
    "es6-promise-plugin": "^4.2.2",
    "firebase": "^6.3.3",
    "gl-ionic-background-video": "0.0.5",
    "hammerjs": "^2.0.8",
    "html-to-pdfmake": "^1.2.0",
    "install": "^0.13.0",
    "ionic-plugin-deeplinks": "^1.0.22",
    "jquery": "^3.4.1",
    "moment": "^2.24.0",
    "moment-timezone": "^0.5.27",
    "mx.ferreyra.callnumber": "0.0.2",
    "ng-animate": "^0.3.4",
    "ng-in-viewport": "^6.1.3",
    "ngx-pinch-zoom": "^1.2.5",
    "node-pre-gyp": "^0.14.0",
    "normalize-url": "^4.3.0",
    "pdfmake": "^0.1.63",
    "pdfobject": "^2.1.1",
    "phonegap-plugin-multidex": "1.0.0",
    "properties-parser": "^0.3.1",
    "run": "1.4.0",
    "rxjs": "^6.3.3",
    "rxjs-compat": "^6.5.2",
    "socket.io": "^2.2.0",
    "uk.co.workingedge.phonegap.plugin.launchnavigator": "^5.0.5",
    "videogular2": "^7.0.1",
    "zone.js": "~0.8.29"
  },
  "devDependencies": {
    "@angular-devkit/architect": "~0.12.3",
    "@angular-devkit/build-angular": "~0.13.0",
    "@angular-devkit/core": "~7.2.3",
    "@angular-devkit/schematics": "~7.2.3",
    "@angular/cli": "7.3.9",
    "@angular/compiler": "~7.2.2",
    "@angular/compiler-cli": "~7.2.2",
    "@angular/language-service": "~7.2.2",
    "@ionic/angular-toolkit": "^1.4.0",
    "@ionic/lab": "1.0.24",
    "@types/core-js": "^2.5.2",
    "@types/googlemaps": "^3.36.5",
    "@types/jasmine": "~2.8.8",
    "@types/jasminewd2": "~2.0.3",
    "@types/moment-timezone": "^0.5.12",
    "@types/node": "^10.14.10",
    "@types/socket.io": "^2.1.2",
    "codelyzer": "~4.5.0",
    "cordova-plugin-enable-cleartext-traffic": "^2.1.0",
    "jasmine-core": "~2.99.1",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~3.1.4",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.1",
    "karma-jasmine": "~1.1.2",
    "karma-jasmine-html-reporter": "^0.2.2",
    "node-sass": "^4.14.1",
    "protractor": "~5.4.0",
    "ts-node": "~8.0.0",
    "tslint": "~5.12.0",
    "typescript": "^3.2.4"
  },
  "description": "An Ionic project",
  "cordova": {
    "plugins": {
      "cordova-sqlite-storage": {},
      "cordova-plugin-file-transfer": {},
      "cordova-plugin-device": {},
      "cordova-plugin-splashscreen": {},
      "cordova-plugin-file": {},
      "cordova-plugin-geolocation": {
        "GPS_REQUIRED": "true"
      },
      "cordova-plugin-filepath": {},
      "cordova-plugin-ionic-webview": {
        "ANDROID_SUPPORT_ANNOTATIONS_VERSION": "27.+"
      },
      "cordova-plugin-file-opener2": {
        "ANDROID_SUPPORT_V4_VERSION": "27.+"
      },
      "cordova-plugin-media": {
        "KEEP_AVAUDIOSESSION_ALWAYS_ACTIVE": "NO"
      },
      "cordova-plugin-filepicker": {},
      "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."
      },
      "cordova-clipboard": {},
      "ionic-plugin-deeplinks": {
        "URL_SCHEME": "immosnapp",
        "DEEPLINK_SCHEME": "https",
        "DEEPLINK_HOST": "immosnapp.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-add-swift-support": {},
      "cordova-plugin-local-notification": {},
      "cordova-plugin-fcm-with-dependecy-updated": {
        "FCM_CORE_VERSION": "16.0.9",
        "FCM_VERSION": "18.0.0",
        "GRADLE_TOOLS_VERSION": "3.5.0",
        "GOOGLE_SERVICES_VERSION": "4.2.0"
      },
      "cordova-plugin-ios-camera-permissions": {
        "CAMERA_USAGE_DESCRIPTION": "your usage message",
        "MICROPHONE_USAGE_DESCRIPTION": "your microphone usage message here",
        "PHOTOLIBRARY_ADD_USAGE_DESCRIPTION": "your photo library usage message here",
        "PHOTOLIBRARY_USAGE_DESCRIPTION": "your photo library usage message here"
      },
      "cordova-plugin-network-information": {},
      "cordova-plugin-whitelist": {},
      "cordova-plugin-ionic-keyboard": {},
      "cordova-plugin-crop": {},
      "cordova-plugin-inappbrowser": {},
      "com-sarriaroman-photoviewer": {},
      "cordova-plugin-native-keyboard": {
        "LICENSE": "TRIAL",
        "LIC_ANDROID": "TRIAL",
        "LIC_IOS": "TRIAL"
      },
      "cordova-pdf-generator": {},
      "cordova-plugin-media-capture": {},
      "cordova-plugin-camera": {
        "ANDROID_SUPPORT_V4_VERSION": "27.+"
      },
      "mx.ferreyra.callnumber": {},
      "call-number": {},
      "cordova-plugin-android-permissions": {},
      "cordova-plugin-email-composer": {
        "ANDROID_SUPPORT_V4_VERSION": "27.+"
      },
      "cordova-plugin-preview-any-file": {},
      "cordova-plugin-filechooser": {},
      "uk.co.workingedge.phonegap.plugin.launchnavigator": {
        "GOOGLE_API_KEY_FOR_ANDROID": "AIzaSyDZ9s7RNoejWdjVeIDU6awc8kiV74DG8Oo",
        "GOOGLE_API_KEY_FOR_IOS": "AIzaSyDZ9s7RNoejWdjVeIDU6awc8kiV74DG8Oo",
        "OKHTTP_VERSION": "3.12.0",
        "LOCATION_USAGE_DESCRIPTION": "This app requires access to your location for navigation purposes"
      },
      "cordova-plugin-contacts": {},
      "com-badrit-base64": {},
      "cordova-plugin-camera-preview": {
        "ANDROID_SUPPORT_LIBRARY_VERSION": "26+"
      },
      "cordova-plugin-video-editor": {},
      "cordova-plugin-globalization": {},
      "cordova-plugin-call-directory": {
        "EXT_NAME": "Cordova-Directory",
        "ALWAYS_EMBED_SWIFT_STANDARD_LIBRARIES": "NO",
        "DEVELOPMENT_TEAM": "QM7SLXKDA5"
      },
      "cordova-plugin-badge": {},
      "cordova-plugin-background-mode": {},
      "cordova-plugin-enable-cleartext-traffic": {}
    },
    "platforms": [
      "browser",
      "ios",
      "android"
    ]
  }
}

Thx

Seems like ordinary Ionic Angular - so the bundling is done.

I wonder where in your app the reference is made to the CDN

https://cdn.jsdelivr.net/npm/@ionic/core/.....

Maybe search for “jsdelivr” in your code? Is it in index.html?

“cdn”, “jsdelivr” is not present in the entire codebase
We are quiete unsure why this is happening
Maybe its one of the package maybe ??

The puzzling thing is that we can navigate to some page no probem. In some pages we are navigating and get the same error but then the app does not hang

The error is only going away if we visit the page atleast once while online.

But we are trying to avoiod having to navigate if possible

For now I would see two pointers to continue the investigation:

  • search for jsdelivr in ALL project files, including node_modules. It must be somewhere…

  • try to figure out which action triggers the load - which page(s) and/or use actions. You can use the network tab in inspector to see when the get request is done to load the CDN. If you can figure out which action triggers the load, you can maybe pinpoint the part in the code that explicitly or implicitly does that load.

BTW, there seem to be two angular animations libraries included - not sure if that is ok nor related to this problem

Hey, we finally overcame this issue
we fixed this by following this previous topic

The issue was of bundling and polyfills. We basically have to copy some files from node_modules and inject its src in our index.html

The funny thing is that I myself made the changes as described in that topic but I guess I didn’t do it all the way.

Today another developer did it and it just worked.

Now we have another problem that is that device back button is not working.

1 Like

I find this topic disturbing.

It seems very likely that you potentially have multiple versions of Ionic Framework code in this app, and that is a recipe for disaster.

Ionic Angular apps have, as @Tommertom said, everything bundled up in the app bundle. There should be no need to load any additional scripts via <script> tags, certainly not for Ionic things.

You also really do not want to be poking around in node_modules. Things under there change and move all the time when new versions of dependent libraries are released.

The topic linked in the post above mine is for a non-Angular app. Nothing in that topic should be relevant to this situation, because it is trying to manually do something that the app developer should not be touching at all.

I expect there to be further problems in the future.

1 Like

I am only a junior and this project was apparently revived by the team before mine, it is possible that there are such issues as you describe

Now if you would be kind enough to shed more light into how i might identify multiple version of ionic framework code, if that is the case in fact and how I might resolve something like this

I liked where things were going with @Tommertom, when we were trying to get all the CDN junk out of the app. I would go back to doing that.