leaflet draw not working with latest angular version 10

[archanatiwari]

• I'm reporting a bug, asking for help.
• I'm not sure this is a Leaflet Draw code issue, but angular upgrade to version 10, facing issue in library.
• I've searched through the issues to make sure it's not yet reported

How to reproduce

• Leaflet version I'm using: "@asymmetrik/ngx-leaflet": "^8.1.0",
• Leaflet Draw version I'm using: "@asymmetrik/ngx-leaflet-draw": "^7.0.0",
• Browser (with version) I'm using: Chrome (Version 87.0.4280.88 (Official Build) (64-bit))
• OS/Platform (with version) I'm using: Windows 10

What behaviour I'm expecting and which behaviour I'm seeing

Steps:

• while drawing the polygen or rectangle, first time it allowing to draw and second time throwing error in console. Please find the error message.
• core.js:4442 ERROR ReferenceError: type is not defined
  at Object.readableArea (leaflet.draw.js:9)
  at NewClass._getMeasurementString (leaflet.draw.js:8)
  at NewClass._getTooltipText (leaflet.draw.js:8)
  at NewClass._updateTooltip (leaflet.draw.js:8)
  at NewClass._vertexChanged (leaflet.draw.js:8)
  at NewClass._vertexChanged (leaflet.draw.js:8)
  at NewClass.addVertex (leaflet.draw.js:8)
  at NewClass._endPoint (leaflet.draw.js:8)
  at NewClass._onTouch (leaflet.draw.js:8)
  at NewClass.fire (leaflet-src.js:588)

[kragoth]

@archanatiwari this issue is occurring for me as well when I upgraded from angular 9 to 11.

I think I know the problem too.

The readableArea function is using an undefined variable. It seems that in the upgrade to ng10/11 "strict" mode has been turned on. Thus, the use of an undeclared variable is not allowed.

Fixing this should be a matter of adding the "type" variable to the list of variable declarations in the readableArea function.

It looks like someone has already raised a PR to fix this issue here.

[kragoth]

It seems quite a few people have raised PRs to fix this issue but, there's no approvals going on it seems.
Not sure what we need to do to get them merged so this issue can be resolved.

In the meantime my current "hack" to get around this issue is to do this:

    // This is a hack due to a bug in leaflet.draw
    // https://github.com/Leaflet/Leaflet.draw/issues/1005
    (window as any).type = undefined;

I reset the value of the variable on component destroy (in angular) so... hopefully no leaking will occur.

[matkoniecz]

Not sure what we need to do to get them merged so this issue can be resolved.

It is pretty clear that this plugin is abandoned, see https://github.com/Leaflet/Leaflet.draw/graphs/contributors

Not sure is there a viable replacement - alternative project or a maintained fork