search

googlemaps / v3-utility-library

Utility libraries for Google Maps JavaScript API v3
Apache License 2.0
1.1k stars 1.3k forks source link

Can't resolve '@google/markerclustererplus/dist/markerclusterer' #615

Closed jimmykane closed 4 years ago

jimmykane commented 4 years ago

Version ^5.0.1

Angular 9 

ERROR in ./src/app/components/events-map/events-map.component.ts
Module not found: Error: Can't resolve '@google/markerclustererplus/dist/markerclusterer' in '/Users/dimtrioskanellopoulos/Projects/track-tools/src/app/components/events-map'

Package 

{
  "name": "quantified-self",
  "version": "5.5.24-Bisbiki",
  "license": "SEE LICENSE IN LICENSE.md",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "clean": "rm -rf dist",
    "build": "ng build --verbose",
    "build-beta": "ng build --verbose --configuration beta",
    "build-production": "ng build --verbose --prod",
    "firebase-hosting-beta": "firebase deploy --only hosting:beta",
    "firebase-hosting-production": "firebase deploy --only hosting:production",
    "build-and-deploy-prod": "npm run clean && npm run build-production && npm run firebase-hosting-production",
    "build-and-deploy-beta": "npm run clean && npm run build-beta && npm run firebase-hosting-beta",
    "test": "ng test",
    "test-coverage": "ng test --code-coverage",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "postinstall": "ngcc --properties es2015 browser module main --first-only --create-ivy-entry-points"
  },
  "private": true,
  "dependencies": {
    "@agm/core": "^1.1.0",
    "@amcharts/amcharts4": "4.8.9",
    "@angular/animations": "9.0.0",
    "@angular/cdk": "^9.0.0",
    "@angular/common": "9.0.0",
    "@angular/compiler": "9.0.0",
    "@angular/core": "9.0.0",
    "@angular/fire": "6.0.0-rc.1",
    "@angular/forms": "9.0.0",
    "@angular/material": "^9.0.0",
    "@angular/platform-browser": "9.0.0",
    "@angular/platform-browser-dynamic": "9.0.0",
    "@angular/platform-server": "9.0.0",
    "@angular/router": "9.0.0",
    "@google/markerclustererplus": "^5.0.1",
    "@sentry/browser": "^5.12.1",
    "@sports-alliance/sports-lib": "^4.0.0",
    "@types/pako": "^1.0.1",
    "@types/uuid": "^3.4.7",
    "buffer": "^5.4.3",
    "fast-deep-equal": "^3.1.1",
    "firebase": "^7.8.1",
    "hammerjs": "^2.0.8",
    "material-design-icons-iconfont": "^5.0.1",
    "ng2-logger": "3.0.11",
    "rxjs": "^6.5.4",
    "tslib": "^1.10.0",
    "wasm-flate": "1.0.2-bundler",
    "zone.js": "~0.10.2"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.900.0",
    "@angular/cli": "^9.0.0",
    "@angular/compiler-cli": "9.0.0",
    "@types/googlemaps": "^3.39.2",
    "@types/jasmine": "3.5.3",
    "@types/node": "^13.7.0",
    "codelyzer": "^5.1.2",
    "first-input-delay": "^0.1.3",
    "jasmine-core": "^3.5.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~4.4.1",
    "karma-chrome-launcher": "~3.1.0",
    "karma-cli": "~2.0.0",
    "karma-coverage-istanbul-reporter": "^2.1.1",
    "karma-jasmine": "~3.1.0",
    "karma-jasmine-html-reporter": "^1.5.2",
    "protractor": "~6.0.0",
    "ts-node": "~8.6.2",
    "tslint": "~6.0.0",
    "typescript": "3.7.5"
  }
}

Usage: 

import { MarkerClusterer } from '@google/markerclustererplus/dist/markerclusterer';

No clue why this fails but I think ive not done anything wrong

jpoehnelt commented 4 years ago

import { MarkerClusterer } from '@google/markerclustererplus/dist/markerclusterer'; should be import { MarkerClusterer } from '@google/markerclustererplus';

jimmykane commented 4 years ago

Well that is how I tried at start but I got 

ERROR in src/app/components/events-map/events-map.component.ts:17:10 - error TS2614: Module '"../../../../node_modules/@google/markerclustererplus/dist"' has no exported member 'MarkerClusterer'. Did you mean to use 'import MarkerClusterer from "../../../../node_modules/@google/markerclustererplus/dist"' instead?

17 import { MarkerClusterer } from '@google/markerclustererplus';

Then I tried the editor auto import and that changed it to 

import { MarkerClusterer } from '@google/markerclustererplus/dist/markerclusterer';

Looking at the index.d.ts from this lib

These are the contents: 

/**
 * Copyright 2019 Google LLC. All Rights Reserved.
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *      http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */
import { MarkerClusterer } from "./markerclusterer";
export { ClusterIconInfo, ClusterIconStyle } from "./cluster-icon";
export { MarkerClustererOptions } from "./markerclusterer";
export default MarkerClusterer;
jpoehnelt commented 4 years ago

This is actually a case of a default export. Sorry I missed that. The following should work. I added the MarkerClustererOptions to show combining default and named exports.

import MarkerClusterer, { MarkerClustererOptions } from '@google/markerclustererplus'

See https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import#Syntax for more information.

jimmykane commented 4 years ago

Thank you for the help. It was not really apparent to me somehow. Perhaps the first error at first try late at night confused me.

TahaAlkhatib commented 4 years ago

@jimmykane Hi, I am trying to use the @google/markerclustererplus with Angular 9 too but I am stuck in initiating the MarkerClusterer and show it on the map, if you managed to make it or found an example about I really can use some help here, thanks

jimmykane commented 4 years ago

Sure. Search at my repos for quantified-self and look at the heatmaps / cluster component.

I am a bit off laptop ATM so cannot help in detail.

It's well possible also combined with agm maps.

Alternatively let's email

On Thu, 25 Jun 2020, 14:36 TahaAlkhatib, notifications@github.com wrote:

@jimmykane https://github.com/jimmykane Hi, I am trying to use the @google/markerclustererplus with Angular 9 too but I am stuck in initiating the MarkerClusterer and show it on the map, if you managed to make it or found an example about I really can use some help here, thanks

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/googlemaps/v3-utility-library/issues/615#issuecomment-649513776, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAJVX4ZOTLPIP2RZAZJ2KPDRYNAFDANCNFSM4KTHCGDA .

TahaAlkhatib commented 4 years ago

@jimmykane thanks alot, I see you are using @agm/core, I used @angular/google-maps in my project,I will check your code and try to understand how to do it with @angular/google-maps or I will switch to use agm instead.

jimmykane commented 4 years ago

@TahaAlkhatib here you go

https://github.com/jimmykane/quantified-self/blob/80fa82c6721e961f2630b70bb69a353c8b9007ba/src/app/components/events-map/events-map.component.ts

Its a combination of using Both AGM + native map. I think it aint so complicated

TahaAlkhatib commented 4 years ago

@jimmykane I noticed the "events-map" component once I looked at the quantified-self repo and realized this is exactly what I needed, I managed to make it work in my project now using almost the same code and method. thanks for your great help and thanks for taking from your time to answer me.