Ng-lazyload-image: ParseError : 'import' et 'export' peuvent apparaître uniquement avec 'sourceType: module'

Salut,

Quelle est votre configuration ? Utilisez-vous Ionic avec babel ou tapuscrit ?
Si vous utilisez dactylographié, pouvez-vous me donner votre fichier tsconfig.json ?

J'utilise actuellement [email protected] sur le nœud 5.4
J'utilise tapuscrit et mon tsconfig.json est

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

Je ne sais pas pourquoi, mais pour une raison quelconque, le typescript essaie de recompiler les fichiers source au lieu de prendre les fichiers .js compilés.
Ma solution, cependant, consistait à exclure les fichiers source dans npm.

Donc si je crée un nouveau projet avec :

$ ionic start MyIonic2Project tutorial --v2 --ts

Et puis en changeant /app/pages/hello-ionic/hello-ionic.ts en :

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

et /app/pages/hello-ionic/hello-ionic.html à :

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

Cela semble maintenant fonctionner correctement avec [email protected] .

Pouvez-vous lui donner un tour?

Et une autre chose, la directive écoutera les événements de défilement sur window si vous ne lui dites pas le contraire. Ce que vous devez faire pour les applications ionic car c'est un div interne qui gère le défilement.

c'est à dire

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

Voir mon exemple ci-dessus et #2

Fonctionne comme un charme, vous êtes génial!
J'ai tout emballé dans un composant img-lazy et je vais travailler un peu sur l'animation du fondu de l'image et peut-être sur une fonction de mise en cache hors ligne

A mon avis ce sujet est parfaitement clos 👍 👍

Content que ça marche !

Je vais travailler un peu sur l'animation du fondu de l'image

Juste pour que tu saches. Si vous ajoutez une classe ng2-lazyloading , elle sera automatiquement supprimée après le chargement des images et la classe ng2-lazyloaded sera ajoutée.

c'est à dire

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

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

Vous pouvez voir un exemple ici : https://github.com/tjoskar/ng2-lazyload-image/blob/a227020c52af0fc30b6683e05c4f4a57f67b13ce/example/image.component.ts#L14 et bien sûr le code source : https://github.com /tjoskar/ng2-lazyload-image/blob/8e8f7d46ebad227c4584594b32d0ac9b1945a74e/src/lazyload-image.directive.ts#L77

Faites-moi savoir si vous rencontrez des problèmes.

et peut-être une fonction de mise en cache hors ligne.

Faites-moi savoir si vous construisez quelque chose de cool ;)