Ng-lazyload-image: कोणीय यूनिवर्सल बिल्ड प्रीरेंडर त्रुटि

मुझे भी वही त्रुटि मिली, मेरे पास कोणीय सार्वभौमिक स्थापित है

``` node_modules\ng-lazyload-image\index.js:1
(फ़ंक्शन (निर्यात, आवश्यकता, मॉड्यूल, __filename, __dirname) {आयात { LazyLoadImageDirective } './src/lazyload-image.directive' से;
^^^^^^

सिंटैक्स त्रुटि: अनपेक्षित टोकन आयात
createScript पर (vm.js:80:10)
Object.runInThisContext पर (vm.js:139:10)
मॉड्यूल._कंपाइल पर (मॉड्यूल.जेएस:617:28)
Object.Module._extensions..js पर (module.js:664:10)
मॉड्यूल.लोड पर (मॉड्यूल.जेएस:566:32)
tryModuleLoad पर (module.js:506:12)
Function.Module._load पर (module.js:498:3)
मॉड्यूल.आवश्यकता पर (मॉड्यूल.जेएस:597:17)
आवश्यकता पर (आंतरिक/मॉड्यूल.जेएस:11:18)
eval पर (वेबपैक:///external_%22ng-lazyload-image%22?:1:18) ```

मैंने अपना खुद का निर्देश लिखना समाप्त कर दिया जो यूनिवर्सल के साथ काम करता है:

import { Directive, ElementRef, Inject, Input, OnInit, PLATFORM_ID} from '@angular/core';
import { isPlatformBrowser } from '@angular/common';

@Directive({
  selector: '[appLazyLoadImage]'
})
export class LazyLoadImageDirective implements OnInit {
  @Input() srcLazy: string;

  constructor(
    private el: ElementRef,
    @Inject(PLATFORM_ID) private platformId: Object,
  ) { }

  ngOnInit() {
    // only run lazy image loading in the browser
    if (isPlatformBrowser(this.platformId)) {
      // if browser supports IntersectionObserver
      if ('IntersectionObserver' in window) {
        const lazyImageObserver = new IntersectionObserver((entries, observer) => {
          entries.forEach((entry) => {
            if (entry.isIntersecting) {
              entry.target.setAttribute('src', this.srcLazy);
              entry.target.classList.add('lazy-loaded');
              lazyImageObserver.unobserve(entry.target);
            }
          });
        });
        lazyImageObserver.observe(this.el.nativeElement);
      } else {
        // Otherwise replace image by default
        this.el.nativeElement.setAttribute('src', this.srcLazy);
      }
    }
  }

}

इसे अपने मॉड्यूल में आयात करें:

import { LazyLoadImageDirective } from './lazy-load-image.directive';
...
@NgModule({
  imports: [
    CommonModule
  ],
  declarations: [
    LazyLoadImageDirective
  ],
  exports: [
    CommonModule,
    LazyLoadImageDirective
  ]
})
...etc

और इसके साथ एक छवि पर उपयोग करें:
<img src="../assets/placeholder.jpg" srcLazy="../assets/myimage.jpg" alt="Example" appLazyLoadImage />

मुझे भी वही त्रुटि मिली, मेरे पास कोणीय सार्वभौमिक स्थापित है

(function (exports, require, module, __filename, __dirname) { import { LazyLoadImageDirective } from './src/lazyload-image.directive';
                                                              ^^^^^^

SyntaxError: Unexpected token import
    at createScript (vm.js:80:10)
    at Object.runInThisContext (vm.js:139:10)
    at Module._compile (module.js:617:28)
    at Object.Module._extensions..js (module.js:664:10)
    at Module.load (module.js:566:32)
    at tryModuleLoad (module.js:506:12)
    at Function.Module._load (module.js:498:3)
    at Module.require (module.js:597:17)
    at require (internal/module.js:11:18)
    at eval (webpack:///external_%22ng-lazyload-image%22?:1:18) ```

इसके साथ काम करता है

इसे वेबपैक कॉन्फ़िगरेशन पर जोड़ा गया है

externals: [ nodeExternals({ whitelist: [ /^ng-lazyload-image/, ] })

मुझे लगता है कि angular universal केवल कॉमोनजेएस मॉड्यूल आयात कर सकता है और चूंकि ng-lazyload-image केवल ईएस-मॉड्यूल हैं क्योंकि लक्ष्य angular universal विफल रहता है।

मुझे लगता है कि हमें ng-lazyload-image लिए कई लक्ष्य निर्धारित करने होंगे, जैसा कि @kmturley वर्णन करता है। लेकिन इसका मतलब यह भी होगा कि पेड़ को हिलाने से काम नहीं चलेगा।

@xmasuku , क्या आप अपने वेबपैक कॉन्फ़िगरेशन का अधिक विस्तृत उदाहरण दे सकते हैं? आप whitelist उपयोग कहां करते हैं?

@tjoskar मैंने अपने कस्टम क्ली का उपयोग नहीं कर रहा था

मैंने एक क्ली प्रोजेक्ट तैयार किया है और मुझे वही त्रुटि मिलती है

ठीक है, मैं आज रात इसे देखने की कोशिश करूंगा

मैं कोणीय सार्वभौमिक के साथ निर्माण करने की कोशिश करते समय एक ही समस्या का अनुभव करता हूं। @tjoskar क्या आपने अपनी लाइब्रेरी बनाने के लिए ng-packagr का उपयोग करने के बारे में सोचा है? आप अपनी लाइब्रेरी को FESM2015, FESM5, और UMD स्वरूपों में बना और बंडल कर सकते हैं।
यहाँ एक नज़र डालें: https://github.com/ng-packagr/ng-packaged/blob/master/package.json#L11 (उदाहरण के लिए ng-packagr का उपयोग करके प्रोजेक्ट)।

// ऐसा लगता है कि यह सार्वभौमिक के लिए सामान्य मुद्दा है। https://github.com/angular/angular-cli/issues/7200
// मेरे पास मेरे प्रोजेक्ट पर यह सेटअप है
// इसे बदलें: --- " संकलन: सर्वर ": "tsc -p server.tsconfig.json"
// इसके साथ: --- " संकलन: सर्वर ": "नोड --max_old_space_size=3072 node_modules/webpack/bin/webpack.js --config webpack.server.config.js --progress --colors"

// फिर webpack.server.config.js बनाएं नीचे कोड जोड़ें:

const path = require('path');
const webpack = require('webpack');
const nodeExternals = require('webpack-node-externals');

module.exports = {
  mode: 'none',
  entry: {
    // This is our Express server for Dynamic universal
    server: './server.ts'
  },
  target: 'node',
  resolve: { extensions: ['.ts', '.js'] },
  externals: [ nodeExternals({
    whitelist: [
        /^ng-lazyload-image/,
    ]
  }), /.*?webpack.*?/i ],
  optimization: {
    minimize: false
  },
  output: {
    // Puts the output at the root of the dist folder
    path: path.join(__dirname, 'dist'),
    filename: '[name].js'
  },
  module: {
    rules: [
      { test: /\.ts$/, loader: 'ts-loader' },
      {
        // Mark files inside `@angular/core` as using SystemJS style dynamic imports.
        // Removing this will cause deprecation warnings to appear.
        test: /(\\|\/)@angular(\\|\/)core(\\|\/).+\.js$/,
        parser: { system: true },
      },
    ]
  },
  plugins: [
    new webpack.ContextReplacementPlugin(
      // fixes WARNING Critical dependency: the request of a dependency is an expression
      /(.+)?angular(\\|\/)core(.+)?/,
      path.join(__dirname, 'src'), // location of your src
      {} // a map of your routes
    ),
    new webpack.ContextReplacementPlugin(
      // fixes WARNING Critical dependency: the request of a dependency is an expression
      /(.+)?express(\\|\/)(.+)?/,
      path.join(__dirname, 'src'),
      {}
    )
  ]
};

// मेरा सर्वर.ts

```
आयात 'zone.js/dist/zone-node';
{enableProdMode} को '@angular/core' से इंपोर्ट करें;
// एक्सप्रेस इंजन
'@nguniversal/express-engine' से {ngExpressEngine} आयात करें;
// आलसी लोडिंग के लिए मॉड्यूल मैप आयात करें
'@nguniversal/module-map-ngfactory-loader' से {provideModuleMap} आयात करें;

आयात * 'एक्सप्रेस' से एक्सप्रेस के रूप में;
'पथ' से {शामिल हों} आयात करें;

// तेज़ सर्वर w / उत्पाद मोड प्रदान करता है (देव मोड की कभी आवश्यकता नहीं होती)
सक्षमप्रोडमोड ();

// एक्सप्रेस सर्वर
कॉन्स्ट ऐप = एक्सप्रेस ();

कॉन्स्ट पोर्ट = process.env.PORT || 4000;
const DIST_FOLDER = शामिल हों (प्रक्रिया.cwd (), 'जिला/ब्राउज़र');

// * नोट :: इसे आवश्यकता के अनुसार छोड़ दें () क्योंकि यह फ़ाइल वेबपैक से गतिशील रूप से बनाई गई है
const {AppServerModuleNgFactory, LAZY_MODULE_MAP} = आवश्यकता ('./dist/server/main');

// हमारा यूनिवर्सल एक्सप्रेस-इंजन (मिला @ https://github.com/angular/universal/tree/master/modules/express-engine)
ऐप.इंजन ('एचटीएमएल', एनजीएक्सप्रेसइंजिन ({
बूटस्ट्रैप: AppServerModuleNgFactory,
प्रदाता: [
प्रदान करेंमॉड्यूलमैप(LAZY_MODULE_MAP)
]
}));

app.set ('इंजन देखें', 'एचटीएमएल');
app.set ('विचार', DIST_FOLDER);

// उदाहरण एक्सप्रेस बाकी एपीआई समापन बिंदु
// app.get('/api/ *', (req, res) => { });// /ब्राउज़र . से स्थिर फ़ाइलों की सेवा करेंapp.get(' .*', एक्सप्रेस.स्टैटिक (DIST_FOLDER, {
अधिकतम आयु: '1 वर्ष'
}));

// सभी नियमित मार्ग यूनिवर्सल इंजन का उपयोग करते हैं
app.get('*', (req, res) => {
res.render ('इंडेक्स', {req});
});

// नोड सर्वर शुरू करें
app.listen (पोर्ट, () => {
कंसोल.लॉग ( Node Express server listening on http://localhost:${PORT} );
});

अभी के लिए, यह काम करना चाहिए।

@tjoskar मैंने आपकी शाखा का उपयोग किया और ऐसा लगता है कि बिल्ड त्रुटि के साथ समस्या ठीक हो गई है। क्या आपके पास कोई योजना है जब आप इसे विलय और जारी करने जा रहे हैं?

@Loutrinos , देरी के लिए खेद है। क्या आप यह देखने के लिए [email protected] (बीटा) स्थापित करने का प्रयास कर सकते हैं कि क्या इससे समस्या हल हो जाती है। धन्यवाद।

@tjoskar मैं 5.1.0 रिलीज में
5.1.0 कोणीय यूनिवर्सल अब और नहीं टूटता :P

@ लूट्रीनो ,

मैं 5.1.0 रिलीज में देखता हूं कि संरचना अलग है

इसके बारे में क्षमा करें, मैंने पहले की तरह ही संरचना के साथ एक नई रिलीज़ ([email protected]) बनाई। मेरे पिछले सप्ताह काफी व्यस्त रहे हैं लेकिन अब मैं व्यवसाय में वापस आ गया हूं तो मुझे बताएं कि यह आपके लिए कैसे काम करता है।

5.1.1 संस्करण स्थापित करने के बाद और मुझे यह त्रुटि मिल रही है:
ReferenceError: IntersectionObserver is not defined

@agustinarifa आपकी tsconfig.json फ़ाइल कैसी दिखती है?

मैंने अभी यह रेपो बनाया है: https://github.com/tjoskar/ng-lazyload-image-bugs/tree/master/370-universal-starter-compile और यह ठीक काम करता है। मैंने https://github.com/angular/universal-starter क्लोन किया, ng-lazyload-image (npm install [email protected]) स्थापित किया, एक छवि जोड़ी , npm run build:prerender साथ संकलित और फिर सर्वर शुरू किया: node dist/server.js ।

उत्तर के लिए धन्यवाद @tjoskar
यह अब काम कर रहा है, मैंने अपने मॉड्यूल बदल दिए हैं।
ऐप में। मॉड्यूल का उपयोग करें: LazyLoadImageModule.forRoot({}),
और अन्य मॉड्यूल में: LazyLoadImageModule.forRoot({ preset: intersectionObserverPreset, }),

एकमात्र समस्या, पहली छवि देखने के लिए ऑफ़सेट शीर्ष पर काम नहीं कर रहा है, मुझे कम से कम 1px स्क्रॉल करने की आवश्यकता है और फिर दूसरा दिखाई देने पर लोड होता है, मैं पहले 200px छवियों को लोड करना चाहता हूं

हम्म .. उपरोक्त मेरे उदाहरण में मैं केवल LazyLoadImageModule में app.module घोषित करता हूं और यह ठीक काम कर रहा है और मैं वास्तव में त्रुटि को पुन: उत्पन्न नहीं कर सकता। यह बहुत उपयोगी होगा यदि कोई त्रुटि को पुन: उत्पन्न करने के लिए एक छोटा रेपो बना सकता है (या चरण-दर-चरण निर्देश प्रदान करता है)।

@agustintarifa , ऑफ़सेट समस्या के संबंध में। क्या आप उसके लिए कोई नया मुद्दा बना सकते हैं?

नमस्ते, हम v5.1.1 को एक स्थिर बीटा के रूप में कब उम्मीद कर सकते हैं? क्योंकि मुझे SSR से भी यही समस्या है।

@ vytautas-pranskunas-, मैं इसे कल कुछ अन्य छोटे सुधारों के साथ जारी करूंगा।

सिंड्स ग्रेट

सोम पर, 1 अप्रैल 2019, 9:17 अपराह्न ऑस्कर कार्लसन नोटिफिकेशन @github.com
लिखा था:

@vytautas-pranskunas- https://github.com/vytautas-pranskunas- , मैं करूंगा
इसे कल कुछ अन्य छोटे सुधारों के साथ जारी करें।

-
आप इसे प्राप्त कर रहे हैं क्योंकि आपका उल्लेख किया गया था।
इस ईमेल का सीधे उत्तर दें, इसे GitHub पर देखें
https://github.com/tjoskar/ng-lazyload-image/issues/370#issuecomment-478709421 ,
या थ्रेड को म्यूट करें
https://github.com/notifications/unsubscribe-auth/ADvMl18aKahOsS6vr4C4h4Tagwy2p4TNks5vclsrgaJpZM4Z0lGg
.

[email protected] अब बाहर है। मुझे बताएं कि त्रुटि अभी भी होती है।

@tjoskar मैं 6.0.0 का उपयोग कर रहा हूं और समस्या यहां जारी है।

// app.module.ts

LazyLoadImageModule.forRoot({
  preset: intersectionObserverPreset
}),

और जब मैंने SSR सर्वर शुरू किया तो मुझे मिला:

ReferenceError: IntersectionObserver is not defined

रेफरी #396