Skip to content

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

Open
@rmch91

Description

@rmch91

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    area: serverIssues related to server-side rendering

    Type

    No type

    Projects

    No projects

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions