Ng-lazyload-image: ParseError: 'आयात' और 'निर्यात' केवल 'sourceType: मॉड्यूल' के साथ प्रकट हो सकता है

को निर्मित 19 मई 2016 · 6टिप्पणियाँ · स्रोत: tjoskar/ng-lazyload-image

नमस्कार!
मैं एक आयोनिक 2 परियोजना पर कोणीय 2 के साथ काम कर रहा हूँ और मैं LazyLoad आयात करने की कोशिश कर रहा हूँ, लेकिन मैं एक संकलन त्रुटि मिलती है

my_file.js
import {Component, Input} from "angular2/core";
import {LazyLoadImageDirective} from "ng2-lazyload-image/index";

@Component({
    selector: 'image',
    template: `
        <img src="images/placeholder_big" [lazyLoad]="image" offset="50">
    `,
    directives: [LazyLoadImageDirective]
})
class ImageComponent {
    @Input('src') image;
}
export {ImageComponent}

/Users/lobetia/repo/ionic2_migration/node_modules/ng2-lazyload-image/index.ts:1
import {LazyLoadImageDirective} from './src/lazyload-image.directive';
^
ParseError: 'import' and 'export' may appear only with 'sourceType: module'

/सूचकांक लेखन के बिना मॉड्यूल को शामिल करने की कोशिश कर रहा है
import {LazyLoadImageDirective} from "ng2-lazyload-image";
मुझे एक समान त्रुटि मिलती है

/Users/lobetia/repo/ionic2_migration/node_modules/ng2-lazyload-image/src/lazyload-image.directive.ts:1
import 'rxjs/add/observable/fromEvent';
^
ParseError: 'import' and 'export' may appear only with 'sourceType: module'

मुझे नहीं पता कि इसे कैसे ठीक किया जाए और मैं यह पता नहीं लगा सकता कि क्या मेरी समस्या है या इस मॉड्यूल से संबंधित कुछ है।

क्या आप मेरी मदद कर सकते हैं ? शुक्रिया

स्रोत

LobeTia

सबसे उपयोगी टिप्पणी

और दूसरी बात, निर्देश window पर स्क्रॉल ईवेंट के लिए सुनेंगे यदि आप इसे अन्यथा नहीं बताते हैं। जो आपको ionic ऐप्स के लिए करना चाहिए क्योंकि यह एक आंतरिक div है जो स्क्रॉल को संभालता है।

अर्थात

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

ऊपर मेरा उदाहरण देखें और #2

tjoskar 19 मई 2016

👍2

सभी 6 टिप्पणियाँ

नमस्ते,

आपका सेटअप क्या है? क्या आप बेबेल या टाइपस्क्रिप्ट के साथ आयोनिक का उपयोग कर रहे हैं?
यदि आप टाइपस्क्रिप्ट का उपयोग कर रहे हैं, तो क्या आप मुझे अपनी tsconfig.json फ़ाइल दे सकते हैं?

tjoskar 19 मई 2016

मैं वर्तमान में नोड 5.4 . पर आयनिक@2.0.0-बीटा.25 का उपयोग कर रहा हूं
मैं टाइपप्रति का उपयोग करता हूं और मेरा tsconfig.json is

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

LobeTia 19 मई 2016

मुझे नहीं पता क्यों, लेकिन किसी कारण से टाइपस्क्रिप्ट संकलित .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] साथ ठीक काम करता प्रतीत होता है।

क्या आप इसे एक स्पिन दे सकते हैं?

tjoskar 19 मई 2016

👍2

अर्थात

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

ऊपर मेरा उदाहरण देखें और #2

tjoskar 19 मई 2016

👍2

एक आकर्षण की तरह काम करता है, तुम कमाल हो!
मैंने सब कुछ एक आईएमजी-आलसी घटक में पैक किया है और मैं छवि के फेडिन और शायद कुछ ऑफ़लाइन कैशिंग सुविधा को एनिमेट करने पर थोड़ा काम करने जा रहा हूं

मेरी राय में यह मुद्दा पूरी तरह से बंद है

LobeTia 20 मई 2016

खुशी है कि यह काम करता है!

मैं छवि के फ़ेडिन को एनिमेट करने पर थोड़ा काम करने जा रहा हूँ

बस तुम इतना जानते हो। यदि आप एक वर्ग 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

अगर आपको परेशानी हो तो मुझे बताएं।

और शायद कुछ ऑफ़लाइन कैशिंग सुविधा।

अगर आप कुछ अच्छा बनाते हैं तो मुझे बताएं;)

tjoskar 21 मई 2016

क्या यह पृष्ठ उपयोगी था?

0 / 5 - 0 रेटिंग्स

Ng-lazyload-image: ParseError: 'आयात' और 'निर्यात' केवल 'sourceType: मॉड्यूल' के साथ प्रकट हो सकता है

सबसे उपयोगी टिप्पणी

सभी 6 टिप्पणियाँ

संबंधित मुद्दों