Ng-lazyload-image: FEHLER im ungültigen Anbieter für LazyLoadImageHooks. useClass kann nicht undefiniert sein.

Gleiches Problem hier

Ich bekomme das gleiche Problem.
kann jemand helfen?

Ich habe das gleiche Problem ... helfen Sie uns

ähm ... Ich benutze es als Version 7.1.0, bis es behoben ist.

Welche Version von ng-lazyload-image Sie (überprüfen Sie dies, indem Sie npm ls ng-lazyload-image ausführen).

Erhalten Sie diesen Fehler während der Erstellungszeit oder in der Browserkonsole?

Ist es möglich, mit diesem Problem ein kleines Repo zu erstellen? Ich verwende Angular 9 im Beispielordner: https://github.com/tjoskar/ng-lazyload-image/blob/master/example/package.json und kann das Problem dort nicht sehen? Und nicht in dieser Code-Sandbox: https://codesandbox.io/s/lazy-load-image-with-httpclient-to538?file=/src/app/app.module.ts (zum Beispiel).

@tjoskar Dieser Fehler trat zum Zeitpunkt der Erstellung auf.

FEHLER: Ungültiger Anbieter für LazyLoadImageHooks. useClass kann nicht undefiniert sein.
Normalerweise passiert es, wenn:
1. Es besteht eine zirkuläre Abhängigkeit (möglicherweise durch die Verwendung von index.ts (Barrel) -Dateien verursacht).
2. Klasse wurde verwendet, bevor sie deklariert wurde. Verwenden Sie in diesem Fall forwardRef.

Eine nicht behandelte Ausnahme ist aufgetreten: Ungültiger Anbieter für LazyLoadImageHooks. useClass kann nicht undefiniert sein.
Normalerweise passiert es, wenn:
1. Es besteht eine zirkuläre Abhängigkeit (möglicherweise durch die Verwendung von index.ts (Barrel) -Dateien verursacht).
2. Klasse wurde verwendet, bevor sie deklariert wurde. Verwenden Sie in diesem Fall forwardRef.

Ich habe diesen Fehler beim Erstellen einer Winkelbibliothek
mit Version 7 passiert es nicht

Ich kann das nicht reproduzieren. Ich habe gerade eine neue Angular 9 App (9.1.9) erstellt:

❯ ng new my-app

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

Ich habe dann die folgenden Änderungen vorgenommen: https://github.com/tjoskar/ng-lazyload-image-bugs/commit/7fe50bd1631a20e7bcfed82f2a34acaeb6b50533

Und führen Sie npm run build ( ng build ) ohne Probleme aus.

Ich brauche deine Hilfe, um das zu beheben.

1. Erstellen Sie Ihre eigenen benutzerdefinierten Haken? Wenn ja, haben Sie eine Abhängigkeit in Ihren Hooks?
2. Fügen Sie LazyLoadImageModule in mehreren NgModule ?
3. Können Sie ein Repo erstellen, in dem Sie diesen Fehler reproduzieren? Oder geben Sie mir zumindest einige Codefragmente darüber, wie Sie es verwenden.

Versuchen Sie, keine Anwendung, sondern eine Bibliothek zu erstellen
Verwenden Sie diese Spezifikationen
https://angular.io/guide/creating-libraries
Importieren Sie das Modul und versuchen Sie, es auf npm freizugeben

@ emanuele-galeotti, ich folge nicht. ng-lazyload-image ist eine Bibliothek und wird in npm veröffentlicht. Ich hatte den Eindruck, dass Sie ng-lazyload-image in einer Anwendung verwenden, also habe ich versucht, eine Anwendung zu erstellen und die Bibliothek zu importieren ( ng-lazyload-image ).

Wollen Sie mir sagen, dass Sie eine Bibliothek erstellen und ng-lazyload-image als Abhängigkeit verwenden möchten? Oder schlagen Sie vor, dass ich eine neue Bibliothek erstellen sollte, indem ich der Anleitung folge, mit der Sie verknüpft sind, und den Code in die neu erstellte Bibliothek migriere?

Der obige Fehler tritt in meinem Fall auf, wenn:

1. Ich erstelle eine Bibliothek für meine Benutzeroberfläche
2. LazyLoadImageModule importieren
3. Ich mache einen Build und veröffentliche ihn dann auf npm

Können Sie darum bitten?
Ich habe kein Repo, weil das Projekt privat ist.

Schlägt der Build fehl, wenn Sie Ihre Bibliothek erstellen oder wenn Sie die Anwendung erstellen, die Ihre Bibliothek verwendet?

Ich habe jetzt folgendes gemacht:

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

Es gibt die Bibliothek: https://github.com/tjoskar/ng-lazyload-image-bugs/tree/master/463-invalid-provider-for-lazyLoadImageHook-libs

Und hier sind die Änderungen, die ich vorgenommen habe: https://github.com/tjoskar/ng-lazyload-image-bugs/commit/1bf60bcbf6133751c41f52cd3d837614dfb60bd0

Ich verstehe, wenn Ihre Projekte privat sind und Sie Ihren Code nicht teilen können, aber es wäre eine gute Hilfe, wenn Sie ein kleines Projekt erstellen könnten, in dem Sie den Fehler reproduzieren können.

Es schlägt fehl, wenn ich die Bibliothek erstelle. Sobald ich kann, versuche ich, den Code freizugeben.

Ich habe das gleiche Problem :(. Ich habe LAZY LOAD MODULE zum untergeordneten Modul hinzugefügt

Ich benutze Ionic 5, Winkel 9. und versuchen, auf Produkt zu bauen, wir haben diesen Fehler

gleicher Fehler. Versuchen Sie, eine App mit ionic 5 und andular 9 zu erstellen ...

Ich habe dies kompiliert, indem ich zur vorherigen Version zurückgekehrt bin:
npm install [email protected]
Ich bin auf Ionic 5.0.7 / Angular 8.2.14

Ich habe dies kompiliert, indem ich zur vorherigen Version zurückgekehrt bin:
npm install [email protected]
Ich bin auf Ionic 5.0.7 / Angular 8.2.14

es hat funktioniert .. danke ....

@ Davei234 es funktioniert gut danke

Ich kann dies nicht reproduzieren, daher würde ich mich freuen, wenn jemand ein Projekt erstellen kann, in dem dies reproduziert wird.
Ich habe einige verschiedene Projekte erstellt, in denen ich versuche, dies zu reproduzieren:

• Importieren von ng-lazyload-image in das Root-Modul: https://github.com/tjoskar/ng-lazyload-image-bugs/tree/master/463-invalid-provider-for-lazyLoadImageHooks-sub-module
• Erstellen einer Bibliothek (siehe: https://github.com/tjoskar/ng-lazyload-image/issues/463#issuecomment-639328375)
• Importieren von ng-lazyload-image in das Untermodul: https://github.com/tjoskar/ng-lazyload-image-bugs/commit/39b93c932ac02788cb1f92cebe1c05fb7d1f4e71

Bitte lassen Sie mich wissen, ob jemand Code freigeben kann, in dem Sie diesen reproduzieren.

Haben Sie Ivy aktiviert oder nicht? Sie können dies sehen, indem Sie ng version . Wenn Sie es deaktiviert haben, gibt es einen Grund, warum Sie es deaktiviert haben? Oder können Sie testen, um es zu aktivieren? Ich bin mir nicht sicher, wie ich das machen soll, aber suche in deinen tsconfig.sjon- und tsconfig.app.json -Dateien nach enableIvy .

Haben Sie Ivy aktiviert oder nicht? Sie können dies sehen, indem Sie ng version . Wenn Sie es deaktiviert haben, gibt es einen Grund, warum Sie es deaktiviert haben? Oder können Sie testen, um es zu aktivieren? Ich bin mir nicht sicher, wie ich das machen soll, aber suche in deinen tsconfig.sjon- und tsconfig.app.json -Dateien nach enableIvy .

Ich baue meine UI-Bibliothek auf, ich habe keinen Efeu, weil er von npm nicht akzeptiert wird

Es sieht so aus, als ob die Version 8.0.1 nur mit Efeu funktioniert. Ich weiß jedoch nicht warum gerade.

Ich habe das gleiche Problem mit Winkel 9, als ich IVY deaktiviert habe.

Hallo. Das Problem trat auf, als ich node_modules und die Sperrdatei löschte und npm install und den Build erneut ausführte.

Vorher funktionierte alles gut mit der neuesten Version 8.0.1

Efeu ist aktiviert.

Ich bin zur vorherigen Version (7.1.0) zurückgekehrt und es funktioniert wieder.

Ich habe das gleiche Problem und Ivy aktiviert.
Ich habe es mit Version 7.1.0 zum Laufen gebracht, während Angular 9 ausgeführt wurde, aber jetzt, da Angular 10 nicht mehr verfügbar ist, funktioniert dieser nicht mehr.
Version 7 verwendet "ModuleWithProviders". welches in Angular 10 geändert wurde

static forRoot(options: ModuleOptions): ModuleWithProviders;

Fehler bekommen
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.

Gleicher Fehler bei Verwendung von Winkel 10, wenn versucht wird, die Quellsprachendatei zu extrahieren.
ng xi18n --format=xlf2 --output-path src/locales
Der Fehler:
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.

Ich kann dies nur reproduzieren, wenn ich Ivy deaktiviere. Ich habe eine Angular 10-App erstellt, aber erst als ich Ivy deaktiviert habe, wurde der Fehler angezeigt.

Ich habe jetzt eine neue Version veröffentlicht, die so aussieht, als würde sie mit und ohne Ivy funktionieren. Bitte probieren Sie es aus und sehen Sie, ob es für Sie funktioniert: npm install [email protected] .

Wenn Sie benutzerdefinierte Hooks verwenden, müssen Sie Ihren Code aktualisieren:
Vor:

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

Nach dem:

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

Ich sehe diesen Fehler in meiner eckigen 10-App mit Efeu. Die Kompilierung funktioniert jedoch einwandfrei. Nur der Befehl ng xi18n schlägt mit dem oben genannten Fehler fehl.

Ein Upgrade auf 8.0.2-21 geholfen.

Angular 10
[email protected]

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

es funktionierte

Dies sollte in Version 9.0.0 behoben sein