Ng-lazyload-image: LazyLoadImageHooksの無効なプロバイダーでエラーが発生しました。 useClassを未定義にすることはできません。

ここで同じ問題

同じ問題が発生します。
誰でも助けることができますか？

私は同じ問題を抱えています....私たちを助けてください

ええと...私はそれを修正するまでバージョン7.1.0として使用しています。

どのバージョンのng-lazyload-imageあなたが（実行によってそれを確認使用しているnpm ls ng-lazyload-image ）。

ビルド時またはブラウザコンソールでこのエラーが発生しますか？

この問題で小さなリポジトリを作成することは可能ですか？ サンプルフォルダでAngular9を使用しています： https ： https ： src / app /

@tjoskarこのエラーはビルド時に発生しました。

エラー：LazyLoadImageHooksのプロバイダーが無効です。 useClassを未定義にすることはできません。
通常、次の場合に発生します。
1.循環依存関係があります（index.ts（バレル）ファイルを使用することによって引き起こされる可能性があります）。
2.クラスは宣言される前に使用されました。 この場合、forwardRefを使用します。

未処理の例外が発生しました：LazyLoadImageHooksのプロバイダーが無効です。 useClassを未定義にすることはできません。
通常、次の場合に発生します。
1.循環依存関係があります（index.ts（バレル）ファイルを使用することによって引き起こされる可能性があります）。
2.クラスは宣言される前に使用されました。 この場合、forwardRefを使用します。

角度ライブラリの構築中にこのエラーが発生しました
バージョン7では発生しません

これは再現できません。 新しいAngular9アプリ（9.1.9）を作成しました：

❯ ng new my-app

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

次に、次の変更を行いました： https ：

そして、問題なくnpm run build （ ng build ）を実行します。

これを修正するためにあなたの助けが必要です。

1. 独自のカスタムフックを作成しますか？ もしそうなら、あなたはあなたのフックに何か依存関係がありますか？
2. LazyLoadImageModuleを複数のNgModule追加しますか？
3. このエラーを再現するリポジトリを作成できますか？ または、少なくとも、それをどのように使用しているかについてのコードスニペットをいくつか教えてください。

アプリケーションではなくライブラリを作成してみてください
これらの仕様を使用してください
https://angular.io/guide/creating-libraries
モジュールをインポートし、npmでリリースしてみてください

@ emanuele-galeotti、私はフォローしていません。 ng-lazyload-imageはライブラリであり、npmに公開されています。 アプリケーションでng-lazyload-imageを使用しているような印象を受けたので、アプリケーションを作成してライブラリ（ ng-lazyload-image ）をインポートしようとしました。

ライブラリを作成していて、依存関係としてng-lazyload-imageを使用したいと言っていますか？ または、リンクしたガイドに従って新しいライブラリを作成し、新しく作成したライブラリにコードを移行することをお勧めしますか？

上記のエラーは、私の場合、次の場合に発生します。

1. UI用のライブラリを作成します
2. LazyLoadImageModuleをインポートします
3. ビルドしてからnpmでリリースします

あなたはこれをするように頼むことができますか？
プロジェクトは非公開であるため、レポはありません。

ライブラリをビルドするとき、またはライブラリを使用しているアプリケーションをビルドするときに、ビルドは失敗しますか？

私は今、次のことをしました：

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

ライブラリがあります： https ：

そして、これが私が行った変更です： https ：

プロジェクトが非公開でコードを共有できないかどうかはわかりますが、エラーを再現できる小さなプロジェクトを作成できれば助かります。

ライブラリをビルドすると、コードを共有しようとするとすぐに失敗します。

同じ問題が発生しました:(。子モジュールにLAZYLOADMODULEを追加しました

Ionic 5、angular9を使用しています。 そのエラーが発生した製品にビルドしてみてください

同じ問題。 ionic5とandular9でアプリをビルドしてみてください...

以前のバージョンに戻って、これをコンパイルしました。
npm install [email protected]
Ionic 5.0.7 / Angular8.2.14を使用しています

以前のバージョンに戻って、これをコンパイルしました。
npm install [email protected]
Ionic 5.0.7 / Angular8.2.14を使用しています

それはうまくいきました..ありがとう....

@ Davei234それはうまく

再現できませんので、再現したプロジェクトを作っていただければ幸いです。
私はこれを再現しようとするいくつかの異なるプロジェクトを作成しました：

• ルートモジュールにng-lazyload-imageをインポートする： https ：
• libの作成（https://github.com/tjoskar/ng-lazyload-image/issues/463#issuecomment-639328375を参照）
• サブモジュールにng-lazyload-imageをインポートする： https ：

これを再現するコードを誰かが共有できるかどうか教えてください。

Ivy有効にしているかどうか。 ng version実行すると、それを確認できます。 無効にしている場合、無効にしている理由はありますか？ または、それを有効にするためにテストできますか？ その方法はわかりませんが、tsconfig.sjonファイルとtsconfig.app.jsonファイルでenableIvyを確認してください。

Ivy有効にしているかどうか。 ng version実行すると、それを確認できます。 無効にしている場合、無効にしている理由はありますか？ または、それを有効にするためにテストできますか？ その方法はわかりませんが、tsconfig.sjonファイルとtsconfig.app.jsonファイルでenableIvyを確認してください。

UIライブラリを構築していますが、npmで受け入れられないため、ツタがありません。

バージョン8.0.1はツタでのみ機能するようです。 しかし、なぜ今なのかわかりません。

IVYを無効にしたときに、Angular9でも同じ問題が発生しました。

こんにちは。 node_modulesとロックファイルを削除し、npminstallとビルドを再度実行すると問題が発生しました。

これ以前は、最新の8.0.1ですべてが正常に機能していました。

アイビーは有効です。

以前のバージョン（7.1.0）に戻りましたが、再び機能しています。

同じ問題があり、Ivyを有効にしています。
Angular 9の実行中にバージョン7.1.0を使用して機能するようになりましたが、Angular 10がリリースされたため、これは機能しなくなりました。
バージョン7は「ModuleWithProviders;」を使用します Angular10で変更されました

static forRoot(options: ModuleOptions): ModuleWithProviders;

エラーが発生する
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.

ソース言語ファイルを抽出しようとすると、Angular10を使用しても同じエラーが発生します。
ng xi18n --format=xlf2 --output-path src/locales
エラー：
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.

Ivyを無効にした場合にのみ、これを再現できます。 Angular 10アプリを作成しましたが、 Ivyを無効にしたときにのみエラーが発生しました。

Ivyの有無にかかわらず、動作するように見える新しいバージョンを公開しました。 それを試してみて、それがあなたのために働くかどうか確かめてください： npm install [email protected] 。

カスタムフックを使用している場合は、コードを更新する必要があります。
前：

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

後：

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

ivyを使用したAngular10アプリでこのエラーが表示されます。 ただし、コンパイルは正常に機能し、 ng xi18nコマンドのみが上記のエラーで失敗します。

8.0.2-21へのアップグレードが役に立ちました。

Angular 10
[email protected]

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

動いた

これはバージョン9.0.0で修正する必要があります