AngularJS2 / Ionic2 : ImageCache Directive to use with imgcache.js

ionic2.image-cache.directive.ts

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

declare var ImgCache: any;

@Directive({
  selector: '[image-cache]'
})
export class ImageCacheDirective {
  constructor (
    private el: ElementRef
  ) {
    // init
  }
  
  ngOnInit() {
    this.el.nativeElement.crossOrigin = "Anonymous"; // CORS enabling

    ImgCache.isCached(this.el.nativeElement.src, (path: string, success: any) => {
      console.log('path - '+ path);
      console.log('success - '+ success);

      if (success) {
        // already cached
        console.log('already cached so using cached');

        ImgCache.useCachedFile(this.el.nativeElement);
      } else {
        // not there, need to cache the image
        console.log('not there, need to cache the image - ' + this.el.nativeElement.src);

        ImgCache.cacheFile(this.el.nativeElement.src, () => {
          console.log('cached file');

          // ImgCache.useCachedFile(el.nativeElement);
        });
      }
    });
  }
}

please, do not do anything async in a constructor function.

use OnInit LifeCycle hook

@KillerCodeMonkey Good to know.. Still learning Ng2, so my codes are bit experimental. Changed to use ngOnInit()

Hi. How do I import the imagecache.js for my project ?
The import * as imgcache from 'imgcache' not works and typescripts search imgcache returns no results. Thanks

Hello, i have same question with @ChristianBruno

Hi @ozexpert. Ive got the same question

It doesn't work if you set src attribute dynamically !
Use ngAfterViewInit method instead of OnInit.

Is this working with Ionic 2 RC0

Haven't yet tested with RC0. But actually I am not using this anymore..
With Service Worker, you can do this easily with app shell, but maybe still need work around for iOS.

@KillerCodeMonkey why is calling async functions in the constructor not recommended?

Do we have to overwrite this file to https://github.com/vitaliy-bobrov/ionic-img-cache or just adding your file to our ionic2 project is sufficient!?

I had the same problem as @ChristianBruno.

I tried adding imgcache.js with:
npm install imgcache.js --save

Then instead of:
import ImgCache from 'imgcache.js';
I used
import ImgCache from 'imgcache.js';

Now the application runs, but the cache feature doesn't work :-(
I have an dynamic image which is generated with timestamp inside it, in order to check the cache (with php imagecreate).
If I add a delay (sleep(10) for example), the image in not shown till the delay is finished.
And if I remove the image from server, I get a broken-image-url symbol...

Some helpful information:
In ImageCacheDirective I added a concole.log message on the beginning of ngOnInit. I get to see it.
However, the log messages on the beginning of the ImgCache.isCached callback are not shown - callback is not called.

@guyaloni

Create a file called declarations.d.ts file and inside this add

declare module 'imgcache.js';

Then in your component add

import ImgCache from 'imgcache.js';

Sorry if you've already done this, I got a hunch you might have not.

hi thanks for this code
how to use this code on api call ? not problem ?

Cross-origin error :-(