Angular CLI installation

[Battozxz]

Hi, i looking for a way to install this library en my project with angular cli but when i try to import the dependencies like this:

import { PruneCluster, PruneClusterForLeaflet } from 'prunepluster'

in my component... i got the following error:

WEBPACK IMPORT MODULE _3_prunecluster _default PruneCluster is not a constructor

Any help?

[sylvaincaillot]

Hi, I have exactly the same issue but with a Vuejs project

  import L from 'leaflet'
  import Vue2Leaflet from 'vue2-leaflet'
  import { PruneCluster, PruneClusterForLeaflet } from 'prunecluster'

export default {
...
methods: {
      setClusters (data) {
        var markerLayer = new PruneClusterForLeaflet()
        for (var i = 0; i < data.length; i++) {
          var marker = new PruneCluster.Marker(data[i].s[2], data[i].s[3])
          markerLayer.RegisterMarker(marker)
        }        
        map.addLayer(markerLayer)
        markerLayer.ProcessView()
      }
}
...
}

and got a TypeError: __WEBPACK_IMPORTED_MODULE_10_prunecluster__.PruneClusterForLeaflet is not a constructor

i have also tried https://github.com/SINTEF-9012/PruneCluster/issues/115 but get the following error in that case: no-webpack-loader-syntax Unexpected '!' in 'exports-loader?PruneCluster,PruneClusterForLeaflet!prunecluster/dist/PruneCluster.js'. Do not use import syntax to configure webpack loaders

I am a bit frustated as I need to migrate my old pruneCluster project to VueJS now

Thank you for your help

Sylvain

[sylvaincaillot]

Hi, This is how i did overcome my issues above.

Following recommendation from https://github.com/facebookincubator/create-react-app/issues/1015

I have added the following line to prevent the eslint error:

/* eslint import/no-webpack-loader-syntax: off */
import { PruneCluster, PruneClusterForLeaflet } from 'exports-loader?PruneCluster,PruneClusterForLeaflet!prunecluster/dist/PruneCluster.js'
import 'prunecluster/dist/LeafletStyleSheet.css'

It's a bit dirty but it works in my case.

Cheers S.

[Treasureworth]

Hi, How I wish this also can work for angular.

Any idea to go about this?

[hansbrito]

Hey Guys! I'm having the same issue. Has anyone managed to solve it?

I'm trying to use in Angular 7 Project.

[TheVoxell]

in package.json "prunecluster": "2.1.0",

in angular.json

in "styles": [ "./node_modules/prunecluster/dist/LeafletStyleSheet.css",

"scripts": [ "./node_modules/prunecluster/dist/PruneCluster.js",

Then use it in your map component

[hansbrito]

Hi! Thanks for your reply! After installing @types/leaflet and follow your instructions, I got this error:

Leaflet types don't have any exported member ILayer:

[Jonibigoud]

@hansbrito , did you manage to make it work? If anybody has a clear explanation of how i could add PruneCLuster to an angular-cli project.

[hansbrito]

Yes, i`ve changed in PruneCluster Library:

Everytime I install a new library i need to replace entire folder.

It isn't a solution, only a workaround.

[Jonibigoud]

Thanks @hansbrito, but you just inserted .js and .css files like @TheVoxell suggested? Could you tell me how you call pruneCluster and pruneCLusterForLeaflet Constructors in your components ?

[hansbrito]

angular.json import Styles: "node_modules/prunecluster/dist/LeafletStyleSheet.css", and scripts: "node_modules/prunecluster/dist/PruneCluster.js",

inside my Component:

declare this variables:

on ngInit:

on onMapReady:

Now you can use like documentation says, adding markers ....

const _marker = new PruneCluster.Marker(packet.lat, packet.lng);
this.pruneCluster.RegisterMarker(_marker);

[Jonibigoud]

Thank you for your precious help, i really appreciate

[hrsh25]

Try: import { PruneCluster, PruneClusterForLeaflet } from "exports-loader?exports[]=PruneCluster&exports[]=PruneClusterForLeaflet!@sintef/prune-cluster/dist/PruneCluster.js"

There is actually a syntax error in the import statement