Ng-lazyload-image: ParseError: '가져오기' 및 '내보내기'는 'sourceType: module'과 함께만 나타날 수 있습니다.

안녕하세요,

당신의 설정은 무엇입니까? babel 또는 typescript와 함께 Ionic을 사용하고 있습니까?
typescript를 사용하는 경우 tsconfig.json 파일을 제공할 수 있습니까?

현재 노드 5.4에서 [email protected] 를 사용
나는 typescript를 사용하고 내 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 에 대한 스크롤 이벤트를 수신한다는 것입니다. 스크롤을 처리하는 내부 div이기 때문에 ionic 앱에 대해 수행해야 하는 작업입니다.

즉

<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

문제가 발생하면 알려주십시오.

오프라인 캐싱 기능이 있을 수 있습니다.

멋진 것을 만들면 알려주세요 ;)