search

valor-software / ngx-bootstrap

Fast and reliable Bootstrap widgets in Angular (supports Ivy engine)
https://valor-software.com/ngx-bootstrap
MIT License
5.53k stars 1.69k forks source link

some background bug while using ngx modal with Angular Universal #5803

Open waseem-isaac-BBN opened 4 years ago

waseem-isaac-BBN commented 4 years ago

This Error appears on the console with the Modal while serving SSR . Maybe there's a bug in ModalBackdropComponent.set [as isShown]

Isn't ngx-bootstrap modal has support Server Side Rendering ?

ERROR TypeError: e.getBoundingClientRect is not a function
    at _guessBsVersion (..\dist\server\main.js:1:717300)
    at Object.isBs3 (../dist\server\main.js:1:717385)
    at ModalBackdropComponent.set [as isShown] (..\dist\server\main.js:1:3340711)
    at ModalBackdropComponent.ngOnInit (..\dist\server\main.js:1:3341070)
    at checkAndUpdateDirectiveInline (..\dist\server\main.js:1:624355)
    at checkAndUpdateNodeInline (D:\zvendo\cloned-electroo\dist\server\main.js:1:624398)
    at checkAndUpdateNode (..\dist\server\main.js:1:625964)
    at prodCheckAndUpdateNode ..\dist\server\main.js:1:636574)
    at Object.updateDirectives (..\dist\server\main.js:1:4388341)
    at Object.updateDirectives ..\dist\server\main.js:1:632538)

Iam using : "@angular: 8.2.x" "@nguniversal : 8.2.x" "ngx-bootstrap": "5.2.0"

Khaledinges commented 3 years ago

Same Error in Angular 8 SSR when using the modal component that calls the ngx-bootstrap-utils.js who contain the function responsible of poping the error.

function _guessBsVersion() { if (typeof document === 'undefined') { return null; } /** @type {?} */ const spanEl = document.createElement('span'); spanEl.innerText = 'test bs version'; document.body.appendChild(spanEl); spanEl.classList.add('d-none'); /** @type {?} */ const rect = spanEl.getBoundingClientRect(); document.body.removeChild(spanEl); if (!rect) { return 'bs3'; } return rect.top === 0 ? 'bs4' : 'bs3'; }

THE ERROR :

ERROR TypeError: spanEl.getBoundingClientRect is not a function at _guessBsVersion (/home/app/dist/test/server/main.js:12:89) at isBs3 (/home//app/dist/test/main.js:45:1) at ModalBackdropComponent.set isShown [as isShown] (/home/app/dist/test/main.js:458:1) at ModalBackdropComponent.ngOnInit

afifalfiano commented 7 months ago

I have an alternative solution, once you call the bsModalService to show the modal component, please wrap the function inside the condition of isPlatformBrowser(appId) true. You can use it with inject DOCUMENT and PLATFORM_ID. @waseem-isaac-BBN