[lazyLoad]-Attribute won't resolved to "src"-Attribute

[Swagtex]

Hi there,

i have some trouble with lazy-loading on the SSR-Part.

Like the docs describes the [lazyLoad] attibute should be changed to src if the app is executed server-sided.
Browser-Part works fine. I'm facing this issue on two complete different environments. Results are the same.
To identify the problem i used a noscript browser extension. So the browser-part won't execute.

Versions:

Test environment:

• Angular: 11.0.4
• ng-lazyload-image: 9.1.0

Project environment:

• Anuglar 10.2.0
• ng-lazyload-image: 9.0.1

Reproduce:

ng new lazytest
ng add @nguniversal/express-engine
npm install ng-lazyload-image

Run the environment with:
npm run dev:ssr

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { Injectable, NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { Attributes, IntersectionObserverHooks, LazyLoadImageModule, LAZYLOAD_IMAGE_HOOKS } from 'ng-lazyload-image';

@Injectable()
export class LazyLoadImageHooks extends IntersectionObserverHooks {
  skipLazyLoading(attributes: Attributes) {
    console.log("Hook called!"); //Only called on browser
    return true; //Should skip every lazy load
  }
}

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule.withServerTransition({ appId: 'serverApp' }),
    LazyLoadImageModule
  ],
  providers: [{ provide: LAZYLOAD_IMAGE_HOOKS, useClass: LazyLoadImageHooks }],
  bootstrap: [AppComponent]
})
export class AppModule { }

app.component.html

<h1>LazyLoad-Test</h1>
<div style="width: 100vw; height: 120vh;">
  Placeholder
</div>
<h2>Image should be right here</h2>
<img [lazyLoad]="'https://www.placecage.com/1000/1000'" />

What i'm doing wrong? I also tried to add the hook directly to the app.server.module.ts. Still no success. I'cant figure it out how to solve my issue. Maybe kind a related to #427.

Thanks in advance. Kind regards

[tjoskar]

Thanks, @Swagtex for a detailed issue!
I can reproduce this so I will take a look at this.

[tjoskar]

I agree that the documentation is unclear. You should get the image from the server if you implement isDisabled:

@Injectable()
export class LazyLoadImageHooks extends IntersectionObserverHooks {
  skipLazyLoading(attributes: Attributes) {
    console.log("Hook called!"); //Only called on browser. 
    return true; //Should skip every lazy load
  }
  isDisabled() {
    return false;
  }
}

isDisabled is true for SSR as long as the request does not come from a bot (like google).

I'm not sure what the best solution is here. I should absolutely try to make the documentation more clear. But maybe also change the behavior a bit.

Regarding your comment: 'Only called on browser.'. I see this log in the node server as well.

[borjapazr]

I believe this is related to #551 and the problem that window.navigator is undefined on server side. Even if the request is made from a bot, the module will still be disabled and will not set the src attribute of the image correctly.

window.navigator is undefined on server side, so that doesn't work.