Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

SSR Lazy Load Directive Bug

See original GitHub issue

Describe the bug in a sentence or two.

When using the loading=“lazy” directive with SSR / Angular universal there are window is not defined errors. Checking if it exists here might fix it?

Issue Type (Can be multiple)

[x] UI/Performance - Display or performance issues [x] Behaviour - Functions aren’t working as expected (Such as generate URL)

Steps to reproduce

<cl-image crop="fit" [public-id]="slide.image" type="fetch" loading="lazy" width="auto" responsive
  [attr.alt]="'Carousel Image ' + i">
  <cl-placeholder type="blur"></cl-placeholder>
  <cl-transformation quality="auto" fetch-format="auto"></cl-transformation>
</cl-image>

Error screenshots

Versions and Libraries (fill in the version numbers)

Angular Cloudinary SDK - 1.3.3 Angular - 11.x.0 Node - 14.15.3 NPM - 6.14.9

Issue Analytics

State:
Created 3 years ago
Comments:8 (3 by maintainers)

Top GitHub Comments

1reaction

strausrcommented, Apr 25, 2021

This issue has been resolve with the latest release (1.4.1). Please let us know if you’re still experiencing this issue.

0reactions

r3plicacommented, Mar 26, 2021

Oh, and to reproduce this issue, just create a new angular project, add angular universal and cloudinary. Then when you add your image, do it like this:

<cl-image [public-id]="publicId"  loading="lazy">

If you build your project with npm run build:ssr and then serve it with npm run serve:ssr you will reproduce the error.

Top Results From Across the Web

Lazy-loading feature modules - Angular

To lazy load Angular modules, use loadChildren (instead of component ) in your AppRoutingModule routes configuration as follows. AppRoutingModule (excerpt)

BrowserModule has already been loaded Error - Stack Overflow

If you need access to common directives such as NgIf and NgFor from a lazy loaded module... I'm using lazy loading and my...

Angular Universal: real app problems - InDepth.Dev

SSR issues in Angular · 1. Infinite page loading · 2. Lack of cache out of the box · 3. Server errors of...

Lazy Load Images in Angular with Two Lines of Code

Setting it to lazy will defer the loading of the resource until it reaches a calculated distance from the viewport. Browser support. Let's...

Lazy Loading Individual Vue Components and Prefetching

This is why the trick with v-if works. So it turns out that all we need to do to lazily load any component...