Ng-lazyload-image: ParseError: 'import' и 'export' могут появляться только с 'sourceType: module'

Привет,

Какая у вас установка? Вы используете Ionic с babel или машинописным текстом?
Если вы используете машинописный текст, можете ли вы дать мне свой файл tsconfig.json ?

В настоящее время я использую [email protected] на узле 5.4.
Я использую машинописный текст, а мой 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
  }
}

Я не знаю почему, но по какой-то причине typescript пытается перекомпилировать исходные файлы вместо того, чтобы брать скомпилированные файлы .js .
Мое решение, однако, заключалось в том, чтобы исключить исходные файлы из npm.

Итак, если я создам новый проект с:

$ ionic start MyIonic2Project tutorial --v2 --ts

А затем измените /app/pages/hello-ionic/hello-ionic.ts на:

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

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

Теперь вроде нормально работает с [email protected] .

Можете ли вы его попробовать?

И еще одно: директива будет прослушивать события прокрутки на window если вы не укажете иное. Что вы должны сделать для приложений ionic поскольку это внутренний div, который обрабатывает прокрутку.

т.е.

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

См. Мой пример выше и №2

Работает как шарм, ты классный!
Я упаковал все в компонент img-lazy, и я собираюсь немного поработать над анимацией затухания изображения и, возможно, какой-нибудь функцией автономного кеширования

На мой взгляд этот вопрос полностью закрыт 👍 👍

Рад, что это работает!

Я собираюсь немного поработать над анимацией затухания изображения

Просто чтобы вы знали. Если вы добавите класс ng2-lazyloading , он будет автоматически удален после загрузки изображений и будет добавлен класс ng2-lazyloaded .

т.е.

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

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

Вы можете привести пример здесь: https://github.com/tjoskar/ng2-lazyload-image/blob/a227020c52af0fc30b6683e05c4f4a57f67b13ce/example/image.component.ts#L14 и, конечно же, исходный код: https://github.com /tjoskar/ng2-lazyload-image/blob/8e8f7d46ebad227c4584594b32d0ac9b1945a74e/src/lazyload-image.directive.ts#L77

Сообщите мне, если у вас возникнут проблемы.

и, возможно, какая-то функция автономного кеширования.

Дай мне знать, если ты построишь что-нибудь крутое;)