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)

Commits related to this issue

Most upvoted comments

I forked js-marker-clusterer project and made the fix. It prevents initialization MarkerClusterer 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 by js-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

"install:clusterer-universal": "npm i js-marker-clusterer-universal && rm -rf node_modules/js-marker-clusterer && mv node_modules/js-marker-clusterer-universal node_modules/js-marker-clusterer",
"postbuild": "npm run install:clusterer-universal"

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 run npm 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 \ between node_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 !

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