loadImage function doesn't work in standalone angular App

[rezaimn]

I'm using Angular 17.3 and my app is completely standalone, so I don't have any ngModules. I want to use loadImage function to cancel the loading images when user changes the route or tab. I have imported the LazyLoadImageModule into my app component, also I have added the { provide: LAZYLOAD_IMAGE_HOOKS, useClass: LazyLoadImageHooks, deps: [HttpClient] } to my appConfig providers, I'm using this class

@Injectable()
class LazyLoadImageHooks extends IntersectionObserverHooks {
  private http: HttpClient;

  constructor(http: HttpClient) {
    // You can inject what ever service you want here
    super();
    this.http = http;
  }

  loadImage({ imagePath }: Attributes): Observable<string> {
    console.log('YYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYY', imagePath);
    return this.http.get(imagePath, { responseType: 'blob' }).pipe(map((blob) => URL.createObjectURL(blob)));
  }
}

the console.log never executes.

I tried to add LazyLoadImageModule to appconfig providers using importProvidersFrom( but it doesn't work.

how should I do it.

if you could provide me a simple example using angular standalone and use loadImage to cancel the image load, it would be so nice

[tjoskar]

Hi, I have not used the standalone mode but I guess that is the future of Angular.

Unfortunately, I am not actively developing this library anymore, see: https://github.com/tjoskar/ng-lazyload-image/issues/570

But I would welcome help if you figure out how to use it in standalone mode.