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>

Error screenshots

Screen Shot 2021-01-04 at 7 48 41 PM

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:closed
  • Created 3 years ago
  • Comments:8 (3 by maintainers)

github_iconTop GitHub Comments

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.

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.

Read more comments on GitHub >

github_iconTop 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)
Read more >
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...
Read more >
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...
Read more >
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...
Read more >
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...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Post

No results found

github_iconTop Related Hashnode Post

No results found