Ng-lazyload-image: ParseError: 'import' and 'export' may appear only with 'sourceType: module'

Hi,

What is your setup? Are you using Ionic with babel or typescript?
If you are using typescript, can you give me your tsconfig.json file?

I'm currently using [email protected] on node 5.4
I use typescript and my tsconfig.json is

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true
  },
  "filesGlob": [
    "**/*.ts",
    "!node_modules/**/*"
  ],
  "exclude": [
    "node_modules",
    "typings/main",
    "typings/main.d.ts"
  ],
  "compileOnSave": false,
  "atom": {
    "rewriteTsconfig": false
  }
}

I don't know why but for some reason typescript tries to recompile the source files instead of taking the compiled .js files.
My solution, however, was to exclude the source files in npm.

So if I create a new project with:

$ ionic start MyIonic2Project tutorial --v2 --ts

And then changing /app/pages/hello-ionic/hello-ionic.ts to:

import { Page } from 'ionic-angular';
import { LazyLoadImageDirective } from 'ng2-lazyload-image';

@Page({
  templateUrl: 'build/pages/hello-ionic/hello-ionic.html',
  directives: [ LazyLoadImageDirective ]
})
export class HelloIonicPage {
    defaultImage: string;
    image: string;
    offset: number;

    constructor() {
        this.defaultImage = 'https://www.placecage.com/1000/500';
        this.image = 'https://images.unsplash.com/photo-1443890923422-7819ed4101c0?fm=jpg';
        this.offset = 100;
    }
}

and /app/pages/hello-ionic/hello-ionic.html to:

<ion-navbar *navbar>
  <button menuToggle>
    <ion-icon name="menu"></ion-icon>
  </button>
  <ion-title>Hello Ionic</ion-title>
</ion-navbar>

<ion-content padding class="getting-started" #container>
  <p style="height: 1000px;">
      This starter project comes with simple tabs-based layout for apps
      that are going to primarily use a Tabbed UI.
    </p>
    <img
      [src]="defaultImage"
      [lazyLoad]="image"
      [offset]="offset"
      [scrollTarget]="container._scrollEle">
</ion-content>

It's now seems to work fine with [email protected].

Can you give it a spin?

And another thing, the directive will listen for scroll events on window if you don't tell it otherwise. Which you must do for ionic apps since it's a inner div which handle the scroll.

i.e.

<ion-content #container>
  <img [scrollTarget]="container._scrollEle" ...>
</ion-content>

See my example above and #2

Works like a charm, you're awesome!
I packed everything into an img-lazy component and I'm going to work a bit on animating the fadein of the image and maybe some offline caching feature

In my opinion this issue is perfectly closed 👍 👍

Glad it works!

I'm going to work a bit on animating the fadein of the image

Just so you know. If you add a class ng2-lazyloading, it will automatically be removed after the images has been loaded and the class ng2-lazyloaded will be added.

i.e.

// Before loaded
<img [lazyLoad]="image" class="ng2-lazyloading">

// After loaded
<img [lazyLoad]="image" class="ng2-lazyloaded">

You can se an example here: https://github.com/tjoskar/ng2-lazyload-image/blob/a227020c52af0fc30b6683e05c4f4a57f67b13ce/example/image.component.ts#L14 and of course the source code: https://github.com/tjoskar/ng2-lazyload-image/blob/8e8f7d46ebad227c4584594b32d0ac9b1945a74e/src/lazyload-image.directive.ts#L77

Let me know if you run into problems.

and maybe some offline caching feature.

Let me know if you build something cool ;)