Ng-lazyload-image: خطأ في موفر غير صالح لـ LazyLoadImageHooks. لا يمكن إلغاء تعريف useClass.

نفس المشكلة هنا

لدي نفس المشكلة.
يمكن لأي شخص أن يساعد؟

لدي نفس المشكلة .... ساعدنا

أم ... أنا أستخدمه كإصدار 7.1.0 حتى أصلحه.

ما هو إصدار ng-lazyload-image الذي تستخدمه (تحقق منه بتشغيل npm ls ng-lazyload-image ).

هل تحصل على هذا الخطأ في وقت الإنشاء أم في وحدة تحكم المتصفح؟

هل من الممكن إنشاء ريبو صغير مع هذه المشكلة؟ أنا أستخدم Angular 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. لا يمكن إلغاء تعريف useClass.
يحدث ذلك عادةً عندما:
1. هناك تبعية دائرية (قد تكون ناتجة عن استخدام ملفات index.ts (برميل)).
2. تم استخدام الفئة قبل الإعلان عنها. استخدم forwardRef في هذه الحالة.

حدث استثناء غير معالج: موفر غير صالح لـ LazyLoadImageHooks. لا يمكن إلغاء تعريف useClass.
يحدث ذلك عادةً عندما:
1. هناك تبعية دائرية (قد تكون ناتجة عن استخدام ملفات index.ts (برميل)).
2. تم استخدام الفئة قبل الإعلان عنها. استخدم forwardRef في هذه الحالة.

لدي هذا الخطأ أثناء بناء مكتبة زاوية
مع الإصدار 7 لم يحدث ذلك

لا يمكنني إعادة إنتاج هذا. لقد قمت للتو بإنشاء تطبيق Angular 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/7fe50bd1631a20e7bcfed82f2a34acaeb6b50533

وقم بتشغيل npm run build ( ng build ) بدون أي مشاكل.

أحتاج مساعدتك لإصلاح هذا.

1. هل تقوم بإنشاء خطافات مخصصة خاصة بك؟ إذا كان الأمر كذلك ، فهل لديك أي تبعية في الخطافات الخاصة بك؟
2. هل تضيف LazyLoadImageModule في عدة NgModule ؟
3. هل يمكنك إنشاء ريبو حيث يتم إعادة إنتاج هذا الخطأ؟ أو على الأقل أعطني بعض مقتطفات التعليمات البرمجية حول كيفية استخدامك لها.

حاول ألا تنشئ تطبيقًا بل مكتبة
استخدم هذه المواصفات
https://angular.io/guide/creating-libraries
قم باستيراد الوحدة وحاول تحريرها في npm

@ emanuele-galeotti ، أنا لا أتابع. ng-lazyload-image مكتبة ، ويتم نشرها في npm. لدي انطباع بأنك كنت تستخدم ng-lazyload-image في أحد التطبيقات ، لذلك حاولت إنشاء تطبيق واستوردت المكتبة ( ng-lazyload-image ).

هل تخبرني أنك تقوم بإنشاء مكتبة وأنك تريد استخدام ng-lazyload-image كعنصر تابع؟ أم أنك تقترح إنشاء مكتبة جديدة باتباع الدليل الذي قمت بربطه به وترحيل الشفرة إلى المكتبة المنشأة حديثًا؟

يحدث الخطأ أعلاه في حالتي عندما:

1. أقوم بإنشاء مكتبة لواجهة المستخدم الخاصة بي
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-libs

وإليك التغييرات التي أجريتها: https://github.com/tjoskar/ng-lazyload-image-bugs/commit/1bf60bcbf6133751c41f52cd3d837614dfb60bd0

أتفهم ما إذا كانت مشاريعك خاصة ولا يمكنك مشاركة التعليمات البرمجية الخاصة بك ، ولكن سيكون من المفيد جدًا إنشاء مشروع صغير حيث يمكنك إعادة إنتاج الخطأ.

يفشل عندما أقوم ببناء المكتبة ، بمجرد أن أحاول مشاركة الرمز.

حصلت على نفس المشكلة :(. لقد أضفت 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

عملت .. شكرا ....

@ Davei234 إنه يعمل بشكل جيد بفضل

لا يمكنني إعادة إنتاج هذا ، لذا سأكون سعيدًا إذا كان بإمكان أي شخص إنشاء مشروع يتم فيه إعادة إنتاج هذا.
لقد أنشأت بعض المشاريع المختلفة حيث أحاول إعادة إنتاج هذا:

• استيراد 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/39b93c932ac02788cb1f92cebe1c05fb7d1f4e71

يُرجى إعلامي إذا كان بإمكان أي شخص مشاركة بعض التعليمات البرمجية حيث يمكنك إعادة إنتاج هذا.

هل تم تمكين Ivy أم لا؟ يمكنك رؤية ذلك من خلال تشغيل ng version . إذا قمت بتعطيله ، فهل هناك أي سبب لتعطيله؟ أو يمكنك اختبار لتمكينه؟ لست متأكدًا من كيفية القيام بذلك ولكن تحقق من وجود enableIvy في ملفاتك tsconfig.sjon و tsconfig.app.json .

هل تم تمكين Ivy أم لا؟ يمكنك رؤية ذلك من خلال تشغيل ng version . إذا قمت بتعطيله ، فهل هناك أي سبب لتعطيله؟ أو يمكنك اختبار لتمكينه؟ لست متأكدًا من كيفية القيام بذلك ولكن تحقق من وجود enableIvy في ملفاتك tsconfig.sjon و tsconfig.app.json .

أنا أقوم ببناء مكتبة واجهة المستخدم الخاصة بي ، وليس لديّ Ivy قيد التشغيل لأنه لم يتم قبوله بواسطة npm

يبدو أن الإصدار 8.0.1 يعمل فقط مع Ivy. ومع ذلك ، لا أعرف لماذا الآن.

حصلت على نفس المشكلة مع الزاوية 9 عندما قمت بتعطيل IVY.

أهلا. ظهرت المشكلة عندما حذفت node_modules وملف القفل وقمت بتشغيل npm install والبناء مرة أخرى.

قبل هذا كان كل شيء يعمل بشكل جيد مع أحدث إصدار 8.0.1

اللبلاب هو تمكين.

عدت إلى الإصدار السابق (7.1.0) وهو يعمل مرة أخرى.

لدي نفس المشكلة ، ولقد قمت بتمكين Ivy.
لقد نجحت في العمل من خلال استخدام الإصدار 7.1.0 أثناء تشغيل Angular 9 ، ولكن الآن بعد أن خرج Angular 10 ، يعمل هذا nolonger.
يستخدم الإصدار 7 "ModuleWithProviders؛" الذي تم تغييره في Angular 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.

نفس الخطأ باستخدام angular 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.

أنا قادر فقط على إعادة إنتاج هذا عندما أقوم بتعطيل Ivy. لقد قمت بإنشاء تطبيق Angular 10 ، ولكن هذا حدث فقط عندما قمت بتعطيل Ivy حصلت على الخطأ.

لقد قمت الآن بنشر إصدار جديد يبدو أنه يعمل مع ، وبدونه ، 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 مع Ivy. ومع ذلك ، فإن التجميع يعمل بشكل جيد ، فقط الأمر ng xi18n يفشل مع الخطأ المذكور أعلاه.

ساعدت الترقية إلى 8.0.2-21 .

Angular 10
[email protected]

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

انها عملت

يجب إصلاح ذلك في الإصدار 9.0.0