Ng-lazyload-image: ERREUR dans le fournisseur non valide pour LazyLoadImageHooks. useClass ne peut pas être indéfini.

Même problème ici

je reçois le même problème.
quelqu'un peut vous aider?

j'ai le même problème ... aidez-nous

euh ... Je l'utilise en tant que version 7.1.0 jusqu'à ce qu'il répare.

Quelle version de ng-lazyload-image utilisez-vous (vérifiez-la en exécutant npm ls ng-lazyload-image ).

Obtenez-vous cette erreur au moment de la construction ou dans la console du navigateur?

Est-il possible de créer un petit dépôt avec ce problème? J'utilise Angular 9 dans le dossier d'exemple: https://github.com/tjoskar/ng-lazyload-image/blob/master/example/package.json et je ne vois pas le problème là-bas? Et pas dans ce sandbox de code: https://codesandbox.io/s/lazy-load-image-with-httpclient-to538?file=/src/app/app.module.ts (par exemple).

@tjoskar, cette erreur s'est produite au moment de la construction.

ERREUR: fournisseur non valide pour LazyLoadImageHooks. useClass ne peut pas être indéfini.
Habituellement, cela se produit lorsque:
1. Il existe une dépendance circulaire (peut être causée par l'utilisation de fichiers index.ts (barrel)).
2. La classe a été utilisée avant d'être déclarée. Utilisez forwardRef dans ce cas.

Une exception non gérée s'est produite: fournisseur non valide pour LazyLoadImageHooks. useClass ne peut pas être indéfini.
Habituellement, cela se produit lorsque:
1. Il existe une dépendance circulaire (peut être causée par l'utilisation de fichiers index.ts (barrel)).
2. La classe a été utilisée avant d'être déclarée. Utilisez forwardRef dans ce cas.

J'ai cette erreur lors de la construction d'une bibliothèque angulaire
avec la version 7 ça n'arrive pas

Je ne peux pas reproduire cela. Je viens de créer une nouvelle application angulaire 9 (9.1.9):

❯ ng new my-app

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

J'ai ensuite apporté les modifications suivantes: https://github.com/tjoskar/ng-lazyload-image-bugs/commit/7fe50bd1631a20e7bcfed82f2a34acaeb6b50533

Et exécutez npm run build ( ng build ) sans aucun problème.

J'ai besoin de votre aide pour résoudre ce problème.

1. Créez-vous vos propres crochets personnalisés? Si oui, avez-vous une dépendance dans vos crochets?
2. Ajoutez-vous LazyLoadImageModule en plusieurs NgModule ?
3. Pouvez-vous créer un dépôt où vous reproduisez cette erreur? Ou au moins, donnez-moi quelques extraits de code sur la façon dont vous l'utilisez.

Essayez de ne pas créer une application mais une bibliothèque
utiliser ces spécifications
https://angular.io/guide/creating-libraries
importez le module et essayez de le libérer sur npm

@ emanuele-galeotti, je ne suis pas. ng-lazyload-image est une bibliothèque, et elle est publiée sur npm. J'ai eu l'impression que vous utilisiez ng-lazyload-image dans une application, alors j'ai essayé de créer une application et j'ai importé la bibliothèque ( ng-lazyload-image ).

Êtes-vous en train de me dire que vous créez une bibliothèque et que vous souhaitez utiliser ng-lazyload-image comme dépendance? Ou suggérez-vous que je devrais créer une nouvelle bibliothèque en suivant le guide auquel vous avez lié et migrer le code vers la bibliothèque nouvellement créée?

l'erreur ci-dessus se produit dans mon cas lorsque:

1. Je crée une bibliothèque pour mon interface utilisateur
2. importer LazyLoadImageModule
3. Je fais une compilation puis je publie sur npm

Pouvez-vous demander à faire cela?
Je n'ai pas de dépôt car le projet est privé.

La génération échoue-t-elle lorsque vous créez votre bibliothèque ou lorsque vous créez l'application qui utilise votre bibliothèque?

J'ai fait ce qui suit maintenant:

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

Il y a la bibliothèque: https://github.com/tjoskar/ng-lazyload-image-bugs/tree/master/463-invalid-provider-for-lazyLoadImageHook-libs

Et voici les modifications que j'ai apportées: https://github.com/tjoskar/ng-lazyload-image-bugs/commit/1bf60bcbf6133751c41f52cd3d837614dfb60bd0

Je comprends si vos projets sont privés et que vous ne pouvez pas partager votre code, mais ce serait d'une grande aide si vous pouviez créer un petit projet où vous pouvez reproduire l'erreur.

cela échoue lorsque je construis la bibliothèque, dès que je peux essayer de partager le code.

J'ai eu le même problème: (. J'étais ajouter le MODULE LAZY LOAD au module enfant

J'utilise Ionic 5, angulaire 9. et essayez de construire sur le produit, nous avons cette erreur

même problème. essayez de créer une application avec ionic 5 et andular 9 ...

J'ai eu ceci à compiler en retournant à la version précédente:
npm install [email protected]
Je suis sur Ionic 5.0.7 / Angular 8.2.14

J'ai eu ceci à compiler en retournant à la version précédente:
npm install [email protected]
Je suis sur Ionic 5.0.7 / Angular 8.2.14

cela a fonctionné ... merci ....

@ Davei234 ça marche bien merci

Je ne suis pas en mesure de reproduire ceci donc je serais heureux si quelqu'un peut créer un projet où cela est reproduit.
J'ai créé quelques projets différents où j'essaye de reproduire ceci:

• Importation de ng-lazyload-image dans le module racine: https://github.com/tjoskar/ng-lazyload-image-bugs/tree/master/463-invalid-provider-for-lazyLoadImageHooks-sub-module
• Création d'une lib (voir: https://github.com/tjoskar/ng-lazyload-image/issues/463#issuecomment-639328375)
• Importation de ng-lazyload-image dans le sous-module: https://github.com/tjoskar/ng-lazyload-image-bugs/commit/39b93c932ac02788cb1f92cebe1c05fb7d1f4e71

S'il vous plaît laissez-moi savoir si quelqu'un peut partager du code où vous le reproduisez.

Avez-vous activé ou non Ivy ? Vous pouvez le voir en exécutant ng version . Si vous l'avez désactivé, y a-t-il une raison pour laquelle vous l'avez désactivé? Ou pouvez-vous tester pour l'activer? Je ne sais pas comment faire cela, mais vérifiez les enableIvy dans vos fichiers tsconfig.sjon et tsconfig.app.json .

Avez-vous activé ou non Ivy ? Vous pouvez le voir en exécutant ng version . Si vous l'avez désactivé, y a-t-il une raison pour laquelle vous l'avez désactivé? Ou pouvez-vous tester pour l'activer? Je ne sais pas comment faire cela, mais vérifiez les enableIvy dans vos fichiers tsconfig.sjon et tsconfig.app.json .

Je construis ma bibliothèque d'interface utilisateur, je n'ai pas de lierre car il n'est pas accepté par npm

Il semble que la version 8.0.1 ne fonctionne qu'avec du lierre. Je ne sais cependant pas pourquoi pour le moment.

J'ai eu le même problème avec angular 9 lorsque j'ai désactivé IVY.

Salut. Le problème est apparu lorsque j'ai supprimé node_modules et verrouillé le fichier et exécuté à nouveau npm install et la construction.

Avant cela, tout fonctionnait bien avec la dernière version 8.0.1

Ivy est activé.

Je suis retourné à la version précédente (7.1.0) et cela fonctionne à nouveau.

J'ai le même problème et j'ai activé Ivy.
Cela fonctionne en utilisant la version 7.1.0 tout en exécutant Angular 9, mais maintenant qu'Angular 10 est sorti, cela ne fonctionne plus.
La version 7 utilise "ModuleWithProviders;" qui a été changé dans Angular 10

static forRoot(options: ModuleOptions): ModuleWithProviders;

Obtenir une erreur
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.

Même erreur en utilisant angular 10, lorsque vous essayez d'extraire le fichier de langue source.
ng xi18n --format=xlf2 --output-path src/locales
L'erreur:
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.

Je ne peux reproduire cela que lorsque je désactive Ivy. J'ai créé une application Angular 10, mais ce n'est que lorsque j'ai désactivé Ivy j'ai eu l'erreur.

J'ai maintenant publié une nouvelle version qui semble fonctionner avec et sans Ivy. Essayez-le et voyez s'il fonctionne pour vous: npm install [email protected] .

Si vous utilisez des hooks personnalisés, vous devrez mettre à jour votre code:
Avant que:

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

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

Je vois cette erreur dans mon application angulaire 10 avec du lierre. Cependant, la compilation fonctionne correctement, seule la commande ng xi18n échoue avec l'erreur mentionnée ci-dessus.

La mise à niveau vers 8.0.2-21 aidé.

Angular 10
[email protected]

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

ça a marché

Cela devrait être corrigé dans la version 9.0.0