Can't resolve all parameters for ScrollHooks

[Tristen1099]

I'm getting the error ERROR in Can't resolve all parameters for ScrollHooks in C:/.........../node_modules/ng-lazyload-image/ng-lazyload-image.d.ts: (?). This only happens when doing ng build --prod but works fine with ng build. I have tries npm install ng-lazyload-image --save-prod with no success.

[ketanakbari]

i also facing this kind of issue while using --prod in build command.

[tjoskar]

What version of Angular are you using?
Can you place the full error message?

[Tristen1099]

Angular 8.3
ERROR in Can't resolve all parameters for ScrollHooks in C:........../node_modules/ng-lazyload-image/ng-lazyload-image.d.ts: (?).

[tjoskar]

Are you using the ScrollHook? Or how does your setup look like?

[tjoskar]

Does it look someting like:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { LazyLoadImageModule, LAZYLOAD_IMAGE_HOOKS, ScrollHooks } from 'ng-lazyload-image';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, LazyLoadImageModule],
  providers: [{ provide: LAZYLOAD_IMAGE_HOOKS, useClass: ScrollHooks }],
  bootstrap: [AppComponent],
})
export class MyAppModule {}

[Tristen1099]

Yes, the imports are exactly like that in the App Module class.

[ketanakbari]

@tjoskar i've also implemented like the same. i also getting same error

[tjoskar]

I will need to create a Angular 8.3 project in order to debug this. Is it possible for you to share your code or create a small repo where you can reproduce the error? Or give me your package.json file.

[Tristen1099]

{
"name": "personal-website",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"@angular/animations": "~8.2.14",
"@angular/common": "~8.2.14",
"@angular/compiler": "~8.2.14",
"@angular/core": "~8.2.14",
"@angular/forms": "~8.2.14",
"@angular/platform-browser": "~8.2.14",
"@angular/platform-browser-dynamic": "~8.2.14",
"@angular/router": "~8.2.14",
"bootstrap": "^4.4.1",
"hamburgers": "^1.1.3",
"jquery": "^3.5.1",
"moment": "^2.24.0",
"ng-lazyload-image": "^9.0.0",
"rxjs": "~6.4.0",
"tslib": "^1.10.0",
"zone.js": "~0.9.1"
},
"devDependencies": {
"@angular-devkit/build-angular": "^0.803.24",
"@angular/cli": "~8.3.23",
"@angular/compiler-cli": "~8.2.14",
"@angular/language-service": "~8.2.14",
"@types/jasmine": "~3.3.8",
"@types/jasminewd2": "~2.0.3",
"@types/node": "~8.9.4",
"codelyzer": "^5.0.0",
"jasmine-core": "~3.4.0",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~4.1.0",
"karma-chrome-launcher": "~2.2.0",
"karma-coverage-istanbul-reporter": "~2.0.1",
"karma-jasmine": "~2.0.1",
"karma-jasmine-html-reporter": "^1.4.0",
"protractor": "~5.4.0",
"ts-node": "~7.0.0",
"tslint": "~5.15.0",
"typescript": "~3.5.3"
}
}

[MarkHill89]

I am also facing this same error. Same parameters as the above comments.

[tjoskar]

I can confirm that this is a bug in Angular 8 (I can not reproduce it in Angular 10).

It is probably because of this line:

ng-lazyload-image/src/scroll-hooks/hooks.ts

Line 11 in 78512a9

constructor(getWindow = () => window) {

It looks like this works for now:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { LazyLoadImageModule, LAZYLOAD_IMAGE_HOOKS, ScrollHooks } from 'ng-lazyload-image';
import { AppComponent } from './app.component';

// Create a custom class with no constructor arguments
export class MyScrollHooks extends ScrollHooks {
  constructor() {
    super()
  }
}

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, LazyLoadImageModule],
  providers: [{ provide: LAZYLOAD_IMAGE_HOOKS, useClass: MyScrollHooks }],
  bootstrap: [AppComponent],
})
export class AppModule {}

[tjoskar]

Reference angular app can be found here: https://github.com/tjoskar/ng-lazyload-image-bugs/blob/master/476-cant-resolve-all-parameters-for-ScrollHooks/src/app/app.module.ts

[Tristen1099]

Thanks! That fixed it! I didn't realize how far back my angular version was. So I've updated to the newest version.

[tjoskar]

A fix is included in ng-lazyload-image@9.0.1 so you don't need to create an extra empty class.