Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Image lazy loading doesn't work in SSR when using ngTemplateOutlet and disabled hydration #55512

Open
rmch91 opened this issue Apr 24, 2024 · 0 comments
Labels
area: server Issues related to server-side rendering
Milestone

Comments

@rmch91
Copy link

rmch91 commented Apr 24, 2024

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:

<picture>
        <source *ngFor="let source of [1,2,3]"
          [srcset]="'https://source.unsplash.com/random/200x300?sig=' + (source + 20 + i)"
          [media]="'(min-width: ' + (source * 100) + 'px)'" />

        <ng-container [ngTemplateOutlet]="tmpImg"></ng-container>
</picture>

<ng-template #tmpImg>
    <img [loading]="loading" [src]="'https://source.unsplash.com/random/200x300?sig=' + i" alt="Alt"
        class="list__img" />
</ng-template>

The loading property inside of the component is public 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)

Angular CLI: 17.3.4
Node: 18.14.0
Package Manager: npm 9.3.1
OS: darwin arm64

Angular: 17.3.4
... animations, cli, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, platform-server
... router, ssr

Browser: Chrome, Safari

Anything else?

No response

@thePunderWoman thePunderWoman added the area: server Issues related to server-side rendering label Apr 30, 2024
@ngbot ngbot bot added this to the needsTriage milestone Apr 30, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
area: server Issues related to server-side rendering
Projects
None yet
Development

No branches or pull requests

2 participants