Ng-lazyload-image: ERROR dalam penyedia tidak valid untuk LazyLoadImageHooks. useClass tidak bisa didefinisikan.

Masalah yang sama di sini

saya mendapatkan masalah yang sama.
ada yang bisa membantu?

saya mendapat masalah yang sama .... bantu kami

um ... Saya menggunakannya sebagai versi 7.1.0 sampai memperbaikinya.

Versi ng-lazyload-image yang Anda gunakan (periksa dengan menjalankan npm ls ng-lazyload-image ).

Apakah Anda mendapatkan kesalahan ini dalam waktu pembuatan atau di konsol browser?

Apakah mungkin membuat repo kecil dengan masalah ini? Saya menggunakan Angular 9 di folder contoh: https://github.com/tjoskar/ng-lazyload-image/blob/master/example/package.json dan saya tidak bisa melihat masalahnya di sana? Dan tidak di kotak pasir kode ini: https://codesandbox.io/s/lazy-load-image-with-httpclient-to538?file=/src/app/app.module.ts (misalnya).

@tjoskar kesalahan ini terjadi pada waktu pembuatan.

EROR: Penyedia tidak valid untuk LazyLoadImageHooks. useClass tidak bisa didefinisikan.
Biasanya itu terjadi ketika:
1. Ada ketergantungan melingkar (mungkin disebabkan oleh penggunaan file index.ts (barrel)).
2. Kelas digunakan sebelum diumumkan. Gunakan forwardRef dalam kasus ini.

Terjadi pengecualian yang tidak tertangani: Penyedia untuk LazyLoadImageHooks tidak valid. useClass tidak bisa didefinisikan.
Biasanya itu terjadi ketika:
1. Ada ketergantungan melingkar (mungkin disebabkan oleh penggunaan file index.ts (barrel)).
2. Kelas digunakan sebelum diumumkan. Gunakan forwardRef dalam kasus ini.

Saya mengalami kesalahan ini saat membangun perpustakaan sudut
dengan versi 7 itu tidak terjadi

Saya tidak bisa mereproduksi ini. Saya baru saja membuat aplikasi angular 9 baru (9.1.9):

❯ ng new my-app

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

Saya kemudian membuat perubahan berikut: https://github.com/tjoskar/ng-lazyload-image-bugs/commit/7fe50bd1631a20e7bcfed82f2a34acaeb6b50533

Dan jalankan npm run build ( ng build ) tanpa masalah apa pun.

Saya butuh bantuan Anda untuk memperbaikinya.

1. Apakah Anda membuat pengait khusus Anda sendiri? Jika demikian, apakah Anda memiliki ketergantungan di hook Anda?
2. Apakah Anda menambahkan LazyLoadImageModule di beberapa NgModule ?
3. Bisakah Anda membuat repo di mana Anda mereproduksi kesalahan ini? Atau setidaknya beri saya beberapa cuplikan kode tentang bagaimana Anda menggunakannya.

Cobalah untuk tidak membuat aplikasi tetapi perpustakaan
gunakan spesifikasi ini
https://angular.io/guide/creating-libraries
impor modul dan coba lepaskan di npm

@ emanuele-galeotti, saya tidak mengikuti. ng-lazyload-image adalah perpustakaan, dan diterbitkan ke npm. Saya mendapat kesan bahwa Anda menggunakan ng-lazyload-image dalam sebuah aplikasi, jadi saya mencoba membuat aplikasi dan mengimpor perpustakaan ( ng-lazyload-image ).

Apakah Anda memberi tahu saya bahwa Anda sedang membuat perpustakaan dan ingin menggunakan ng-lazyload-image sebagai ketergantungan? Atau apakah Anda menyarankan agar saya membuat perpustakaan baru dengan mengikuti panduan yang Anda tautkan dan memigrasi kode ke perpustakaan yang baru dibuat?

kesalahan di atas terjadi dalam kasus saya ketika:

1. Saya membuat perpustakaan untuk UI saya
2. impor LazyLoadImageModule
3. Saya melakukan build dan kemudian merilis di npm

Bisakah Anda meminta untuk melakukan ini?
Saya tidak memiliki repo karena proyek ini bersifat pribadi.

Apakah build gagal saat Anda membuat library atau saat Anda membuat aplikasi yang menggunakan library Anda?

Saya melakukan hal berikut sekarang:

❯ 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
------------------------------------------------------------------------------

Ada perpustakaannya: https://github.com/tjoskar/ng-lazyload-image-bugs/tree/master/463-invalid-provider-for-lazyLoadImageHook-libs

Dan inilah perubahan yang saya buat: https://github.com/tjoskar/ng-lazyload-image-bugs/commit/1bf60bcbf6133751c41f52cd3d837614dfb60bd0

Saya mengerti jika proyek Anda bersifat pribadi dan Anda tidak dapat membagikan kode, tetapi akan sangat membantu jika Anda dapat membuat proyek kecil tempat Anda dapat mereproduksi kesalahan.

gagal ketika saya membangun perpustakaan, segera setelah saya bisa mencoba untuk berbagi kodenya.

saya mendapat masalah yang sama :(. Saya menambahkan MODUL BEBAN MALAS ke modul anak

saya menggunakan Ionic 5, angular 9. dan mencoba membangun produk kami mendapat kesalahan itu

masalah yang sama. coba buat aplikasi dengan ionic 5 dan andular 9 ...

Saya mendapatkan ini untuk dikompilasi dengan kembali ke versi sebelumnya:
npm install [email protected]
Saya menggunakan Ionic 5.0.7 / Angular 8.2.14

Saya mendapatkan ini untuk dikompilasi dengan kembali ke versi sebelumnya:
npm install [email protected]
Saya menggunakan Ionic 5.0.7 / Angular 8.2.14

berhasil .. terima kasih ....

@ Davei234 bekerja dengan baik terima kasih

Saya tidak dapat mereproduksi ini jadi saya akan senang jika ada yang bisa membuat proyek di mana ini direproduksi.
Saya telah membuat beberapa proyek berbeda di mana saya mencoba mereproduksi ini:

• Mengimpor ng-lazyload-image dalam modul root: https://github.com/tjoskar/ng-lazyload-image-bugs/tree/master/463-invalid-provider-for-lazyLoadImageHooks-sub-module
• Membuat lib (lihat: https://github.com/tjoskar/ng-lazyload-image/issues/463#issuecomment-639328375)
• Mengimpor ng-lazyload-image dalam sub modul: https://github.com/tjoskar/ng-lazyload-image-bugs/commit/39b93c932ac02788cb1f92cebe1c05fb7d1f4e71

Tolong beri tahu saya jika ada yang dapat membagikan beberapa kode tempat Anda mereproduksinya.

Apakah Anda mengaktifkan Ivy atau tidak? Anda dapat melihatnya dengan menjalankan ng version . Jika Anda telah menonaktifkannya, apakah ada alasan mengapa Anda menonaktifkannya? Atau dapatkah Anda menguji untuk mengaktifkannya? Saya tidak yakin bagaimana melakukannya tetapi periksa enableIvy di file tsconfig.sjon dan tsconfig.app.json .

Apakah Anda mengaktifkan Ivy atau tidak? Anda dapat melihatnya dengan menjalankan ng version . Jika Anda telah menonaktifkannya, apakah ada alasan mengapa Anda menonaktifkannya? Atau dapatkah Anda menguji untuk mengaktifkannya? Saya tidak yakin bagaimana melakukannya tetapi periksa enableIvy di file tsconfig.sjon dan tsconfig.app.json .

Saya sedang membangun perpustakaan UI saya, saya tidak memiliki ivy karena tidak diterima oleh npm

Sepertinya versi 8.0.1 hanya berfungsi dengan ivy. Namun saya tidak tahu mengapa sekarang.

Saya mendapat masalah yang sama dengan sudut 9 ketika saya menonaktifkan IVY.

Hai. Masalahnya muncul ketika saya menghapus node_modules dan mengunci file dan menjalankan npm install dan membangun lagi.

Sebelum ini semuanya bekerja dengan baik dengan versi 8.0.1 terbaru

Ivy diaktifkan.

Saya kembali ke versi sebelumnya (7.1.0) dan berfungsi lagi.

Saya memiliki masalah yang sama, dan saya mengaktifkan Ivy.
Berhasil dengan menggunakan versi 7.1.0 saat menjalankan Angular 9, tetapi sekarang Angular 10 sudah keluar, ini tidak lagi berfungsi.
Versi 7 menggunakan "ModuleWithProviders;" yang telah diubah di Angular 10

static forRoot(options: ModuleOptions): ModuleWithProviders;

Mendapatkan kesalahan
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.

Kesalahan yang sama menggunakan sudut 10, ketika mencoba mengekstrak file bahasa sumber.
ng xi18n --format=xlf2 --output-path src/locales
Kesalahannya:
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.

Saya hanya dapat mereproduksi ini jika saya menonaktifkan Ivy. Saya memang membuat aplikasi Angular 10 tetapi hanya ketika saya menonaktifkan Ivy saya mendapatkan kesalahan.

Saya sekarang telah menerbitkan versi baru yang sepertinya berfungsi dengan, dan tanpa, Ivy. Silakan mencobanya dan lihat apakah itu berhasil untuk Anda: npm install [email protected] .

Jika Anda menggunakan pengait khusus, Anda perlu memperbarui kode Anda:
Sebelum:

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

Setelah:

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

Saya melihat kesalahan ini di aplikasi 10 sudut saya dengan ivy. Namun kompilasi berfungsi dengan baik, hanya perintah ng xi18n gagal dengan kesalahan yang disebutkan di atas.

Mengupgrade ke 8.0.2-21 membantu.

Angular 10
[email protected]

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

itu berhasil

Ini harus diperbaiki dalam versi 9.0.0