Ng-lazyload-image: ParseError: 'import' e 'export' podem aparecer apenas com 'sourceType: module'

Oi,

Qual é a sua configuração? Você está usando Ionic com babel ou datilografado?
Se você estiver usando o texto datilografado, pode me fornecer seu arquivo tsconfig.json ?

Atualmente estou usando [email protected] no nó 5.4
Eu uso o typescript e meu tsconfig.json é

{
  "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
  }
}

Não sei por que, mas por alguma razão o typescript tenta recompilar os arquivos de origem em vez de pegar os .js arquivos compilados.
Minha solução, no entanto, foi excluir os arquivos de origem do npm.

Então, se eu criar um novo projeto com:

$ ionic start MyIonic2Project tutorial --v2 --ts

E então mudando /app/pages/hello-ionic/hello-ionic.ts para:

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;
    }
}

e /app/pages/hello-ionic/hello-ionic.html para:

<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>

Agora parece funcionar bem com [email protected] .

Você pode dar uma olhada?

E outra coisa, a diretiva ouvirá eventos de rolagem em window se você não disser o contrário. O que você deve fazer para ionic apps, pois é um div interno que controla a rolagem.

ie

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

Veja meu exemplo acima e # 2

Funciona como um encanto, você é incrível!
Eu empacotei tudo em um componente img-lazy e vou trabalhar um pouco na animação do fadein da imagem e talvez algum recurso de cache offline

Na minha opinião, este assunto está perfeitamente encerrado 👍 👍

Que bom que funciona!

Vou trabalhar um pouco na animação do fadein da imagem

Só para você saber. Se você adicionar uma classe ng2-lazyloading , ela será automaticamente removida depois que as imagens forem carregadas e a classe ng2-lazyloaded será adicionada.

ie

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

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

Você pode ver um exemplo aqui: https://github.com/tjoskar/ng2-lazyload-image/blob/a227020c52af0fc30b6683e05c4f4a57f67b13ce/example/image.component.ts#L14 e, claro, o código-fonte: https://github.com /tjoskar/ng2-lazyload-image/blob/8e8f7d46ebad227c4584594b32d0ac9b1945a74e/src/lazyload-image.directive.ts#L77

Deixe-me saber se você tiver problemas.

e talvez algum recurso de cache offline.

Deixe-me saber se você construir algo legal;)