Cannot read property 'then' of undefined agm-circle

[MerlinMoos]

Hello,

i've got an error since i've installed new version...

Issue description

Steps to reproduce and a minimal demo of the problem Install Angular 9 and AGM 3.0.0-beta.0

Current behavior

Expected/desired behavior No error

angular-google-maps, Angular, & any other relevant dependency versions

Angular 9 AGM 3.0.0-beta.0 Other information

[ghost]

This was fixed, but not deployed.

[MerlinMoos]

Thank you.

[anshusingh1234]

when will it be deployed? any idea? I am also facing same issue.

[ilprima]

This was fixed, but not deployed.

I have the same problem. When it will be deployed? And when AGM 3.0.0 will be no more in beta?

[codebeginer]

I also faced the issue. What I guess is they are registering the events before the circle is created. Before we get updated version you can make the following changes to make it work

Go to the file at /node_modules/@agm/core/fesm2015/agm-core.js You will get the bellow function

addCircle(circle) {
    this._apiWrapper.getNativeMap().then(() => {
        this._circles.set(circle, this._apiWrapper.createCircle({
            center: { lat: circle.latitude, lng: circle.longitude },
            clickable: circle.clickable,
            draggable: circle.draggable,
            editable: circle.editable,
            fillColor: circle.fillColor,
            fillOpacity: circle.fillOpacity,
            radius: circle.radius,
            strokeColor: circle.strokeColor,
            strokeOpacity: circle.strokeOpacity,
            strokePosition: google.maps.StrokePosition[circle.strokePosition],
            strokeWeight: circle.strokeWeight,
            visible: circle.visible,
            zIndex: circle.zIndex,
        }))
    });
}

Change it to the following

addCircle(circle) {
    return this._apiWrapper.getNativeMap().then(() => {
        this._circles.set(circle, this._apiWrapper.createCircle({
            center: { lat: circle.latitude, lng: circle.longitude },
            clickable: circle.clickable,
            draggable: circle.draggable,
            editable: circle.editable,
            fillColor: circle.fillColor,
            fillOpacity: circle.fillOpacity,
            radius: circle.radius,
            strokeColor: circle.strokeColor,
            strokeOpacity: circle.strokeOpacity,
            strokePosition: google.maps.StrokePosition[circle.strokePosition],
            strokeWeight: circle.strokeWeight,
            visible: circle.visible,
            zIndex: circle.zIndex,
        }))
    });
}

At line 1450 you will find this code

ngOnInit() {
   this._manager.addCircle(this);
   this._circleAddedToManager = true;
   this._registerEventListeners();
}

Change it to the below code

ngOnInit() {
    var rip = this._manager.addCircle(this);
    rip.then(() => {
        this._circleAddedToManager = true;
        this._registerEventListeners();
    })
}

Now this issue will be gone and all the events will work, I checked the radius change as I need this event to work.

[Foreverdie]

Personnally, i put the @codebeginer 's modifications in node/modules/@agm/core/ivy_ngcc/fesm2015/agm-core.js .

@SebastianM or anyone else to add it ?

[ikashifullah]

@SebastianM any update on this?

[IgorGeorgioski]

@SebastianM we really need this, please add it when possible.

[Alexise857]

I'm facing the same issue ... was this pushed?

[Abdelrahmansherwida]

I also faced the issue. What I guess is they are registering the events before the circle is created. Before we get updated version you can make the following changes to make it work

Go to the file at /node_modules/@agm/core/fesm2015/agm-core.js You will get the bellow function

addCircle(circle) {
    this._apiWrapper.getNativeMap().then(() => {
        this._circles.set(circle, this._apiWrapper.createCircle({
            center: { lat: circle.latitude, lng: circle.longitude },
            clickable: circle.clickable,
            draggable: circle.draggable,
            editable: circle.editable,
            fillColor: circle.fillColor,
            fillOpacity: circle.fillOpacity,
            radius: circle.radius,
            strokeColor: circle.strokeColor,
            strokeOpacity: circle.strokeOpacity,
            strokePosition: google.maps.StrokePosition[circle.strokePosition],
            strokeWeight: circle.strokeWeight,
            visible: circle.visible,
            zIndex: circle.zIndex,
        }))
    });
}

Change it to the following

addCircle(circle) {
    return this._apiWrapper.getNativeMap().then(() => {
        this._circles.set(circle, this._apiWrapper.createCircle({
            center: { lat: circle.latitude, lng: circle.longitude },
            clickable: circle.clickable,
            draggable: circle.draggable,
            editable: circle.editable,
            fillColor: circle.fillColor,
            fillOpacity: circle.fillOpacity,
            radius: circle.radius,
            strokeColor: circle.strokeColor,
            strokeOpacity: circle.strokeOpacity,
            strokePosition: google.maps.StrokePosition[circle.strokePosition],
            strokeWeight: circle.strokeWeight,
            visible: circle.visible,
            zIndex: circle.zIndex,
        }))
    });
}

At line 1450 you will find this code

ngOnInit() {
   this._manager.addCircle(this);
   this._circleAddedToManager = true;
   this._registerEventListeners();
}

Change it to the below code

ngOnInit() {
    var rip = this._manager.addCircle(this);
    rip.then(() => {
        this._circleAddedToManager = true;
        this._registerEventListeners();
    })
}

Now this issue will be gone and all the events will work, I checked the radius change as I need this event to work.

i follow all your tips but no event work and still has same problem

[codebeginer]

I also faced the issue. What I guess is they are registering the events before the circle is created. Before we get updated version you can make the following changes to make it work Go to the file at /node_modules/@agm/core/fesm2015/agm-core.js You will get the bellow function

addCircle(circle) {
    this._apiWrapper.getNativeMap().then(() => {
        this._circles.set(circle, this._apiWrapper.createCircle({
            center: { lat: circle.latitude, lng: circle.longitude },
            clickable: circle.clickable,
            draggable: circle.draggable,
            editable: circle.editable,
            fillColor: circle.fillColor,
            fillOpacity: circle.fillOpacity,
            radius: circle.radius,
            strokeColor: circle.strokeColor,
            strokeOpacity: circle.strokeOpacity,
            strokePosition: google.maps.StrokePosition[circle.strokePosition],
            strokeWeight: circle.strokeWeight,
            visible: circle.visible,
            zIndex: circle.zIndex,
        }))
    });
}

Change it to the following

addCircle(circle) {
    return this._apiWrapper.getNativeMap().then(() => {
        this._circles.set(circle, this._apiWrapper.createCircle({
            center: { lat: circle.latitude, lng: circle.longitude },
            clickable: circle.clickable,
            draggable: circle.draggable,
            editable: circle.editable,
            fillColor: circle.fillColor,
            fillOpacity: circle.fillOpacity,
            radius: circle.radius,
            strokeColor: circle.strokeColor,
            strokeOpacity: circle.strokeOpacity,
            strokePosition: google.maps.StrokePosition[circle.strokePosition],
            strokeWeight: circle.strokeWeight,
            visible: circle.visible,
            zIndex: circle.zIndex,
        }))
    });
}

At line 1450 you will find this code

ngOnInit() {
   this._manager.addCircle(this);
   this._circleAddedToManager = true;
   this._registerEventListeners();
}

Change it to the below code

ngOnInit() {
    var rip = this._manager.addCircle(this);
    rip.then(() => {
        this._circleAddedToManager = true;
        this._registerEventListeners();
    })
}

Now this issue will be gone and all the events will work, I checked the radius change as I need this event to work.

i follow all your tips but no event work and still has same problem

Might the package get updated, still you can try. If you applied the code at correct place then after restart the app then check

[bogomips]

Same issue, using angular 11.

[lukasbuehler]

This is still an issue using the "supported" version of Angular, Angular 10. Also, the silence in the repo bugs me. Is this project still maintained at all?

i follow all your tips but no event work and still has same problem

The node_modules hack did not work for me until I also applied the suggested changes to node_modules/@agm/core/__ivy_ngcc__/fesm2015/agm-core.js.

Just search the @agm/core node module for the addCircle method and you will find all the functions and files that need tweaking.

[Syamhere]

Did anyone find any solution? I'm using Angular 10 with Agm ^1.1.0 version.

[Alexise857]

Everyone says to update the file at /node_modules/@agm/core/fesm2015/agm-core.js However, I'm not sure how to do that , every time I update, an error shows up saying that "File is read-only" Can anyone help me to understant how to update the agm-core.js file pls ?

[codebeginer]

agm-core.zip

File path to update : node_modules/@agm/core/ivy_ngcc/fesm2015/agm-core.js

Demo: http://13.126.237.87/map

[ArmandoPerdomo]

A temporary solution is a downgrade to "@agm/core": "1.1.0"

This worked for me

The actual version is 3.0.0 beta and its a Pre Release, so this means that is not a stable version

I took the example package.json from this plunker https://stackblitz.com/edit/angular-google-maps-demo?file=app%2Fapp.component.html

Check the releases https://github.com/SebastianM/angular-google-maps/releases

[malcheg]

Any progress on the issue?

[codal-sbelim]

Any progress on this issue?

[AmerAnsari]

When it'll be merged?

[piantino]

Hello everybody!

Infortuny it seems that this repository doesn't have more updates since one year ago. Does anyone try this library @angular/google-maps instead?

https://github.com/angular/components/blob/master/src/google-maps/README.md

[Franco-Alejandro]

it is sad that this is not merged yet 🙁

@piantino we have it on backlog but did not get to the migration yet

[hextrinity]

The fix provided above works, I did it using "patch-package", so that the change is not overwritten every time I run "npm install". Make sure you update the correct file: the one that is in "ivy_ngcc" folder and the correct lines (at line 1450).