Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
AngularJS2 / Ionic2 : ImageCache Directive to use with imgcache.js
import { Directive, ElementRef, Input } from '@angular/core';
declare var ImgCache: any;
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');
} 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);
Copy link

ozexpert commented Jun 16, 2016

you need to call this inside of platform.ready() function first.

      ImgCache.init(() => {
        console.log('ImgCache init: success!');

        // from within this function you're now able to call other ImgCache methods
        // or you can wait for the ImgCacheReady event

      }, () => {
        console.log('ImgCache init: error! Check the log for errors');

Copy link

KillerCodeMonkey commented Jun 16, 2016

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

use OnInit LifeCycle hook

Copy link

ozexpert commented Jun 16, 2016

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

Copy link

ChristianBruno commented Jun 30, 2016

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

Copy link

trinhvanhuy commented Jul 5, 2016

Hello, i have same question with @ChristianBruno

Copy link

supafoundation commented Jul 6, 2016

Hi @ozexpert. Ive got the same question

Copy link

sdiabi commented Jul 28, 2016

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

Copy link

danielehrhardt commented Oct 3, 2016

Is this working with Ionic 2 RC0

Copy link

ozexpert commented Oct 3, 2016

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.

Copy link

gngchrs commented Oct 13, 2016

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

Copy link

gsthina commented Nov 24, 2016

Do we have to overwrite this file to or just adding your file to our ionic2 project is sufficient!?

Copy link

guyaloni commented Feb 15, 2017

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.

Copy link

alshdotme commented Feb 28, 2017


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.

Copy link

mm580486 commented Sep 27, 2017

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

Copy link

smkamranqadri commented Oct 2, 2017

Cross-origin error :-(

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment