WebImage tag from nativescript-web-image-cache not working after webpack release

[abhayastudios]

Environment

$ tns info
✔ Getting NativeScript components versions information...
✔ Component nativescript has 6.1.0 version and is up to date.
✔ Component tns-core-modules has 6.1.0 version and is up to date.
✔ Component tns-android has 6.1.0 version and is up to date.
✔ Component tns-ios has 6.1.0 version and is up to date.

$ cat package.json
{
  "nativescript": {
    "id": "<...>",
    "tns-android": {
      "version": "6.1.0"
    },
    "tns-ios": {
      "version": "6.1.0"
    }
  },
  "description": "NativeScript Application",
  "license": "SEE LICENSE IN <your-license-filename>",
  "repository": "<fill-your-repository-here>",
  "dependencies": {
    "@angular/animations": "~8.2.0",
    "@angular/common": "~8.2.0",
    "@angular/compiler": "~8.2.0",
    "@angular/core": "~8.2.0",
    "@angular/forms": "~8.2.0",
    "@angular/platform-browser": "~8.2.0",
    "@angular/platform-browser-dynamic": "~8.2.0",
    "@angular/router": "~8.2.0",
    "@ngxs/store": "^3.3.4",
    "@sentry/browser": "^5.4.0",
    "moment": "^2.24.0",
    "nativescript-angular": "~8.2.0",
    "nativescript-appversion": "^1.4.2",
    "nativescript-bitmap-factory": "^1.8.1",
    "nativescript-geolocation": "^5.1.0",
    "nativescript-google-maps-sdk": "^2.7.0",
    "nativescript-imagepicker": "^6.3.0",
    "nativescript-iqkeyboardmanager": "^1.5.1",
    "nativescript-localize": "^4.2.0",
    "nativescript-platform": "^1.3.1",
    "nativescript-platform-css": "^1.6.8",
    "nativescript-plugin-firebase": "^9.1.1",
    "nativescript-social-share": "^1.5.2",
    "nativescript-store-update": "^1.0.2",
    "nativescript-theme-core": "~1.0.6",
    "nativescript-ui-listview": "^7.0.4",
    "nativescript-web-image-cache": "^5.0.0",
    "reflect-metadata": "~0.1.12",
    "rxjs": "^6.4.0",
    "tns-core-modules": "~6.1.0",
    "zone.js": "~0.9.1"
  },
  "devDependencies": {
    "@angular/compiler-cli": "~8.2.0",
    "@ngtools/webpack": "~8.2.0",
    "nativescript-dev-webpack": "~1.2.0",
    "typescript": "~3.5.3"
  },
  "readme": "NativeScript Application"
}

Using default webpack.config.js from package.

Describe the bug

I have an issue with the plugin nativescript-web-image-cache, which shows cached images just fine when I debug, or even create a release build on my laptop and deploy to my local phone. However, once I upload it to Google in AAB form and install from the app store, the images are not displayed. I though it might be due to something going wrong with the uglify flag, but it happens even when I don’t use uglify. This happened already on NS 5.4 with webpack, and still happens after upgrading to NS 6.1. On iOS everything works just fine.

I saw in old versions of this plugin that there was an mangle-exclude file where directives were added. Is there some equivalent in newer versions?

[abhayastudios]

OK some additional info: I was able to reproduce the issue locally (without going though Google Play).

If I run the following command everything works fine, i.e. the build is created and the app deployed to the connected device and all <WebImage> directives work properly:

$ tns run android --bundle --env.aot --env.uglify --release --key-store-path my-keystore.jks --key-store-password <pass> --key-store-alias <alias> --key-store-alias-password <pass>

However when I do the following below I run into the issue described where the images are not being displayed:

$ tns build android --bundle --env.aot --env.uglify --release --key-store-path <my-keystore>.jks --key-store-password <pass> --key-store-alias <alias> --key-store-alias-password <pass> --aab

$ bundletool build-apks --bundle=./platforms/android/app/build/outputs/bundle/release/app-release.aab --output=./app-release.apks --ks=<my-keystore>.jks --ks-pass=pass:<pass> --ks-key-alias=<alias> --key-pass=pass:<pass> --connected-device

$ bundletool install-apks --apks=./app-release.apks

Running these last commands above, the AAB & APKS files are being built as expected and then installed on my devices, but the <WebImage> directives are not working.

To be honest, not sure if this is related to webpack or anything else. The problem is now, that since the legacy flow is not supported anymore I don't know how else to check this.

Thanks!

[KristianDD]

Hi, @abhayastudios , I am sorry for the late reply. I tried to reproduce the issue, but was unable to integrate the plugin inside an NativeScript 6.1.0 application without getting compilation errors and the plugin itself doesn't have a demo application inside the repository.

Could you please create a sample application that reproduces your issue and attach it here, so we can investigate the root of this strange behavior.

[abhayastudios]

Hey @KristianDD & @NickIliev!

Sorry for the very late response. Only just now I got around to creating a test project in which the above described behaviour still occurs.

Please re-open and let me know if you need anything else.

Please note that for Android it is still needed to initialize the plugin (as opposed to what its README says) which I did in the main.ts, maybe it has to do something with that in combination with webpack?

/* Init WebImage on Android */

applicationOn(launchEvent, (args: ApplicationEventData) => {
  if (args.android) {
    initializeWebImageCache();
  }
});

[abhayastudios]

Actually, going over the latest plugin issues I found that this PR fixes the issue, so seems it is related to Fresco not webpack. Please leave the issue closed.