Image lazy loading doesn't work in SSR when using ngTemplateOutlet and disabled hydration #55512
Labels
area: server
Issues related to server-side rendering
Milestone
Which @angular/* package(s) are the source of the bug?
platform-server
Is this a regression?
No
Description
In fresh application created with angular 17.3.4, with SSR and disabled hydration (removed
provideClientHydration()
from providers), when I setup html to use html<picture>
element with<ng-container [ngTemplateOutlet]="tmpImg"></ng-container>
inside of it - image lazy loading is not working in Chrome and Safari. For Firefox it works in each case.Example:
The
loading
property inside of the component ispublic loading = 'lazy'
.I created three listings with 20 elements with images. Each listing has different images setup, and I see that when
<img>
is inside of the<picture>
element directly, without usage of template outlet, lazy loading works fine.But if there is
<ng-container [ngTemplateOutlet]="tmpImg"></ng-container>
that loads<img>
tag instead of placing<img>
directly - lazy loading doesn't work.Also, if
<img>
is placed directly inside of<picture>
, but has*ngIf
attribute on<img>
, lazy loading also doesn't work.When the hydration is enabled - image lazy loading is working for all scenarios.
Full html could be checked on https://github.com/rmch91/image-lazy-loading/blob/main/src/app/listing2/listing2.component.html
Please provide a link to a minimal reproduction of the bug
https://github.com/rmch91/image-lazy-loading
Please provide the exception or error you saw
No response
Please provide the environment you discovered this bug in (run
ng version
)Anything else?
No response
The text was updated successfully, but these errors were encountered: