Ng-lazyload-image: LazyLoadImageHooks的无效提供程序中的错误。 useClass不能是未定义的。

这里同样的问题

我遇到同样的问题。
有人可以帮忙吗？

我遇到了同样的问题。...帮助我们

嗯...我将其作为7.1.0版使用，直到修复它为止。

您使用的是哪个版本的ng-lazyload-image （通过运行npm ls ng-lazyload-image ）。

您是在构建时还是在浏览器控制台中收到此错误？

是否可以为此问题创建一个小型仓库？ 我在示例文件夹中使用Angular 9： https ： https : =/ src/app/

@tjoskar此错误在构建时发生。

错误：LazyLoadImageHooks的提供程序无效。 useClass不能是未定义的。
通常在以下情况下发生：
1.存在循环依赖关系（可能是由于使用index.ts（桶形）文件引起的）。
2.在声明之前使用了类。 在这种情况下，请使用forwardRef。

发生未处理的异常：LazyLoadImageHooks的提供程序无效。 useClass不能是未定义的。
通常在以下情况下发生：
1.存在循环依赖关系（可能是由于使用index.ts（桶形）文件引起的）。
2.在声明之前使用了类。 在这种情况下，请使用forwardRef。

建立一个角度库时出现此错误
版本7不会发生

我无法重现。 我刚刚创建了一个新的angular 9应用程序（9.1.9）：

❯ ng new my-app

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

然后，我进行了以下更改： https :

并运行npm run build （ ng build ）没有任何问题。

我需要您的帮助才能解决此问题。

1. 您是否创建自己的自定义钩子？ 如果是这样，那么您是否对钩子有依赖性？
2. 您是否要在多个NgModule添加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 :

我了解您的项目是否为私有项目，并且您不能共享代码，但是如果您可以创建一个可以重现错误的小项目，那么这将对您有所帮助。

构建库时，它会失败，我可以尝试共享代码。

我有同样的问题:(。。我将LAZY LOAD MODULE添加到子模块

我使用离子5，角度9。 并尝试构建产品，我们得到了这个错误

同样的问题。 尝试使用ionic 5和ularular 9构建应用程序...

我可以通过回到以前的版本来编译它：
npm install [email protected]
我正在使用Ionic 5.0.7 / Angular 8.2.14

我可以通过回到以前的版本来编译它：
npm install [email protected]
我正在使用Ionic 5.0.7 / Angular 8.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时，我遇到了与角度9相同的问题。

你好。 当我删除node_modules并锁定文件并再次运行npm install和build时，出现了问题。

在此之前，最新的8.0.1一切正常

常春藤启用。

我回到了以前的版本（7.1.0），它又可以正常工作了。

我有同样的问题，并且启用了常春藤。
通过在运行Angular 9时使用7.1.0版本可以使其正常工作，但是现在Angular 10已经发布，此功能不再有效。
版本7使用“ ModuleWithProviders;”。 在Angular 10中已更改

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.

尝试提取源语言文件时，使用角度10时发生相同的错误。
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.

当我禁用常春藤时，我只能重现此内容。 我确实创建了一个Angular 10应用程序，但是只有当我禁用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 {}

我在使用常春藤的Angular 10应用程序中看到此错误。 但是，编译工作正常，只有ng xi18n命令失败，并出现上述错误。

升级到8.0.2-21有所帮助。

Angular 10
[email protected]

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

有效

这应该在版本9.0.0中修复