Ng-lazyload-image: ОШИБКА в недопустимом поставщике для LazyLoadImageHooks. useClass не может быть неопределенным.

Такая же проблема здесь

у меня такая же проблема.
кто-нибудь может помочь?

у меня такая же проблема .... помогите нам

гм ... Использую как версию 7.1.0, пока не исправлю.

Какую версию ng-lazyload-image вы используете (проверьте, выполнив npm ls ng-lazyload-image ).

Вы получаете эту ошибку во время сборки или в консоли браузера?

Можно ли создать небольшое репо с этой проблемой? Я использую Angular 9 в папке с примерами: https://github.com/tjoskar/ng-lazyload-image/blob/master/example/package.json, и я не вижу там проблемы? И не в этой песочнице кода: 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.

У меня эта ошибка при создании библиотеки angular
с версией 7 этого не происходит

Я не могу воспроизвести это. Я только что создал новое приложение angular 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
• Создание библиотеки (см .: 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 .

Я создаю свою библиотеку пользовательского интерфейса, у меня нет плюща, потому что он не принимается npm

Похоже, версия 8.0.1 работает только с плющом. Однако я не знаю почему прямо сейчас.

У меня такая же проблема с angular 9, когда я отключил IVY.

Привет. Проблема возникла, когда я удалил node_modules и файл блокировки и снова запустил npm install и сборку.

До этого все работало нормально с последней версией 8.0.1

Плющ включен.

Я вернулся к предыдущей версии (7.1.0), и она снова работает.

У меня такая же проблема, и у меня включен Ivy.
Он заработал, используя версию 7.1.0 при запуске Angular 9, но теперь, когда 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.

Та же ошибка с использованием angular 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 я получил ошибку.

Я опубликовал новую версию, которая, похоже, работает как с 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 с ivy. Однако компиляция работает нормально, только команда ng xi18n завершается с ошибкой, указанной выше.

Обновление до 8.0.2-21 помогло.

Angular 10
[email protected]

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

это сработало

Это должно быть исправлено в версии 9.0.0.