angular-google-maps: Clusters are breaking the universal app
Issue description
Just importing the cluster module is breaking the app.
Steps to reproduce and a minimal demo of the problem
I have a map where all its markers are under a cluster. The map is wrapped into a conditional so it renders only on client (not on the server) because there are known issues. However, it still breaks the server side rendering because it tries to access window
at some point. This probably happens during module initialization, since the component itself never got instantiated.
Current behavior
Apps using cluster cannot be used in a server side app.
Expected/desired behavior
Apps should not break.
angular & angular-google-maps version
@angular/*
at 5.0.0@agm/core
at 1.0.0-beta.2
Other information
I’m looking for a workaround ATM but, of course, would be nice if users having a Universal app do not have to do anything. We should at least wrap all code with isPlatformBrowser
and just list that as a caveat for now, until we figure out how to render maps on the server, if it’s even possible.
About this issue
- Original URL
- State: closed
- Created 7 years ago
- Reactions: 2
- Comments: 30 (4 by maintainers)
I forked
js-marker-clusterer
project and made the fix. It prevents initializationMarkerClusterer
when window is not defined (on server side rendering). So marker clusterer works correctly in both cases now.It’s published in npm. https://www.npmjs.com/package/js-marker-clusterer-universal
js-marker-clusterer
dependency should be replaced byjs-marker-clusterer-universal
to take effect.@AoschkA I’m still using the workaround as mentioned in my earlier comment. You can find my example here:
https://github.com/cmddavid/js-marker-clusterer.git
My solution base on @mbrezovsky comment above - so
and it will be installed after all and replaced. And SSR works! 😃
@maksimbykov can you confirm
js-marker-clusterer-universal
is in your node_modules folder? perhaps it did not fully install, just in case you could runnpm i --save js-marker-clusterer-universal
. Also something weird seems to be going on with the file paths there. The first one has a double slash//
and the second one misses a backslash\
betweennode_modules
and@agm
.Also worth mentioning I did not check if the package still works with angular 6.
@AoschkA, the repo is just the compiled output, I did not any instructions, you can add it to your package.json like this:
"@agm/js-marker-clusterer": "git+https://github.com/cmddavid/js-marker-clusterer.git"
When you install it, you will have the js-marker-clusterer without window is undefined errors, and compiled to ES2015 so it’s compatible with services like Firebase.
Thx that works. Would be nice if this could be implemented in AGM though. But I appreciate the solution @cmddavid !
@lazarljubenovic we are going to move to https://github.com/googlemaps/v3-utility-library/tree/master/packages/markerclustererplus anyway
You literally downvoted the explanation on why it was closed. You’ve seen why it was closed.
This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.
@cmddavid thank you very much! probably yesterday I was tired and inattentive