Ng-lazyload-image: TypeError: Cannot read property 'toLowerCase' of undefined when loading page from middle vs top

Hi,

I'm not able to reproduce this :/
When you say "Load your test page as normal". Do you mean this page: https://tjoskar.github.io/ng-lazyload-image or do you run the page locally with npm start?

What browser are you using?

For some reason on github.io I cannot refresh the page after loading it once. It says 404 not found every time :(

But in general, I mean locally with whatever project - I'm using Angular 4 with Universal and Node (so universal might have something to do with this). Using Chrome 59 for Windows 10. I think this might be a bug with the new onLoad functionality but not positive. The error only comes up in the Node console, doesn't seem to make any errors come up in the Chrome console.

Hi @elitenick,
Can you give a full stack trace of error?

@tjoskar
I think that error is related with https://github.com/tjoskar/ng-lazyload-image/blob/master/src/lazyload-image.ts#L75, before here will catch of error, but since is not.
In Angular Universal here https://github.com/tjoskar/ng-lazyload-image/blob/master/src/lazyload-image.ts#L47 producing error, because element in server is undefined.
I think, quite good solution of the problem is to disable lazy img in server side.

For some reason on github.io I cannot refresh the page after loading it once. It says 404 not found every time :(

Yeah, that's because github don't support to redirect all request to index.html (but that is a completely different problem)

It has probably something to do with Angular Universal but there are a few things I don't understand:

1. Why do you only get the error when you refresh the page? Node should not get any information about the scroll position or if it's your first or second visit (the backend should not have any state of that kind).
2. Let's say it is this row that causes the problem. If so, element can't be undefined because we are accessing nodeName from element without any errors and furthermore, we are using element in isVisible() and we are even using window in that function, which should be undefined in a server context.

I think this might be a bug with the new onLoad functionality but not positive

Are you using (onLoad)? Can you try to remove it and see if you can reproduce the error?

@rimlin

I think, quite good solution of the problem is to disable lazy img in server side.

Yeah, I doesn't make any sense to lazyload images on the server (since we don't know anything about the screen size).
Maybe we can just add if (isPlatformServer(this.platformId)) return; (ref) in ngAfterContentInit.

https://github.com/tjoskar/ng-lazyload-image/pull/179

@elitenick, I just published [email protected] with @rimlin pull request. Can you install it (npm install [email protected]) and see if it solves the issue?

For sure! Will check it today and let you know! Thanks guys.

It's fixed! Thanks a ton!! Recreated my same scenario several times and no more Node errors. And the lazy loading continues to work once Angular kicks in.

Included in [email protected].