Exception on using the lib in ionic 2

NathanWalker / ng2-image-lazy-load

Angular2 image lazy loader library.

http://nathanwalker.github.io/ng2-image-lazy-load

MIT License

160 stars 36 forks source link

Exception on using the lib in ionic 2 #4

Closed OmarHassan25 closed 8 years ago

OmarHassan25 commented 8 years ago

I am tring to use this lib inside my ionic2 app,

But i am getting this exception: `2 780910 error EXCEPTION: Template parse errors: Can't bind to 'imageLazyLoadItem' since it isn't a known native property ("

<div ngFor="#image of images"> <img [ERROR ->][imageLazyLoadItem]="image.url"/>

"): MyApp@0:69 3 780910 error STACKTRACE: 4 780911 error Error: Template parse errors: Can't bind to 'imageLazyLoadItem' since it isn't a known native property ("

<div ngFor="#image of images"> <img [ERROR ->][imageLazyLoadItem]="image.url"/>

-----async gap-----`

Here is my code: ` import 'es6-shim'; import {App, Platform} from 'ionic-angular'; import {StatusBar} from 'ionic-native'; import {TabsPage} from './pages/tabs/tabs'; import {HTTP_PROVIDERS} from 'angular2/http'; import { IMAGELAZYLOAD_PROVIDERS, IMAGELAZYLOAD_DIRECTIVES, WebWorker} from 'ng2-image-lazy-load/ng2-image-lazy-load';

@App({ // template: '<ion-nav [root]="rootPage">', templateUrl: 'build/pages/page1/page1.html', directives: [IMAGELAZYLOAD_DIRECTIVES], config: {} // http://ionicframework.com/docs/v2/api/config/Config/ }) export class MyApp { rootPage: any = TabsPage; public images: Array = [ { name: image 1, url: http://rack.2.mshcdn.com/media/ZgkyMDE1LzA5LzEzLzNjL2dvb2dsZXRodW1iLmIyNGE0LmpwZwpwCXRodW1iCTk1MHg1MzQjCmUJanBn/63126c72/af4/google-thumb.jpg }, { name: image 2, url: http://hyperallergic.com/wp-content/uploads/2015/09/new-google.jpg } ];

constructor(platform: Platform) {
    platform.ready().then(() => {
        // Okay, so the platform is ready and our plugins are available.
        // Here you can do any higher level native things you might need.
        StatusBar.styleDefault();
    });
}

} `

Html: <div imageLazyLoadArea> <div *ngFor="#image of images"> <img [imageLazyLoadItem]="image.url"/> </div> </div>

NathanWalker commented 8 years ago

Hi @OmarHassan25 have you added HTTP_PROVIDERS and IMAGELAZYLOAD_PROVIDERS to providers anywhere?

In the example, I show it being added to the bootstrap:

bootstrap(App, [
    HTTP_PROVIDERS,
    IMAGELAZYLOAD_PROVIDERS
]);

However it can instead be added to your component. Given your example above, you could also modify @App to become this:

@App({
// template: '',
templateUrl: 'build/pages/page1/page1.html',
directives: [IMAGELAZYLOAD_DIRECTIVES],
providers: [IMAGELAZYLOAD_PROVIDERS],  <--- I think you are missing this?
config: {} // http://ionicframework.com/docs/v2/api/config/Config/
})

OmarHassan25 commented 8 years ago

I added it, But i am now getting this error instead,

C:\Users\d\Desktop\test\test\node_modules\ng2-image-lazy-load\ng2-image-lazy-load.ts:1 import {ImageLazyLoader} from './src/providers/image-lazy-load.provider'; ^ ParseError: 'import' and 'export' may appear only with 'sourceType: module'

NathanWalker commented 8 years ago

Ah definitely sounds like some misconfiguration. Possible to share your project with me? Not sure if I can help any further without digging into the configuration of your setup there.

OmarHassan25 commented 8 years ago

here is my test app, https://www.dropbox.com/s/8wuj89pedgpie4i/test.rar?dl=0

NathanWalker commented 8 years ago

Thanks I'll have a look today.

NathanWalker commented 8 years ago

@OmarHassan25 Got ya' all squared away here: https://cdn.filestackcontent.com/NGeQ94BS6GkIxOn5NmKg?v=0

Once unzipped, do this in the directory:

npm install
typings install
ionic serve

You should see the images load in. I just copied 2 sample images I had here to show you it working. There were a couple things that needed to be done, but it's all there for ya' now. Let me know if you have further questions. And if good to go, please close this issue! Thanks!

OmarHassan25 commented 8 years ago

It is working. But may i know what was the error ? what you changed to make it working ?

NathanWalker commented 8 years ago

Hey @OmarHassan25 so it was a couple things:

The plugin needed to be published without the .ts files. I released a new version to correct that.
You had a blank (zero bytes) xhrWorker.js file. This needed to be copied from the repo into your project.
The WebWorker.workerUrl path needed to be set to a proper path given the ionic build, which was build/assets/xhrWorker.js.
The ionic gulpfile needed an extra task which would copy images from app into the build directory for use.
The images used in your app component needed a proper directory set given the build. Look at what I changed it to to learn how the relative path needs to be set.

Cheers!

OmarHassan25 commented 8 years ago

It works well for local images, when trying online images it does not work at all, In the sample replace the images urls with something like this, http://rack.2.mshcdn.com/media/ZgkyMDE1LzA5LzEzLzNjL2dvb2dsZXRodW1iLmIyNGE0LmpwZwpwCXRodW1iCTk1MHg1MzQjCmUJanBn/63126c72/af4/google-thumb.jpg

NathanWalker commented 8 years ago

hi @OmarHassan25 that's a standard CORS issue. You will need to learn more about how to deal with that on your own by researching how to handle with ionic, cordova, etc. In most cases, it's a server configuration and/or cordova xml settings.

OmarHassan25 commented 8 years ago

The issue exists also on the real device, so I think that it is not CORS issue.

Closed #4 https://github.com/NathanWalker/ng2-image-lazy-load/issues/4.

— You are receiving this because you were mentioned. Reply to this email directly or view it on GitHub https://github.com/NathanWalker/ng2-image-lazy-load/issues/4#event-616903607

NathanWalker commented 8 years ago

CORS issues exist on real devices ;) Also you should see a console error related to it... take a look at console log and you can paste your errors here.