search

bikecoders / ngx-sticky

Angular directive that adds sticky position to an HTML element and also applies and remove a custom class when the element is sticky positioned.
https://bikecoders.github.io/ngx-sticky/
10 stars 3 forks source link

On SSR gives `ReferenceError`s for window and document #18

Open anelad opened 4 years ago

anelad commented 4 years ago

The first thing is first; it works on SSR.

But gives console errors on page loads.

At first load of the app; it gives ReferenceError: window is not defined. Full output: 

ReferenceError: window is not defined
    at Object.Z8CG (/Volumes/WD_RAID/Documents/Projects/Web/medyaeli website/dist/server/main.js:159033:3)
    at __webpack_require__ (/Volumes/WD_RAID/Documents/Projects/Web/medyaeli website/dist/server/main.js:20:30)
    at new StickyDirective (/Volumes/WD_RAID/Documents/Projects/Web/medyaeli website/dist/server/main.js:150795:9)
    at createClass (/Volumes/WD_RAID/Documents/Projects/Web/medyaeli website/dist/server/main.js:79786:20)
    at createDirectiveInstance (/Volumes/WD_RAID/Documents/Projects/Web/medyaeli website/dist/server/main.js:79606:22)
    at createViewNodes (/Volumes/WD_RAID/Documents/Projects/Web/medyaeli website/dist/server/main.js:90886:38)
    at callViewAction (/Volumes/WD_RAID/Documents/Projects/Web/medyaeli website/dist/server/main.js:91336:13)
    at execComponentViewsAction (/Volumes/WD_RAID/Documents/Projects/Web/medyaeli website/dist/server/main.js:91241:13)
    at createViewNodes (/Volumes/WD_RAID/Documents/Projects/Web/medyaeli website/dist/server/main.js:90915:5)
    at createRootView (/Volumes/WD_RAID/Documents/Projects/Web/medyaeli website/dist/server/main.js:90758:5)

When surfing between pages after the app is loaded, it gives ERROR ReferenceError: document is not defined. Full output:

ERROR ReferenceError: document is not defined
    at StickyDirective.generateSentinelElement (/Volumes/WD_RAID/Documents/Projects/Web/medyaeli website/dist/server/main.js:150948:28)
    at StickyDirective.putSentinel (/Volumes/WD_RAID/Documents/Projects/Web/medyaeli website/dist/server/main.js:150966:31)
    at StickyDirective.ngAfterViewInit (/Volumes/WD_RAID/Documents/Projects/Web/medyaeli website/dist/server/main.js:150859:14)
    at callProviderLifecycles (/Volumes/WD_RAID/Documents/Projects/Web/medyaeli website/dist/server/main.js:80127:18)
    at callElementProvidersLifecycles (/Volumes/WD_RAID/Documents/Projects/Web/medyaeli website/dist/server/main.js:80092:13)
    at callLifecycleHooksChildrenFirst (/Volumes/WD_RAID/Documents/Projects/Web/medyaeli website/dist/server/main.js:80074:29)
    at checkAndUpdateView (/Volumes/WD_RAID/Documents/Projects/Web/medyaeli website/dist/server/main.js:90957:5)
    at callViewAction (/Volumes/WD_RAID/Documents/Projects/Web/medyaeli website/dist/server/main.js:91313:21)
    at execComponentViewsAction (/Volumes/WD_RAID/Documents/Projects/Web/medyaeli website/dist/server/main.js:91241:13)
    at checkAndUpdateView (/Volumes/WD_RAID/Documents/Projects/Web/medyaeli website/dist/server/main.js:90954:5)
dianjuar commented 4 years ago

@osnoser1 you as an expert of SSR can you give me your opinion here?

anelad commented 4 years ago

@dianjuar I'm always thrilled with your response time 🔥 🤣

dianjuar commented 4 years ago

@anelad Do you have a repo of your problem ? I can tell you that I kwon what SSR is about but I don't have any code experience with that

anelad commented 4 years ago

I can create a basic git repo. But I'm afraid its gonna take some time since I'm highly busy right now.

osnoser1 commented 4 years ago

Sorry for the delay @dianjuar. I created a PR with the fix: #19 😄

anelad commented 4 years ago

@dianjuar @osnoser1 I think there is no need for a repo of the problem now?

dianjuar commented 4 years ago

@osnoser1 THANK YOU!!!! I just ask for your opinion and you ended up making a PR! What a such friend! Thank you so much

dianjuar commented 4 years ago

@dianjuar @osnoser1 I think there is no need for a repo of the problem now?

I think there is no longer necessary

dianjuar commented 4 years ago

@anelad deploying...

anelad commented 4 years ago

Thank you @dianjuar

dianjuar commented 4 years ago

@osnoser1 take a look at this ----> https://travis-ci.org/bikecoders/ngx-sticky When installing the dependencies is compiling something and fails installing it... Do you know the reason ?

dianjuar commented 4 years ago

@anelad I just publish the package with your solution on the @next tag. You can install it by npm install ngx-sticky-directive@next

I am having issues with travis ci that, it's design to make the deployment automatically but is failing installing some dependencies. So until I fix that awful CI you can make your test with that version of the package.

I will reopen the issue until I fix it. Please tell me how it goes.

Sorry for the delay on this.

dianjuar commented 4 years ago

@osnoser1, We're migrating this package to Nx and making compatibility with Angular9.

I know too little about SSR, could you give us the instructions to know how to unit test the feature that you added? I want to have this feature always present on every change that we made from now on. I want to have the unit test for it.

osnoser1 commented 4 years ago

@dianjuar one of the ssr problems it's complex test that feature, in fact it is in the TODO of Angular Universal as you can see here.

I would have to think how to implement unit tests to the feature. Tomorrow I review the source code of this project to think of a good strategy.

dianjuar commented 4 years ago

@osnoser1 that was the information that I needed please don't mind.

And how test it manually? The reason for my concern is that we are migrating to Nx #25 and I want to at least test it manually.