Ng-lazyload-image: ParseError: 'importar' y 'exportar' pueden aparecer solo con 'sourceType: module'

Hola,

¿Cuál es tu configuración? ¿Estás usando Ionic con babel o mecanografiado?
Si está utilizando mecanografiado, ¿puede darme su archivo tsconfig.json ?

Actualmente estoy usando [email protected] en el nodo 5.4
Yo uso mecanografiado y mi tsconfig.json es

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

No sé por qué, pero por alguna razón, mecanografiado intenta recompilar los archivos fuente en lugar de tomar los archivos compilados .js .
Mi solución, sin embargo, fue excluir los archivos fuente en npm.

Entonces, si creo un nuevo proyecto con:

$ ionic start MyIonic2Project tutorial --v2 --ts

Y luego cambiando /app/pages/hello-ionic/hello-ionic.ts a:

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

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

Ahora parece funcionar bien con [email protected] .

¿Puedes darle una vuelta?

Y otra cosa, la directiva escuchará eventos de desplazamiento en window si no le dice lo contrario. Lo que debe hacer para las aplicaciones ionic ya que es un div interno que maneja el desplazamiento.

es decir

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

Vea mi ejemplo anterior y el n. ° 2

Funciona a las mil maravillas, ¡eres increíble!
Empaqueté todo en un componente img-lazy y voy a trabajar un poco para animar el desvanecimiento de la imagen y tal vez alguna función de almacenamiento en caché sin conexión

En mi opinión este tema está perfectamente cerrado 👍 👍

¡Me alegro de que funcione!

Voy a trabajar un poco en animar el desvanecimiento de la imagen.

Solo para que sepas. Si agrega una clase ng2-lazyloading , se eliminará automáticamente después de que se hayan cargado las imágenes y se agregará la clase ng2-lazyloaded .

es decir

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

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

Puedes ver un ejemplo aquí: https://github.com/tjoskar/ng2-lazyload-image/blob/a227020c52af0fc30b6683e05c4f4a57f67b13ce/example/image.component.ts#L14 y por supuesto el código fuente: https://github.com /tjoskar/ng2-lazyload-image/blob/8e8f7d46ebad227c4584594b32d0ac9b1945a74e/src/lazyload-image.directive.ts#L77

Avísame si tienes problemas.

y tal vez alguna función de almacenamiento en caché sin conexión.

Avísame si construyes algo genial;)