Ng-lazyload-image: LazyLoadImageHooks에 대한 잘못된 공급자에 오류가 있습니다. useClass는 정의 해제 할 수 없습니다.

여기에 같은 문제

나는 같은 문제가 발생합니다.
누구든지 도울 수 있습니까?

나도 같은 문제가 생겼어 .... 도와 줘

음 ... 수정하기 전까지 버전 7.1.0으로 사용하고 있습니다.

사용중인 ng-lazyload-image 버전 ( npm ls ng-lazyload-image 실행하여 확인)

빌드 시간 또는 브라우저 콘솔에서이 오류가 발생합니까?

이 문제로 작은 저장소를 만들 수 있습니까? https://github.com/tjoskar/ng-lazyload-image/blob/master/example/package.json 예제 폴더에서 Angular 9를 사용하고 있는데 거기에서 문제를 볼 수 없습니까? 이 코드 샌드 박스에는 포함되지 않습니다 : https://codesandbox.io/s/lazy-load-image-with-httpclient-to538?file=/src/app/app.module.ts (예 :)

@tjoskar 이 오류는 빌드시 발생했습니다.

오류 : LazyLoadImageHooks에 대한 잘못된 공급자입니다. useClass는 정의 해제 할 수 없습니다.
일반적으로 다음과 같은 경우에 발생합니다.
1. 순환 종속성이 있습니다 (index.ts (배럴) 파일을 사용하여 발생할 수 있음).
2. 클래스가 선언되기 전에 사용되었습니다. 이 경우 forwardRef를 사용하십시오.

처리되지 않은 예외가 발생했습니다. LazyLoadImageHooks에 대한 잘못된 공급자입니다. useClass는 정의 해제 할 수 없습니다.
일반적으로 다음과 같은 경우에 발생합니다.
1. 순환 종속성이 있습니다 (index.ts (배럴) 파일을 사용하여 발생할 수 있음).
2. 클래스가 선언되기 전에 사용되었습니다. 이 경우 forwardRef를 사용하십시오.

각도 라이브러리를 만드는 동안이 오류가 발생했습니다.
버전 7에서는 발생하지 않습니다.

나는 이것을 재현 할 수 없습니다. 방금 새로운 앵귤러 9 앱 (9.1.9)을 만들었습니다.

❯ ng new my-app

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

그런 다음 다음과 같이 변경했습니다. https://github.com/tjoskar/ng-lazyload-image-bugs/commit/7fe50bd1631a20e7bcfed82f2a34acaeb6b50533

그리고 아무 문제없이 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://github.com/tjoskar/ng-lazyload-image-bugs/tree/master/463-invalid-provider-for-lazyLoadImageHook-libs

그리고 여기에 내가 변경 한 내용입니다 : https://github.com/tjoskar/ng-lazyload-image-bugs/commit/1bf60bcbf6133751c41f52cd3d837614dfb60bd0

프로젝트가 비공개이고 코드를 공유 할 수 없는지 이해하지만 오류를 재현 할 수있는 작은 프로젝트를 만들 수 있다면 도움이 될 것입니다.

라이브러리를 빌드 할 때 코드를 공유 할 수있는 즉시 실패합니다.

나는 같은 문제가 :(. 나는 LAZY LOAD MODULE를 자식 모듈에 추가했습니다.

Ionic 5, angular 9 사용. 제품에 빌드를 시도하면 오류가 발생했습니다.

같은 문제. ionic 5 및 andular 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://github.com/tjoskar/ng-lazyload-image-bugs/tree/master/463-invalid-provider-for-lazyLoadImageHooks-sub-module
• lib 생성 (참조 : https://github.com/tjoskar/ng-lazyload-image/issues/463#issuecomment-639328375)
• 하위 모듈에서 ng-lazyload-image 가져 오기 : https://github.com/tjoskar/ng-lazyload-image-bugs/commit/39b93c932ac02788cb1f92cebe1c05fb7d1f4e71

이것을 재현하는 코드를 공유 할 수있는 사람이 있으면 알려주세요.

Ivy 활성화되어 있습니까? ng version 를 실행하여 확인할 수 있습니다. 비활성화 한 경우 비활성화 한 이유가 있습니까? 아니면 활성화하기 위해 테스트 할 수 있습니까? 나는 확실히 그렇게 만 확인하는 방법을 모르겠어요 enableIvy 당신의 tsconfig.sjon과 tsconfig.app.json 파일.

Ivy 활성화되어 있습니까? ng version 를 실행하여 확인할 수 있습니다. 비활성화 한 경우 비활성화 한 이유가 있습니까? 아니면 활성화하기 위해 테스트 할 수 있습니까? 나는 확실히 그렇게 만 확인하는 방법을 모르겠어요 enableIvy 당신의 tsconfig.sjon과 tsconfig.app.json 파일.

UI 라이브러리를 구축 중입니다. npm에서 허용하지 않기 때문에 아이비가 없습니다.

8.0.1 버전은 ivy에서만 작동하는 것 같습니다. 그러나 지금은 왜 그런지 모르겠습니다.

IVY를 비활성화했을 때 angular 9에서 동일한 문제가 발생했습니다.

안녕하세요. node_modules 및 lock 파일을 삭제하고 npm install 및 빌드를 다시 실행하면 문제가 발생했습니다.

이 전에는 모든 것이 최신 8.0.1에서 잘 작동했습니다.

아이비가 활성화됩니다.

이전 버전 (7.1.0)으로 돌아가서 다시 작동합니다.

나는 같은 문제가 있으며 Ivy를 활성화했습니다.
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.

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가있는 angular 10 앱에서이 오류가 표시됩니다. 그러나 컴파일은 정상적으로 작동하지만 ng xi18n 명령

8.0.2-21 업그레이드하는 것이 도움이되었습니다.

Angular 10
[email protected]

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

작동했다

버전 9.0.0에서 수정되어야합니다.