Gallery show error with universal

[andy200486]

What is the expected behavior?

What is the current behavior?

ERROR ReferenceError: requestAnimationFrame is not defined at AnimationFrameAction.requestAsyncId
The problem seems to be at this line
rxjs.animationFrameScheduler.schedule(function () { return _this._slidingWorker$.next(newState); });

What are the steps to reproduce?

What is the use-case or motivation for changing an existing behavior?

Which versions are you using for the following packages?

Angular:7.1.4
Angular CDK:7.2.1
Angular CLI:7.1.4
Typescript:3.1.6
Gallery: 4.0.1

I'm facing issues with your module when I use server side rendering.
Could you help me ?

Thanks

[andy200486]

When would it be available ?

Thanks

[MurhafSousli]

Sure! hopefully tomorrow

[MurhafSousli]

@andy200486 Available in v4.0.2-beta.0

[andy200486]

Thanks, it works good! But I got an other error now with this version :
ERROR ReferenceError: Image is not defined at this line
var img = new Image();

[Meistercoach83]

Hey Andy & Murhaf! Is there a solution for the "Image is not defined" error with SSR?

[retripcon]

Thanks, it works good! But I got an other error now with this version :
ERROR ReferenceError: Image is not defined at this line
var img = new Image();

+1 Facing the same error, fix appreciated.

Using latest version 4.0.2-beta.0

[retripcon]

I think I found the reason for this issue. As Angular Universal does not provide an actual DOM, you are not allowed to directly access the DOM for example via window or document objects (see Angular Universal documentation) in case you are using SSR.

ERROR ReferenceError: Image is not defined
  at LazyImage.nativeLoader (XXX\dist\server.js:203719:19)
  ...

Looking at the corresponding source code, I can see that a new instance of the class Image is created.

nativeLoader(url: string): Observable<any> {
    const img = new Image();
    ...
}

As documented in the MDN spec, Image is just a wrapper around document.createElement('img') which directly accesses the document object which again is forbidden for SSR usage. This should be easy to fix as Angular provides an abstraction for the document object which can be used even when using SSR as stated in the Universal documentation.

@MurhafSousli I don't have time to fix and test this fix properly, but this hopefully helps you to fix it :) Their might be other direct usages of DOM objects, keep this in mind when fixing this issue.

[bastienlemaitre]

Up!

[bastienlemaitre]

Hello,
Can you reopen the issue, it seems that another bug is present server side because of
this._loaderSub$
Indeed, server side, each observable is converted into a promise and becomes expected.
Can we return an empty observable? No need to load a server-side image I think ..

[MurhafSousli]

@bastienlemaitre Why haven't you test it out with Universal before sending me the PR?

[bastienlemaitre]

All my excuses, it works. On the other hand the server-side autoplay seems to pose a problem, it is he who makes the script crash because of the promise

[mrandreev]

Hey, any updates on this bug? As I see last fix was solved one problem and provided new one.

For now I can see only one workaround its just skip autoPlay feature on server-side:
[autoPlay]="isBrowser"