ERROR in Invalid provider for LazyLoadImageHooks. useClass cannot be undefined.

[its-dibo]

I got this error in an Angular9 project

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.

[felipefanucchi]

Same issue here

[sokhomhuy]

i get the same issue.
anyone can help?

[cicada0014]

i got same issue.... help us

[cicada0014]

um... I'm using it as version 7.1.0 until fix it.

[tjoskar]

What version of ng-lazyload-image are you using (check it by run npm ls ng-lazyload-image).

Do you get this error under build time or in the browser console?

Is it possible to create a small repo with this issue? I'm using Angular 9 in the example folder: https://github.com/tjoskar/ng-lazyload-image/blob/master/example/package.json and I can't see the issue there? And not in this code sandbox: https://codesandbox.io/s/lazy-load-image-with-httpclient-to538?file=/src/app/app.module.ts (for example).

[cicada0014]

@tjoskar this error occured at build time .

[emanuelegaleotti-quix]

ERROR: 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.

An unhandled exception occurred: 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.

I have this error while building an angular library
with version 7 it doesn't happen

[tjoskar]

I can't reproduce this. I just created a new angular 9 app (9.1.9):

❯ ng new my-app

❯ npm ls @angular/core
my-app@0.0.0
└── @angular/core@9.1.9

I then made the following changes: tjoskar/ng-lazyload-image-bugs@7fe50bd

And run npm run build (ng build) without any issues.

I need your help in order to fix this.

1. Do you create your own custom hooks? If so, do you have any dependency in your hooks?
2. Do you add LazyLoadImageModule in multiple NgModule?
3. Can you create a repo where you reproduce this error? Or at least give me some code snippets about how you are using it.

[emanuelegaleotti-quix]

Try not to create an application but a library
use these specifications
https://angular.io/guide/creating-libraries
import the module and try to release it on npm

[tjoskar]

@emanuele-galeotti, I do not follow. ng-lazyload-image is a library, and it is published to npm. I got the impression that you were using ng-lazyload-image in an application, so I tried to create an application and imported the library (ng-lazyload-image).

Are you telling me that you are creating a library and that you want to use ng-lazyload-image as a dependency? Or do you suggest that I should create a new library by following the guide you linked to and migrate the code to the newly created library?

[emanuelegaleotti-quix]

the above error occurs in my case when:

1. I create a library for my UI
2. import LazyLoadImageModule
3. I do a build and then release on npm

Can you ask to do this?
I don't have a repo because the project is private.

[tjoskar]

Does the build fail when you build your library or when you build the application that is using your library?

I did the following now:

❯ 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
+ ng-lazyload-image@8.0.1
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
------------------------------------------------------------------------------

There is the library: https://github.com/tjoskar/ng-lazyload-image-bugs/tree/master/463-invalid-provider-for-lazyLoadImageHook-libs

And here is the changes I made: tjoskar/ng-lazyload-image-bugs@1bf60bc

[tjoskar]

I understand if your projects are private and you cant share your code, but it would be to good help if you could create a small project where you can reproduce the error.

[emanuelegaleotti-quix]

it fails when I build the library, as soon as I can I try to share the code.

[nhoctanker]

i got same issue :( . i was add LAZY LOAD MODULE to child module

[nhoctanker]

i using Ionic 5, angular 9 . and try build to product we got that error

[DEVMAR92]

same issue. try build app with ionic 5 and andular 9...

[Davei234]

I got this to compile by going back to the previous version:
npm install ng-lazyload-image@7.0.1
I'm on Ionic 5.0.7 / Angular 8.2.14

[stackblogger]

I got this to compile by going back to the previous version:
npm install ng-lazyload-image@7.0.1
I'm on Ionic 5.0.7 / Angular 8.2.14

it worked.. thanks....

[AlaaEl-DinAhmed]

@Davei234 it works fine thanks

[tjoskar]

I'm not able to reproduce this so I would be happy if anyone can create a project where this is reproduced.
I have created a few different projects where I try to reproduce this:

• Importing ng-lazyload-image in root module: https://github.com/tjoskar/ng-lazyload-image-bugs/tree/master/463-invalid-provider-for-lazyLoadImageHooks-sub-module
• Creating a lib (see: ERROR in Invalid provider for LazyLoadImageHooks. useClass cannot be undefined. #463 (comment))
• Importing ng-lazyload-image in sub module: tjoskar/ng-lazyload-image-bugs@39b93c9

Please let me know if anyone can share some code where you reproduce this.

[tjoskar]

Do you have Ivy enabled or not? You can see that by running ng version. If you have it disabled, is there any reason why you have it disabled? Or can you test to enable it? I'm not sure how to do that but check for enableIvy in your tsconfig.sjon and tsconfig.app.json files.

[emanuelegaleotti-quix]

Do you have Ivy enabled or not? You can see that by running ng version. If you have it disabled, is there any reason why you have it disabled? Or can you test to enable it? I'm not sure how to do that but check for enableIvy in your tsconfig.sjon and tsconfig.app.json files.

I'm building my UI library, I don't have ivy on because it's not accepted by npm

[tjoskar]

It looks like version 8.0.1 only works with ivy. I don't however know why right now.

[vggarg96]

I got the same issue with angular 9 when I disabled IVY.

[lenpino]

Hi. The problem appeared when I deleted node_modules and lock file and ran npm install and the build again.

Before this everything was working fine with latest 8.0.1

Ivy is enable.

I went back to previous version (7.1.0) and it's working again.

[nrone]

I have the same issue, and I have Ivy enabled.
Got it working by useing version 7.1.0 while running Angular 9, but now that Angular 10 is out, this nolonger works.
Version 7 uses "ModuleWithProviders;" which has been changed in Angular 10

static forRoot(options: ModuleOptions): ModuleWithProviders;

Getting error
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.

[samizarraa]

Same error using angular 10, when try to extract the source language file.
ng xi18n --format=xlf2 --output-path src/locales
The error:
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.

[tjoskar]

I'm only able to reproduce this when I disable Ivy. I did create an Angular 10 app but it was only when I disabled Ivy I got the error.

I have now published a new version that looks like it works with, and without, Ivy. Please try it out and see if it works for you: npm install ng-lazyload-image@8.0.2-21.

If you are using custom hooks you will need to update your code:
Before:

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

After:

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

[sechel]

I see this error in my angular 10 app with ivy. However compilation works fine, only the ng xi18n command fails with the above mentioned error.

[sechel]

Upgrading to 8.0.2-21 helped.

[Art2058]

Angular 10
ng-lazyload-image@8.0.1

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

it worked

[tjoskar]

This should be fixed in version 9.0.0