Ng-lazyload-image: ERROR en proveedor no válido para LazyLoadImageHooks. useClass no puede ser indefinido.

El mismo problema aquí

tengo el mismo problema.
alguien puede ayudar

tengo el mismo problema ... ayúdanos

um ... Lo estoy usando como la versión 7.1.0 hasta que lo arregle.

¿Qué versión de ng-lazyload-image estás usando (compruébalo ejecutando npm ls ng-lazyload-image ).

¿Recibe este error durante el tiempo de compilación o en la consola del navegador?

¿Es posible crear un pequeño repositorio con este problema? Estoy usando Angular 9 en la carpeta de ejemplo: https://github.com/tjoskar/ng-lazyload-image/blob/master/example/package.json y no puedo ver el problema allí. Y no en este sandbox de código: https://codesandbox.io/s/lazy-load-image-with-httpclient-to538?file=/src/app/app.module.ts (por ejemplo).

@tjoskar este error se produjo en el momento de la compilación.

ERROR: proveedor no válido para LazyLoadImageHooks. useClass no puede ser indefinido.
Suele ocurrir cuando:
1. Existe una dependencia circular (puede deberse al uso de archivos index.ts (barril)).
2. La clase se utilizó antes de declararse. Utilice forwardRef en este caso.

Se produjo una excepción no controlada: proveedor no válido para LazyLoadImageHooks. useClass no puede ser indefinido.
Suele ocurrir cuando:
1. Existe una dependencia circular (puede deberse al uso de archivos index.ts (barril)).
2. La clase se utilizó antes de declararse. Utilice forwardRef en este caso.

Tengo este error al construir una biblioteca angular.
con la versión 7 no sucede

No puedo reproducir esto. Acabo de crear una nueva aplicación angular 9 (9.1.9):

❯ ng new my-app

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

Luego hice los siguientes cambios: https://github.com/tjoskar/ng-lazyload-image-bugs/commit/7fe50bd1631a20e7bcfed82f2a34acaeb6b50533

Y ejecute npm run build ( ng build ) sin ningún problema.

Necesito tu ayuda para solucionar este problema.

1. ¿Creas tus propios ganchos personalizados? Si es así, ¿tiene alguna dependencia en sus ganchos?
2. ¿Agrega LazyLoadImageModule en múltiples NgModule ?
3. ¿Puedes crear un repositorio donde reproduzcas este error? O al menos dame algunos fragmentos de código sobre cómo lo estás usando.

Intenta no crear una aplicación, sino una biblioteca.
utilice estas especificaciones
https://angular.io/guide/creating-libraries
importar el módulo e intentar liberarlo en npm

@ emanuele-galeotti, no te sigo. ng-lazyload-image es una biblioteca y está publicada en npm. Me dio la impresión de que estabas usando ng-lazyload-image en una aplicación, así que intenté crear una aplicación e importé la biblioteca ( ng-lazyload-image ).

¿Me estás diciendo que estás creando una biblioteca y que quieres usar ng-lazyload-image como dependencia? ¿O sugiere que debería crear una nueva biblioteca siguiendo la guía a la que se vinculó y migrar el código a la biblioteca recién creada?

el error anterior ocurre en mi caso cuando:

1. Creo una biblioteca para mi interfaz de usuario
2. importar LazyLoadImageModule
3. Hago una compilación y luego la lanzo en npm

¿Puedes pedir hacer esto?
No tengo un repositorio porque el proyecto es privado.

¿La compilación falla cuando construye su biblioteca o cuando crea la aplicación que está usando su biblioteca?

Hice lo siguiente ahora:

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

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

Y aquí están los cambios que hice: https://github.com/tjoskar/ng-lazyload-image-bugs/commit/1bf60bcbf6133751c41f52cd3d837614dfb60bd0

Entiendo si sus proyectos son privados y no puede compartir su código, pero sería de gran ayuda si pudiera crear un pequeño proyecto donde pueda reproducir el error.

falla cuando construyo la biblioteca, tan pronto como puedo, intento compartir el código.

Tengo el mismo problema :(. Estaba agregando el MODULO DE CARGA PERFECTA al módulo secundario

Estoy usando Ionic 5, angular 9. e intente construir el producto, obtuvimos ese error

mismo problema. intente construir una aplicación con ionic 5 y andular 9 ...

Conseguí esto para compilar volviendo a la versión anterior:
npm install [email protected]
Estoy en Ionic 5.0.7 / Angular 8.2.14

Conseguí esto para compilar volviendo a la versión anterior:
npm install [email protected]
Estoy en Ionic 5.0.7 / Angular 8.2.14

funcionó .. gracias ....

@ Davei234 funciona bien gracias

No puedo reproducir esto, así que estaría feliz si alguien pudiera crear un proyecto donde se reproduzca.
He creado algunos proyectos diferentes en los que intento reproducir esto:

• Importando ng-lazyload-image en el módulo raíz: https://github.com/tjoskar/ng-lazyload-image-bugs/tree/master/463-invalid-provider-for-lazyLoadImageHooks-sub-module
• Creación de una biblioteca (consulte: https://github.com/tjoskar/ng-lazyload-image/issues/463#issuecomment-639328375)
• Importando ng-lazyload-image en el submódulo: https://github.com/tjoskar/ng-lazyload-image-bugs/commit/39b93c932ac02788cb1f92cebe1c05fb7d1f4e71

Por favor, avíseme si alguien puede compartir algún código donde lo reproduzca.

¿Tiene Ivy habilitado o no? Puede ver eso ejecutando ng version . Si lo tiene desactivado, ¿hay alguna razón por la que lo tenga desactivado? ¿O puede probar para habilitarlo? No estoy seguro de cómo hacerlo, pero busque enableIvy en sus archivos tsconfig.sjon y tsconfig.app.json .

¿Tiene Ivy habilitado o no? Puede ver eso ejecutando ng version . Si lo tiene desactivado, ¿hay alguna razón por la que lo tenga desactivado? ¿O puede probar para habilitarlo? No estoy seguro de cómo hacerlo, pero busque enableIvy en sus archivos tsconfig.sjon y tsconfig.app.json .

Estoy construyendo mi biblioteca de UI, no tengo Ivy porque no es aceptado por npm

Parece que la versión 8.0.1 solo funciona con ivy. Sin embargo, no sé por qué ahora mismo.

Tuve el mismo problema con angular 9 cuando desactivé IVY.

Hola. El problema apareció cuando eliminé node_modules y el archivo de bloqueo y ejecuté npm install y la compilación nuevamente.

Antes de esto, todo funcionaba bien con la última versión 8.0.1

Ivy está habilitado.

Volví a la versión anterior (7.1.0) y está funcionando nuevamente.

Tengo el mismo problema y tengo Ivy habilitado.
Lo conseguí funcionando usando la versión 7.1.0 mientras se ejecutaba Angular 9, pero ahora que Angular 10 está fuera, esto ya no funciona.
La versión 7 usa "ModuleWithProviders"; que ha sido cambiado en Angular 10

static forRoot(options: ModuleOptions): ModuleWithProviders;

Obteniendo error
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.

El mismo error al usar angular 10, al intentar extraer el archivo de idioma fuente.
ng xi18n --format=xlf2 --output-path src/locales
El error:
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.

Solo puedo reproducir esto cuando desactivo Ivy. Creé una aplicación Angular 10, pero solo cuando deshabilité Ivy recibí el error.

Ahora he publicado una nueva versión que parece que funciona con y sin Ivy. Pruébelo y vea si le funciona: npm install [email protected] .

Si está utilizando ganchos personalizados, deberá actualizar su código:
Antes:

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

Después:

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

Veo este error en mi aplicación angular 10 con ivy. Sin embargo, la compilación funciona bien, solo el comando ng xi18n falla con el error mencionado anteriormente.

La actualización a 8.0.2-21 ayudó.

Angular 10
[email protected]

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

funcionó

Esto debería solucionarse en la versión 9.0.0