ERROR TypeError: element.getBoundingClientRect is not a function (Server Side Render) in Angular 5

[zahid492]

I got this error in server side rendering with using "@swimlane/ngx-datatable". I follow this link but not work ,I provide this following two service in root.module.server.ts and also try in which independent module where use data table.

When run this on browser there is everything fine.Anyone know how to resolve this.thanks.

**Error in Console

ERROR TypeError: element.getBoundingClientRect is not a function at DimensionsHelper.getDimensions (E:\ecap3\ecap3-webclient-selectnetwork\dist\server.js:233933:24) at DatatableComponent.recalculateDims (E:\ecap3\ecap3-webclient-selectnetwork\dist\server.js:254801:42) at DatatableComponent.recalculate (E:\ecap3\ecap3-webclient-selectnetwork\dist\server.js:254764:14) at DatatableComponent.set [as rows] (E:\ecap3\ecap3-webclient-selectnetwork\dist\server.js:254406:18) at updateProp (E:\ecap3\ecap3-webclient-selectnetwork\dist\server.js:12921:37) at checkAndUpdateDirectiveDynamic (E:\ecap3\ecap3-webclient-selectnetwork\dist\server.js:12692:23) at checkAndUpdateNodeDynamic (E:\ecap3\ecap3-webclient-selectnetwork\dist\server.js:14220:20) at checkAndUpdateNode (E:\ecap3\ecap3-webclient-selectnetwork\dist\server.js:14144:16) at prodCheckAndUpdateNode (E:\ecap3\ecap3-webclient-selectnetwork\dist\server.js:14865:5) at Object.updateDirectives (E:\ecap3\ecap3-webclient-selectnetwork\dist\server.js:285222:53720)

Current behavior Server Side Broken

Expected behavior Server side should be OK.

Please tell us about your environment:

Windows :10, HTTP Server: Express

• Table version: 0.8.x "@swimlane/ngx-datatable": "^11.2.0",

• Angular version: 5.1.3

• Browser: All Browser

• Language: TypeScript

[genyklemberg]

Had the same issue with SSR.

ERROR TypeError: li[i].getBoundingClientRect is not a function at NavComponent.a../src/app/shared/nav/nav.component.ts.NavComponent.onResize (C:\Users\Genyklemberg\code\sp-ssr\dis t\server.js:130648:33) at Timeout. (C:\Users\Genyklemberg\code\sp-ssr\dist\server.js:130636:48) at ZoneDelegate.invokeTask (C:\Users\Genyklemberg\code\sp-ssr\dist\server.js:544:31) at Object.onInvokeTask (C:\Users\Genyklemberg\code\sp-ssr\dist\server.js:7914:33) at ZoneDelegate.invokeTask (C:\Users\Genyklemberg\code\sp-ssr\dist\server.js:543:36) at Zone.runTask (C:\Users\Genyklemberg\code\sp-ssr\dist\server.js:311:47) at ZoneTask.invokeTask (C:\Users\Genyklemberg\code\sp-ssr\dist\server.js:619:34) at Timeout.ZoneTask.invoke (C:\Users\Genyklemberg\code\sp-ssr\dist\server.js:608:48) at Timeout.timer [as _onTimeout] (C:\Users\Genyklemberg\code\sp-ssr\dist\server.js:2163:29) at ontimeout (timers.js:475:11)

In my case, I ran a function immediately, before object instantiated was: setTimeout(onResize(), 500); runs the function and passes response to setTimeout should be: setTimeout(onResize, 500); runs the function after timeout

[ericel]

Any solution to this yet?

[kadirkalkan]

Is there a solution for this ?

[WaseemRakab]

this should be moved to issues on angular, i have the same issue on @ngx-pinch-zoom package https://github.com/drozhzhin-n-e/ngx-pinch-zoom