Ng-lazyload-image: LazzLoadImageHooks के लिए अमान्य प्रदाता में त्रुटि। यूज़ क्लिक्स को अपरिभाषित नहीं किया जा सकता है।

एक ही मुद्दा यहाँ

मैं एक ही मुद्दा मिलता है।
कोई मदद कर सकता है?

मुझे एक ही मुद्दा मिला .... हमारी मदद करो

उम ... मैं इसे ठीक करने तक 7.1.0 संस्करण के रूप में उपयोग कर रहा हूं।

ng-lazyload-image का कौन सा संस्करण आप उपयोग कर रहे हैं ( npm ls ng-lazyload-image चलाकर इसकी जाँच करें)।

क्या आपको यह त्रुटि बिल्ड टाइम या ब्राउज़र कंसोल के तहत मिलती है?

क्या इस मुद्दे के साथ एक छोटा रेपो बनाना संभव है? मैं उदाहरण फ़ोल्डर में कोणीय 9 का उपयोग कर रहा हूं: https://github.com/tjoskar/ng-lazyload-image/blob/master/example/package.json और मैं वहां समस्या नहीं देख सकता? और इस कोड सैंडबॉक्स में नहीं: https://codesandbox.io/s/lazy-load-image-with-httpclient-to538?file=/src/app/app.module.ts (उदाहरण के लिए)

@tjoskar यह त्रुटि बिल्ड टाइम में हुई।

त्रुटि: LazyLoadImageHooks के लिए अमान्य प्रदाता। यूज़ क्लिक्स को अपरिभाषित नहीं किया जा सकता है।
आमतौर पर ऐसा तब होता है जब:
1. वहाँ एक परिपत्र निर्भरता है (index.ts (बैरल) फ़ाइलों का उपयोग करके कारण हो सकता है)।
2. कक्षा का उपयोग घोषित होने से पहले किया गया था। इस मामले में आगे का प्रयोग करें।

एक अनहेल्दी अपवाद हुआ: LazyLoadImageHooks के लिए अमान्य प्रदाता। यूज़ क्लिक्स को अपरिभाषित नहीं किया जा सकता है।
आमतौर पर ऐसा तब होता है जब:
1. वहाँ एक परिपत्र निर्भरता है (index.ts (बैरल) फ़ाइलों का उपयोग करके कारण हो सकता है)।
2. कक्षा का उपयोग घोषित होने से पहले किया गया था। इस मामले में आगे का प्रयोग करें।

कोणीय पुस्तकालय बनाते समय मेरी यह त्रुटि है
संस्करण 7 के साथ ऐसा नहीं होता है

मैं इसे पुन: पेश नहीं कर सकता। मैंने अभी एक नया कोणीय 9 ऐप (9.1.9) बनाया है:

❯ ng new my-app

❯ npm ls @angular/core
[email protected]
└── @angular/[email protected]

मैंने तब निम्नलिखित परिवर्तन किए: https://github.com/tjoskar/ng-lazyload-image-bugs/commit/7fe50bd1631a20e7bcfed82f2a34aca6b50b3333

और बिना किसी मुद्दे के npm run build ( ng build ) चलाएं।

इसे ठीक करने के लिए मुझे आपकी मदद चाहिए।

1. क्या आप अपने स्वयं के कस्टम हुक बनाते हैं? यदि हां, तो क्या आपके हुक में कोई निर्भरता है?
2. क्या आप LazyLoadImageModule को कई NgModule जोड़ते हैं?
3. क्या आप एक रेपो बना सकते हैं जहाँ आप इस त्रुटि को दोहराते हैं? या कम से कम मुझे कुछ कोड स्निपेट दें कि आप इसका उपयोग कैसे कर रहे हैं।

कोशिश करें कि आप एप्लिकेशन न बनाएं बल्कि लाइब्रेरी बनाएं
इन विशिष्टताओं का उपयोग करें
https://angular.io/guide/creating-lbooks
मॉड्यूल आयात करें और इसे npm पर जारी करने का प्रयास करें

@ इमानुएल-गेलॉटी, मैं अनुसरण नहीं करता। ng-lazyload-image एक पुस्तकालय है, और इसे npm पर प्रकाशित किया जाता है। मुझे यह आभास हुआ कि आप किसी एप्लिकेशन में ng-lazyload-image का उपयोग कर रहे हैं, इसलिए मैंने एक एप्लिकेशन बनाने का प्रयास किया और लाइब्रेरी ( ng-lazyload-image ) को आयात किया।

क्या आप मुझे बता रहे हैं कि आप एक पुस्तकालय बना रहे हैं और आप एक निर्भरता के रूप में ng-lazyload-image का उपयोग करना चाहते हैं? या क्या आप यह सुझाव देते हैं कि मुझे आपके द्वारा लिंक की गई मार्गदर्शिका का अनुसरण करके एक नई लाइब्रेरी बनानी चाहिए और नए बनाए गए लाइब्रेरी में कोड को माइग्रेट करना चाहिए?

मेरे मामले में उपरोक्त त्रुटि तब होती है जब:

1. मैं अपने UI के लिए एक लाइब्रेरी बनाता हूं
2. आयात LazyLoadImageModule
3. मैं एक निर्माण करता हूं और फिर npm पर रिलीज करता हूं

क्या आप ऐसा करने के लिए कह सकते हैं?
मेरे पास रेपो नहीं है क्योंकि प्रोजेक्ट निजी है।

जब आप अपने पुस्तकालय का निर्माण करते हैं या जब आप उस एप्लिकेशन का निर्माण करते हैं, जो आपके पुस्तकालय का उपयोग कर रहा है, तो क्या यह विफल रहता है?

मैंने अब निम्नलिखित किया:

❯ ng new my-workspace --create-application=false
CREATE my-workspace/README.md (1028 bytes)
CREATE my-workspace/.editorconfig (274 bytes)
CREATE my-workspace/.gitignore (631 bytes)
CREATE my-workspace/angular.json (136 bytes)
CREATE my-workspace/package.json (1196 bytes)
CREATE my-workspace/tsconfig.json (489 bytes)
CREATE my-workspace/tslint.json (2933 bytes)
✔ Packages installed successfully.

❯ ng generate library my-lib
CREATE projects/my-lib/README.md (986 bytes)
CREATE projects/my-lib/karma.conf.js (1022 bytes)
CREATE projects/my-lib/ng-package.json (155 bytes)
CREATE projects/my-lib/package.json (184 bytes)
CREATE projects/my-lib/tsconfig.lib.json (435 bytes)
CREATE projects/my-lib/tsconfig.lib.prod.json (97 bytes)
CREATE projects/my-lib/tsconfig.spec.json (246 bytes)
CREATE projects/my-lib/tslint.json (247 bytes)
CREATE projects/my-lib/src/public-api.ts (155 bytes)
CREATE projects/my-lib/src/test.ts (781 bytes)
CREATE projects/my-lib/src/lib/my-lib.module.ts (222 bytes)
CREATE projects/my-lib/src/lib/my-lib.component.spec.ts (622 bytes)
CREATE projects/my-lib/src/lib/my-lib.component.ts (264 bytes)
CREATE projects/my-lib/src/lib/my-lib.service.spec.ts (353 bytes)
CREATE projects/my-lib/src/lib/my-lib.service.ts (134 bytes)
UPDATE angular.json (1383 bytes)
UPDATE package.json (1360 bytes)
UPDATE tsconfig.json (588 bytes)
✔ Packages installed successfully.

❯ cd projects/my-lib
❯ npm install ng-lazyload-image -D
+ [email protected]
added 1 package from 1 contributor and audited 1 package in 1.034s
found 0 vulnerabilities

# I made the following changes: https://github.com/tjoskar/ng-lazyload-image-bugs/commit/1bf60bcbf6133751c41f52cd3d837614dfb60bd0

❯ cd ../..
❯ ng build my-lib
Building Angular Package
******************************************************************************
It is not recommended to publish Ivy libraries to NPM repositories.
Read more here: https://v9.angular.io/guide/ivy#maintaining-library-compatibility
******************************************************************************

------------------------------------------------------------------------------
Building entry point 'my-lib'
------------------------------------------------------------------------------
Compiling TypeScript sources through ngc
Bundling to FESM2015
Bundling to FESM5
Bundling to UMD
WARNING: No name was provided for external module 'ng-lazyload-image' in output.globals – guessing 'ngLazyloadImage'
Minifying UMD bundle
Writing package metadata
Removing devDependencies section in package.json.
Built my-lib

------------------------------------------------------------------------------
Built Angular Package
 - from: ng-lazyload-image-bugs/463-invalid-provider-for-lazyLoadImageHook-libs/projects/my-lib
 - to:   ng-lazyload-image-bugs/463-invalid-provider-for-lazyLoadImageHook-libs/dist/my-lib
------------------------------------------------------------------------------

पुस्तकालय है: https://github.com/tjoskar/ng-lazyload-image-bugs/tree/master/463-invalid-provider-for-lazyLoadImageHook-lazs

और यहाँ मेरे द्वारा किए गए बदलाव हैं: https://github.com/tjoskar/ng-lazyload-image-bugs/commit/1bf60bcbf6133751c41f52cd3d8376bdfb60bd0

मैं समझता हूं कि यदि आपकी परियोजनाएं निजी हैं और आप अपना कोड साझा नहीं कर सकते हैं, लेकिन यह अच्छी मदद होगी यदि आप एक छोटी परियोजना बना सकते हैं जहां आप त्रुटि को पुन: उत्पन्न कर सकते हैं।

जब मैं लाइब्रेरी का निर्माण करता हूं तो यह विफल हो जाता है, जैसे ही मैं कोड साझा करने का प्रयास कर सकता हूं।

मुझे एक ही मुद्दा मिला :(। मैं चाइल्ड मॉड्यूल में LAZY LOAD MODULE जोड़ रहा था

मैं Ionic 5, कोणीय 9 का उपयोग कर रहा हूं। और उस त्रुटि के लिए उत्पाद बनाने की कोशिश करें

वही मुद्दा। ईओण 5 और सेलुलर 9 के साथ ऐप बनाने की कोशिश करें ...

मुझे यह पिछले संस्करण पर वापस जाकर संकलन करने के लिए मिला:
npm install [email protected]
मैं Ionic 5.0.7 / Angular 8.2.14 पर हूं

मुझे यह पिछले संस्करण पर वापस जाकर संकलन करने के लिए मिला:
npm install [email protected]
मैं Ionic 5.0.7 / Angular 8.2.14 पर हूं

यह काम किया .. धन्यवाद ....

@ डेवी 234 यह ठीक काम करता है धन्यवाद

मैं इसे पुन: पेश करने में सक्षम नहीं हूं इसलिए मुझे खुशी होगी अगर कोई ऐसी परियोजना बना सकता है जहां यह पुन: पेश किया जाता है।
मैंने कुछ अलग प्रोजेक्ट बनाए हैं जहाँ मैं इसे पुन: पेश करने की कोशिश करता हूँ:

• रूट मॉड्यूल में ng-lazyload-image आयात करना: https://github.com/tjoskar/ng-lazyload-image-bugs/tree/master/463-invalid-provider-for-lazyLoadImageHooks-sub-module
• एक lib बनाना (देखें: https://github.com/tjoskar/ng-lazyload-image/issues/463#issuecomment-639328375)
• उप मॉड्यूल में ng-lazyload-image का आयात करना: https://github.com/tjoskar/ng-lazyload-image-bugs/commit/39b93c932ac02788cb1f92cebe15fb7d1f4e71

कृपया मुझे बताएं कि क्या कोई भी कुछ कोड साझा कर सकता है जहां आप इसे पुन: पेश करते हैं।

क्या आपके पास Ivy सक्षम है या नहीं? आप ng version चलाकर देख सकते हैं। यदि आप इसे अक्षम कर चुके हैं, तो क्या आपके पास इसे अक्षम करने का कोई कारण है? या आप इसे सक्षम करने के लिए परीक्षण कर सकते हैं? मुझे यकीन नहीं है कि यह कैसे करना है, लेकिन अपने tsconfig.sjon में enableIvy की जाँच करें और tsconfig.app.json फ़ाइलें।

क्या आपके पास Ivy सक्षम है या नहीं? आप ng version चलाकर देख सकते हैं। यदि आप इसे अक्षम कर चुके हैं, तो क्या आपके पास इसे अक्षम करने का कोई कारण है? या आप इसे सक्षम करने के लिए परीक्षण कर सकते हैं? मुझे यकीन नहीं है कि यह कैसे करना है, लेकिन अपने tsconfig.sjon में enableIvy की जाँच करें और tsconfig.app.json फ़ाइलें।

मैं अपना UI लाइब्रेरी बना रहा हूं, मेरे पास ivy नहीं है क्योंकि यह npm द्वारा स्वीकार नहीं किया गया है

ऐसा लगता है कि संस्करण 8.0.1 केवल आइवी के साथ काम करता है। मैं नहीं जानता कि अभी क्यों।

जब मुझे IVY अक्षम किया गया तो मुझे कोणीय 9 के साथ एक ही मुद्दा मिला।

नमस्ते। समस्या तब दिखाई दी जब मैंने नोड_मॉडल और लॉक फाइल को डिलीट किया और npm इंस्टॉल और बिल्ड को फिर से चलाया।

इससे पहले नवीनतम 8.0.1 के साथ सब कुछ ठीक काम कर रहा था

आइवी सक्षम है।

मैं पिछले संस्करण (7.1.0) पर वापस गया और यह फिर से काम कर रहा है।

मेरे पास एक ही मुद्दा है, और मेरे पास आइवी सक्षम है।
कोणीय 9 को चलाते समय संस्करण 7.1.0 का उपयोग करके इसे काम कर लिया, लेकिन अब जब कि कोणीय 10 बाहर हो गया है, तो यह नोलॉन्जर काम करता है।
संस्करण 7 में "ModWWithProviders;" जिसे एंगुलर 10 में बदल दिया गया है

static forRoot(options: ModuleOptions): ModuleWithProviders;

त्रुटि हो रही है
ERROR in Invalid provider for LazyLoadImageHooks. useClass cannot be undefined. Usually it happens when: 1. There's a circular dependency (might be caused by using index.ts (barrel) files). 2. Class was used before it was declared. Use forwardRef in this case.

स्रोत भाषा फ़ाइल को निकालने का प्रयास करते समय कोणीय 10 का उपयोग करते हुए समान त्रुटि।
ng xi18n --format=xlf2 --output-path src/locales
त्रुटि:
ERROR in Invalid provider for LazyLoadImageHooks. useClass cannot be undefined. Usually it happens when: 1. There's a circular dependency (might be caused by using index.ts (barrel) files). 2. Class was used before it was declared. Use forwardRef in this case.

जब मैं आइवी को अक्षम करता हूं तो मैं केवल इसे पुन: पेश करने में सक्षम होता हूं। मैंने एक कोणीय 10 ऐप बनाया था लेकिन यह केवल तभी था जब मैंने Ivy निष्क्रिय कर दिया था मुझे त्रुटि मिली थी।

मैंने अब एक नया संस्करण प्रकाशित किया है जो दिखता है कि यह साथ काम करता है, और बिना, आइवी। कृपया इसे आज़माएं और देखें कि क्या यह आपके लिए काम करता है: npm install [email protected] ।

यदि आप कस्टम हुक का उपयोग कर रहे हैं
इससे पहले:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { LazyLoadImageModule, IntersectionObserverHooks, Attributes } from 'ng-lazyload-image';
import { AppComponent } from './app.component';

class LazyLoadImageHooks extends IntersectionObserverHooks {
  async loadImage({ imagePath }: Attributes): Promise<string> {
    return await fetch(imagePath, {
      headers: {
        Authorization: 'Bearer ...',
      },
    })
      .then((res) => res.blob())
      .then((blob) => URL.createObjectURL(blob));
  }
}

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, LazyLoadImageModule.forRoot(LazyLoadImageHooks)],
  bootstrap: [AppComponent],
})
export class MyAppModule {}

उपरांत:

import { NgModule, Injectable } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { LazyLoadImageModule, IntersectionObserverHooks, Attributes, LAZYLOAD_IMAGE_HOOKS } from 'ng-lazyload-image';
import { AppComponent } from './app.component';

@Injectable()
export class LazyLoadImageHooks extends IntersectionObserverHooks {
  async loadImage({ imagePath }: Attributes): Promise<string> {
    return await fetch(imagePath, {
      headers: {
        Authorization: 'Bearer ...',
      },
    })
      .then((res) => res.blob())
      .then((blob) => URL.createObjectURL(blob));
  }
}

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, LazyLoadImageModule],
  providers: [{ provide: LAZYLOAD_IMAGE_HOOKS, useClass: LazyLoadImageHooks }],
  bootstrap: [AppComponent],
})
export class MyAppModule {}

मुझे आइवी के साथ अपने कोणीय 10 ऐप में यह त्रुटि दिखाई देती है। हालाँकि संकलन ठीक काम करता है, उपरोक्त उल्लिखित त्रुटि के साथ केवल ng xi18n आदेश विफल रहता है।

8.0.2-21 अपग्रेड करने में मदद मिली।

Angular 10
[email protected]

providers: [{ provide: 'LazyLoadImageHooks', useClass: LazyLoadImageHooks }]

इसने काम किया

यह संस्करण 9.0.0 में तय किया जाना चाहिए