[ionic 4.0.0] Failed to load resource: net::ERR_UNKNOWN_URL_SCHEME

[thenaim]

error link: cdvfile://localhost/persistent/imgcache/58f0fa6c8f79117ebbc575b1214450e63a7563d1.jpeg
screenshot

Ps: I took all the steps CORDOVA.md, but still does not work and do not understand what the problem is.
Pss: running app on android device

app.component.ts

this.platform.ready().then(() => {
    ...
    ImgCache.options.chromeQuota = 50 * 1024 * 1024;
    ImgCache.init(() => {
      console.log('OK');
    }, () => {
      console.log('ERROR');
    });
    ...
});

image-cache.directive.ts

import { Directive, ElementRef, OnInit } from '@angular/core';

declare var ImgCache: any;

@Directive({
  selector: '[appImageCache]'
})
export class ImageCacheDirective implements OnInit {
  constructor(
    private el: ElementRef
  ) { }

  ngOnInit() {
    ImgCache.isCached(this.el.nativeElement.src, (path: string, success: boolean) => {
      if (success) {
        ImgCache.useCachedFile(this.el.nativeElement);
      } else {
        ImgCache.cacheFile(this.el.nativeElement.src, () => {
          ImgCache.useCachedFile(this.el.nativeElement);
        });
      }
    });
  }
}

$ ionic info

Ionic:

   ionic (Ionic CLI)             : 4.9.0 (/usr/local/lib/node_modules/ionic)
   Ionic Framework               : @ionic/angular 4.0.0
   @angular-devkit/build-angular : 0.12.4
   @angular-devkit/schematics    : 7.2.4
   @angular/cli                  : 7.2.4
   @ionic/angular-toolkit        : 1.2.3

Cordova:

   cordova (Cordova CLI) : 8.1.2 ([email protected])
   Cordova Platforms     : android 7.1.4, browser 5.0.4, ios 4.5.5
   Cordova Plugins       : cordova-plugin-ionic-keyboard 2.1.3, cordova-plugin-ionic-webview 2.3.2, (and 30 other plugins)

System:

   Android SDK Tools : 26.1.1 (/home/ubuntu/Android/Sdk)
   NodeJS            : v10.14.2 (/usr/local/bin/node)
   npm               : 6.7.0
   OS                : Linux 4.15

[syedsaadqamar]

I'm facing the same issue

[AhsanAyaz]

@chrisben , do you have any thoughts on this issue? it seems to be blocking us from implementing the image cache :/

[AhsanAyaz]

@bossjon , I've resolved the issue by creating a function and utilizingresolveLocalFileSystemURL as follows:

actuallyNormalize(cacheUrl) {
    return new Promise((resolve, reject) => {
      window.resolveLocalFileSystemURL(cacheUrl, (entry: any) => {
        cacheUrl = entry.toURL();
        const ionicNormalizer = window['Ionic'] &&
          ((window['Ionic'].WebView && window['Ionic'].WebView.convertFileSrc) || window['Ionic'].normalizeURL);
        if (typeof ionicNormalizer === 'function') {
          cacheUrl = ionicNormalizer(cacheUrl);
          resolve(cacheUrl);
        } else {
          reject('could not find cache url');
        }
      });
    });
  }

Modified the cache function as below:

/**
   * Cache is image by using a url. If the image is already cached this method
   * will return the URL
   * @param src {string}
   */
  public cache(src: string): Observable<string> {
    return this.notifier$.pipe(
      switchMapTo(
        this.isCached(src)
          .pipe(
            flatMap(([path, success]: [string, boolean]) => {
              return success ? this.getCachedFileURL(path) : this.cacheFile(path);
            }),
            mergeMap((url: string) => {
              if (this.platform.is('ios')) {
                return of(this.normalizeURlWKWview(url));
              } else if (this.platform.is('cordova')) {
                return from(this.actuallyNormalize(url));
              }
            }),
            map((url: string) => {
              return url;
            })
          )
      )
    );
  }

Note that I'm using from and of operators from rxjs.

import { from, of } from 'rxjs';

[ravi9376]

I am facing the same issue so I have changed in code while returning URL from getLocalCacheUrl method and need to replace because now we need URL in this format

http://localhost:8080/_app_file_/'YOUR_PROJECT_STORAGE_LOCATION'/imgcache/58f0fa6c8f79117ebbc575b1214450e63a7563d1.jpeg

[tryhardest]

2+ weeks of work right here to determine that;

On iOS, the problem is the version of imgcache. The latest is 2.1.1, and using that with webview 2.5.2, the map crashes with custom avatar. Reverting to imgcache version 2.0.0 (which is what we used previously), causes the map avatar to show without the map crashing on iOS. On Android, reverting imgcache alone doesn't fix the problem. Reverting from webview plugin version 2.5.2 to 2.5.1 ixes the issue (map avatar shows and app doesn't crash). However, reverting to 2.4.0 didn't fix the issue. This may explain why some older builds didn't work that formerly did, until we were using webview plugin version 2.4.0.