Angular-google-maps: Module not found: '@agm/core/services/google-maps-types'

Same here

can you delete node_modules and re-run npm install

@doom777 I have done multiple times. no luck.

Sample code snippet below,

import { ZoomControlOptions, ControlPosition, MapTypeControlOptions, FullscreenControlOptions } from '@agm/core/services/google-maps-types';
mapTypeControlOptions:MapTypeControlOptions = {
    position: ControlPosition.LEFT_BOTTOM
    }

  fullscreenControlOptions: FullscreenControlOptions = {
    position : ControlPosition.LEFT_CENTER
  };

hmm, stackblitz is having its own problems right now. I am not succeeding in reproducing.

here is what I am trying:

ng new agm-test2
cd agm-test2
npm install @agm/core
code .

add AgmCoreModule.forRoot to AppModule

template: <agm-map [mapTypeControl]="true" [mapTypeControlOptions]="mapTypeControlOptions" [latitude]="0" [longitude]="0"></agm-map>

component:

import { Component } from '@angular/core';
import { MapTypeControlOptions, ControlPosition } from '@agm/core/services/google-maps-types';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styles: ['agm-map{height:300px}']
})
export class AppComponent {

  mapTypeControlOptions: MapTypeControlOptions = {
    position: ControlPosition.LEFT_BOTTOM
  };
}

result:

@doom777 here's an example of it not working: https://stackblitz.com/edit/angular-krqwfi?file=src%2Fapp%2Fapp.module.ts
all I did was add @agm/core and attempt to import the FitBoundsService

I am just getting

Uncaught (in promise) Error: Preset not sepcified in configuration at
Object.config (webcontainer.5f16b010d2745c788a2.js:15)
at t.config (webcontainer.5f16b010d2745c788a2.js:15)
at Be (preview-4858aaa60d96ac0657bab.js:1)
at preview-4858aaa60d96ac06

57bab.js:1

This seems to be a stackblitz error

Can you try something?

1. clone this library
2. go to packages\core\map-types.ts
3. add ControlPosition to the list of exports
4. build the library with yarn build
5. link the library with npm link (google tutorials if you haven't used npm link before)
6. see if it starts working

Please try my PR https://github.com/SebastianM/angular-google-maps/pull/1730 and tell us if it fixes the problem.

You will have to change the import of ControlPosition and others to '@agm/core'

@doom777 I have cloned, build and tested #1730. It's working as expected.

@doom777 this looks to be due to how ng-packager packages things.

Instead of having people update their imports once for this and then for #1648 should we just focus on getting #1648 out which will handle any google maps imports? (Your change for #1730 may be needed for directives/services which are not imported via @agm/core and instead are imported from @agm/core/{directives,services}

Just to be clear ng-packagr was a potentially breaking change regarding the API surface where #1648 is breaking that same surface (google maps types imports)

I added #1731 which is an ng-packagr change for this module, but it doesn't address imports from @agm/core/* that are not @agm/core/services/google-maps-types (including @agm/core/services or @agm/core/directives)

I get this error when i try to import {google} from @agm/core/services/google-maps-types. I've also tryed to delete node_modules and re-run npm install many times. Please help me to find a solution.

@pasqualepalmaccio if it's production, go back to 1.0.0-beta.7. Otherwise, wait until we release a fix.

After updating I have the same issue. Is there some workarround ?

@jimmykane you should make sure your package.json specifies "@agm/core: "1.0.0-beta.7" not @agm/core: "^1.0.0-beta.7" because this will mean you have the 1.0.0 release which does not expose the same interface.

We're working on fixing this, but there are other imports we need to address.

we have a fix, just temp problem merging it in

I still see this issue, Is this fix merged?

no, can't find another contributor to approve my PR :(

Is this fix merged?

Maybe pull back the 1.0.0 version as long as you work on a fix?

Have the same issue trying to import:

import { ZoomControlOptions, ControlPosition, ZoomControlStyle } from '@agm/core/services/google-maps-types';

Just signing up to get notified of fix. Will use hard-coded magic values for now

you can use 1.0.0-beta.7 for now.
1.0.1 coming out soon, I am trying to contact Sebastian Holstein, but no luck

hi @SebastianM waky waky .... Please come on lets bump this

1.0.0-beta.7 breaks with IVY so currently we are locked out from using this package.

Bump @SebastianM please maintain this repo come on. Merge and release.

For 1 persons works we are all struggling here.

Maybe we should just fork it? Clearly enough ppl are interested in using this package.

Or: https://drewdevault.com/2018/12/04/How-to-abandon-a-FLOSS-project.html
Or even: https://www.codeshelter.co/

Perhaps Sebastian can just add the correct privileges to the collabs here
and voila problem solved.

On Sat, 2 Nov 2019, 12:37 Lukas Neumann, notifications@github.com wrote:

Maybe we should just fork it? Clearly enough ppl are interested in using
this package.

Or: https://drewdevault.com/2018/12/04/How-to-abandon-a-FLOSS-project.html
Or even: https://www.codeshelter.co/

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/SebastianM/angular-google-maps/issues/1729?email_source=notifications&email_token=AAJVX45GD4L46U7JGGD7FMDQRVQ7FA5CNFSM4IYS2YRKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEC4Z6DY#issuecomment-549035791,
or unsubscribe
https://github.com/notifications/unsubscribe-auth/AAJVX45ENBM22GNL6UEF26TQRVQ7FANCNFSM4IYS2YRA
.

I am getting

Module not found: Error: Can't resolve '@agm/core/services' although it's installed!!

@agm/core: 1.0.0-beta.3

Can you try to upgrade to 1.0.0-beta.7?

how do i upgragde it? -> npm install 'agm/core 1.0.0-beta.7' ?

well, npm install @agm/[email protected] or npm update @agm/core

Solved without updating. I tried

import { GoogleMapsAPIWrapper } from '@agm/core';

and it's successfully working.

Ok. Also, you probably shouldn't be using GOogleMapsAPIWrapper

Why could you please explain? @doom777

Why could you please explain? @doom777

I believe that GoolgeMapsAPIWrapper is only meant to be used internally to the library, not for us consumers of it. You should be using the input and event bindings to the main component. In your module you import the AgmCoreModule, and forRoot it in your imports section.

If you want to get direct access to the google maps api, you can get the map from (mapReady) on the component, like so:

<agm-map [streetViewControl]="false" [latitude]="lat" [longitude]="lng" [styles]="mapStyles" [zoom]="defaultZoom" [zoomControlOptions]="zoomControlOptions" (mapReady)="mapReady($event)" (zoomChange)="zoomChanged($event)"> </agm-map>

In the component code:

mapReady(map: google.maps.Map) { this.map = map; }

And you can get typing for your map by installing @types/googlemaps

@Toomavic
GoogleMapsApiWrapper is meant internally for library, or for extensions. It's imperative, which is against the declarative style of Angular. Most of the things you'd do with GMAW you should be able to do with Inputs and Outputs on agm-map and its children.

@ermcgrat you can also get most of the types from "@agm/core", at least until #1648 gets merged

Thanks guys .. Many Thanks 😍😍😍😍😍

Hi why is this issue closed?
1.1.0 does not fix it

Well, @jimmykane version 1.1.0 allows you to:

import { ControlPosition } from '@agm/core'

Hi all,

1.1.0 does not fix it for me either. I still have this :
Module '"../../../../node_modules/@agm/core/agm-core"' has no exported member 'MapTypeControlStyle'
Eventhough it does have it exported :

I already tried deleting node_modules and package-lock, not doing better though...

I am still getting this error, too.
Module not found: Error: Can't resolve '@agm/core/services/google-maps-types'
I am trying to access for example google.maps.geometry.spherical.computeArea(). I can achieve this by installing @types/googlemaps and then import {} from 'googlemaps'; but this feels kind of hacky plus IntelliJ Idea marks it as unused import. _Optimize imports_ then deletes this line and breaks the code.
Can this please be fixed? 🙏🏻

try import { GoogleMapsAPIWrapper } from '@agm/core';

instead of import { GoogleMapsAPIWrapper } from '@agm/core/service';

This is still not fixed in 1.1.0. Can it be please reopened and worked upon?

I'm facing this error. I tried with different versions and the error remains...

for all those who are "still" facing this error, don't do deep imports, do shallow ones.

Hi @doom777 is this addressed ?

yes, if you are using the new 3.0.0 version, remove the import completely since we no longer package proprietary google types. If you're using 1.1.0, just import the types from @agm/core, and not deep inside the lib

Could you help me out a bit here?

I see now that AGM can get a QueryList mapControls: QueryList<AgmMapControl>;

Do we now do it like what?

Before it was:

 public mapTypeControlOptions: MapTypeControlOptions = {
    // mapTypeIds: [MapTypeId.HYBRID, MapTypeId.ROADMAP, MapTypeId.SATELLITE, MapTypeId.TERRAIN],
    mapTypeIds: ['hybrid', 'roadmap', 'satellite', 'terrain'],
    position: ControlPosition.LEFT_TOP,
    style: 0
  };

And on the templates:

<agm-map *ngIf="activitiesMapData.length > 0"
             [mapTypeId]="user && user.settings ? user.settings.mapSettings.mapType : 'roadmap'"
             (mapTypeIdChange)="changeMapType($event)"
             [fullscreenControl]="true"
             [mapTypeControl]="true"
             [scaleControl]="true"
             [rotateControl]="true"
             [zoomControl]="true"
             [gestureHandling]="'cooperative'"
             [scrollwheel]="null"
             [mapTypeControlOptions]="mapTypeControlOptions"
             [zoomControlOptions]="zoomControlOptions"
             [rotateControlOptions]="rotateControlOptions"
             [tilt]="45"
             [controlSize]="32"
             [disableDefaultUI]="true"
             [styles]="getStyles(theme)"
             [streetViewControl]="false">

well, come to discord for futher discussion, but basically

<agm-map *ngIf="activitiesMapData.length > 0"
             [mapTypeId]="user && user.settings ? user.settings.mapSettings.mapType : 'roadmap'"
             (mapTypeIdChange)="changeMapType($event)"
             [gestureHandling]="'cooperative'"
             [scrollwheel]="null"
             [mapTypeControlOptions]="mapTypeControlOptions"
             [zoomControlOptions]="zoomControlOptions"
             [rotateControlOptions]="rotateControlOptions"
             [tilt]="45"
             [controlSize]="32"
             [disableDefaultUI]="true"
             [styles]="getStyles(theme)"
             [streetViewControl]="false">
   <agm-fullscreen-control></agm-fullscreen-control>
   <agm-scale-control></agm-scale-control>
   <agm-map-type-control [style]="style" [mapTypeIds]="mapTypeIds" [position]="position"></agm-map-type-control>

@doom777 Roger that. Saw that this was there and I was wondering to join or no :-D

Let me try your advice. I didn't know they are now elements. Much better

yes, if you are using the new 3.0.0 version, remove the import completely since we no longer package proprietary google types. If you're using 1.1.0, just import the types from @agm/core, and not deep inside the lib

Hi @doom777 I'm still having some issues after updating my project:

ERROR in node_modules/@agm/js-marker-clusterer/services/google-clusterer-types.d.ts:1:60 - error TS2307: Cannot find module '@agm/core/services/google-maps-types' or its corresponding type declarations.

1 import { GoogleMap, LatLngBounds, Marker, MVCObject } from '@agm/core/services/google-maps-types';

I'd like to take up on your advice to not do deep imports, but unfortunately this is still the case in @agm/js-marker-clusterer. Am I missing something?

These are the versions used:

"@agm/core": "3.0.0-beta.0",
"@agm/js-marker-clusterer": "^1.1.0",

Thanks in advance!

You have a version mismatch. If you're using angular 10, then use @agm/[email protected] and @agm/[email protected].
If you are using Angular 9 and earlier, use @agm/[email protected] and @agm/[email protected]

You have a version mismatch. If you're using angular 10, then use @agm/[email protected] and @agm/[email protected].
If you are using Angular 9 and earlier, use @agm/[email protected] and @agm/[email protected]

This worked. But I've needed to update from:

import { AgmJsMarkerClustererModule } from '@agm/js-marker-clusterer';

to:

import { AgmMarkerClustererModule } from '@agm/markerclusterer'

In my module. For some reason, [streetViewControl] and [zoomControl] were not working. After removing them, it worked normally. I'll validate in the docs if something changed for these properties.

Besides that, related to @agm/markerclustererI think the documentation might be updated ASAP.

Correct. The control options have been removed in favor of control sub elements