Ng-lazyload-image: ParseError: 'import' und 'export' dürfen nur mit 'sourceType: module' erscheinen

Hi,

Wie ist dein Setup? Verwenden Sie Ionic mit Babel oder Typoskript?
Wenn Sie Typoskript verwenden, können Sie mir Ihre tsconfig.json Datei geben?

Ich verwende derzeit [email protected] auf Knoten 5.4
Ich benutze Typescript und meine tsconfig.json ist

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

Ich weiß nicht warum, aber aus irgendeinem Grund versucht Typescript, die Quelldateien neu zu kompilieren, anstatt die kompilierten .js Dateien zu verwenden.
Meine Lösung bestand jedoch darin, die Quelldateien in npm auszuschließen.

Wenn ich also ein neues Projekt erstelle mit:

$ ionic start MyIonic2Project tutorial --v2 --ts

Und dann ändern Sie /app/pages/hello-ionic/hello-ionic.ts in:

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

und /app/pages/hello-ionic/hello-ionic.html an:

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

Es scheint jetzt mit [email protected] zu funktionieren.

Kannst du es drehen?

Und noch eine Sache, die Direktive lauscht auf Scroll-Ereignisse auf window wenn Sie es nicht anders angeben. Was Sie für ionic Apps tun müssen, da es sich um ein inneres Div handelt, das die Schriftrolle übernimmt.

dh

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

Siehe mein Beispiel oben und #2

Funktioniert wie ein Zauber, du bist großartig!
Ich habe alles in eine img-lazy-Komponente gepackt und werde ein bisschen daran arbeiten, das Einblenden des Bildes und vielleicht eine Offline-Caching-Funktion zu animieren

Meiner Meinung nach ist dieses Thema perfekt abgeschlossen 👍 👍

Schön, dass es funktioniert!

Ich werde ein bisschen daran arbeiten, das Einblenden des Bildes zu animieren

Nur damit Sie es wissen. Wenn Sie eine Klasse ng2-lazyloading hinzufügen, wird diese nach dem Laden der Bilder automatisch entfernt und die Klasse ng2-lazyloaded wird hinzugefügt.

dh

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

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

Ein Beispiel seht ihr hier: https://github.com /tjoskar/ng2-lazyload-image/blob/8e8f7d46ebad227c4584594b32d0ac9b1945a74e/src/lazyload-image.directive.ts#L77

Lassen Sie es mich wissen, wenn Sie auf Probleme stoßen.

und vielleicht eine Offline-Caching-Funktion.

Lass es mich wissen, wenn du etwas Cooles baust ;)