Ng-lazyload-image: ERROR em provedor inválido para LazyLoadImageHooks. useClass não pode ser indefinido.

Mesmo problema aqui

eu tenho o mesmo problema.
alguem pode ajudar?

eu tenho o mesmo problema ... nos ajude

hum ... Estou usando como versão 7.1.0 até consertar.

Qual versão de ng-lazyload-image você está usando (verifique executando npm ls ng-lazyload-image ).

Você recebe este erro durante o tempo de compilação ou no console do navegador?

É possível criar um pequeno repo com esse problema? Estou usando o Angular 9 na pasta de exemplo: https://github.com/tjoskar/ng-lazyload-image/blob/master/example/package.json e não consigo ver o problema aí? E não nesta caixa de proteção de código: https://codesandbox.io/s/lazy-load-image-with-httpclient-to538?file=/src/app/app.module.ts (por exemplo).

@tjoskar este erro ocorreu no momento da compilação.

ERRO: Provedor inválido para LazyLoadImageHooks. useClass não pode ser indefinido.
Normalmente acontece quando:
1. Há uma dependência circular (pode ser causada pelo uso de arquivos index.ts (barrel)).
2. A classe foi usada antes de ser declarada. Use forwardRef neste caso.

Ocorreu uma exceção não tratada: provedor inválido para LazyLoadImageHooks. useClass não pode ser indefinido.
Normalmente acontece quando:
1. Há uma dependência circular (pode ser causada pelo uso de arquivos index.ts (barrel)).
2. A classe foi usada antes de ser declarada. Use forwardRef neste caso.

Eu tenho este erro ao construir uma biblioteca angular
com a versão 7 isso não acontece

Eu não consigo reproduzir isso. Acabei de criar um novo aplicativo angular 9 (9.1.9):

❯ ng new my-app

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

Em seguida, fiz as seguintes alterações: https://github.com/tjoskar/ng-lazyload-image-bugs/commit/7fe50bd1631a20e7bcfed82f2a34acaeb6b50533

E execute npm run build ( ng build ) sem problemas.

Preciso de sua ajuda para consertar isso.

1. Você cria seus próprios ganchos personalizados? Em caso afirmativo, você tem alguma dependência em seus ganchos?
2. Você adiciona LazyLoadImageModule em múltiplos NgModule ?
3. Você pode criar um repo onde reproduz este erro? Ou pelo menos me dê alguns trechos de código sobre como você está usando.

Tente não criar um aplicativo, mas uma biblioteca
use essas especificações
https://angular.io/guide/creating-libraries
importe o módulo e tente liberá-lo no npm

@ emanuele-galeotti, eu não entendo. ng-lazyload-image é uma biblioteca publicada no npm. Tive a impressão de que você estava usando ng-lazyload-image em um aplicativo, então tentei criar um aplicativo e importei a biblioteca ( ng-lazyload-image ).

Você está me dizendo que está criando uma biblioteca e que deseja usar ng-lazyload-image como uma dependência? Ou você sugere que eu crie uma nova biblioteca seguindo o guia ao qual você vinculou e migre o código para a biblioteca recém-criada?

o erro acima ocorre no meu caso quando:

1. Eu crio uma biblioteca para minha IU
2. import LazyLoadImageModule
3. Eu faço uma construção e, em seguida, libero no npm

Você pode pedir para fazer isso?
Não tenho um repo porque o projeto é privado.

A construção falha quando você constrói sua biblioteca ou quando constrói o aplicativo que está usando sua biblioteca?

Eu fiz o seguinte agora:

❯ 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 a biblioteca: https://github.com/tjoskar/ng-lazyload-image-bugs/tree/master/463-invalid-provider-for-lazyLoadImageHook-libs

E aqui estão as mudanças que fiz: https://github.com/tjoskar/ng-lazyload-image-bugs/commit/1bf60bcbf6133751c41f52cd3d837614dfb60bd0

Eu entendo se seus projetos são privados e você não pode compartilhar seu código, mas seria de grande ajuda se você pudesse criar um pequeno projeto onde você pode reproduzir o erro.

falha quando construo a biblioteca, assim que posso tento compartilhar o código.

Eu tenho o mesmo problema :(. Eu adicionei LAZY LOAD MODULE ao módulo filho

i usando Ionic 5, angular 9. e tentar construir para o produto, recebemos aquele erro

mesmo problema. tente compilar o aplicativo com ionic 5 e andular 9 ...

Eu tenho que compilar voltando para a versão anterior:
npm install [email protected]
Estou no Ionic 5.0.7 / Angular 8.2.14

Eu tenho que compilar voltando para a versão anterior:
npm install [email protected]
Estou no Ionic 5.0.7 / Angular 8.2.14

funcionou .. obrigado ....

@ Davei234 funciona bem, obrigado

Não sou capaz de reproduzir isso, então ficaria feliz se alguém pudesse criar um projeto onde isso seja reproduzido.
Eu criei alguns projetos diferentes onde tento reproduzir isso:

• Importando ng-lazyload-image no módulo raiz: https://github.com/tjoskar/ng-lazyload-image-bugs/tree/master/463-invalid-provider-for-lazyLoadImageHooks-sub-module
• Criação de um lib (consulte: https://github.com/tjoskar/ng-lazyload-image/issues/463#issuecomment-639328375)
• Importando ng-lazyload-image no submódulo: https://github.com/tjoskar/ng-lazyload-image-bugs/commit/39b93c932ac02788cb1f92cebe1c05fb7d1f4e71

Por favor, deixe-me saber se alguém pode compartilhar algum código onde você reproduz isso.

Você tem Ivy habilitado ou não? Você pode ver isso executando ng version . Se você o desativou, há algum motivo para desativá-lo? Ou você pode testar para habilitá-lo? Não tenho certeza de como fazer isso, mas verifique se há enableIvy em seus arquivos tsconfig.sjon e tsconfig.app.json .

Você tem Ivy habilitado ou não? Você pode ver isso executando ng version . Se você o desativou, há algum motivo para desativá-lo? Ou você pode testar para habilitá-lo? Não tenho certeza de como fazer isso, mas verifique se há enableIvy em seus arquivos tsconfig.sjon e tsconfig.app.json .

Estou construindo minha biblioteca de IU, não tenho ivy porque não é aceita pelo npm

Parece que a versão 8.0.1 só funciona com ivy. No entanto, não sei por que agora.

Tive o mesmo problema com o angular 9 quando desativei o IVY.

Oi. O problema apareceu quando eu excluí o node_modules e o arquivo de bloqueio e executei o npm install e o build novamente.

Antes disso, tudo estava funcionando bem com o último 8.0.1

Ivy está habilitada.

Voltei para a versão anterior (7.1.0) e está funcionando novamente.

Tenho o mesmo problema e habilitei o Ivy.
Funcionou usando a versão 7.1.0 durante a execução do Angular 9, mas agora que o Angular 10 foi lançado, isso não funciona mais.
A versão 7 usa "ModuleWithProviders;" que foi alterado no Angular 10

static forRoot(options: ModuleOptions): ModuleWithProviders;

Obtendo erro
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.

Mesmo erro usando angular 10, ao tentar extrair o arquivo do idioma de origem.
ng xi18n --format=xlf2 --output-path src/locales
O erro:
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.

Só consigo reproduzir isso quando desativo Ivy. Eu criei um aplicativo Angular 10, mas foi apenas quando desativei Ivy que recebi o erro.

Agora publiquei uma nova versão que parece funcionar com e sem Ivy. Experimente e veja se funciona para você: npm install [email protected] .

Se estiver usando ganchos personalizados, você precisará atualizar seu 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 {}

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

Vejo esse erro em meu aplicativo angular 10 com ivy. No entanto, a compilação funciona bem, apenas o comando ng xi18n falha com o erro mencionado acima.

Atualizar para 8.0.2-21 ajudou.

Angular 10
[email protected]

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

funcionou

Isso deve ser corrigido na versão 9.0.0