Compatibility with Angular Universal

Hello,

I’m trying to integrate the component into my app, using Universal server-side rendering.

My code works fine (thanks for this good component!) without the SSR.

When running with SSR, this error occurs :

ERROR TypeError: this.elemRef.nativeElement.getBoundingClientRect is not a function
    at MinHDirective.JqLiteWrapper.getBoundingClientRect (path_to_project\node_modules\ng5-slider\bundles\ng5-slider.umd.js:201:43)

So it seems that the component doesn’t deal with SSR constraints (no access to browser window, etc…).

Should it be possible to make this component working with Universal ? In the meantime, did someone find a workaround ?

[harellevy]

just put in the constructor like this:

isBrowser: boolean;
constructor(@Inject(PLATFORM_ID) private platformId) {
    this.isBrowser = isPlatformBrowser(platformId);
}

and

*ngIf="isBrowser"

in the element that wraps ng5-slider component

[piotrdz]

No, I’m afraid the slider component is currently very closely tied to the browser. getBoundingClientRect() is necessary to calculate slider bounds and position the sub-elements accordingly.

To support something like Angular Universal, the slider layout would need to be re-written to use pure CSS in some clever way. I would have to research this further to see if this is possible. It would be actually a good thing to do, because it would also solve current performance issues.