How to use geoman-io with ngx-leaflet - leaflet

Question

I am trying to use geoman-io plugin (https://github.com/geoman-io/leaflet-geoman) in ngx-leaflet application. I've found this post: Integrate EasyButton, Geoman with ngx-leaflet , but the only solution provided in this post, that works for me, is to use bracket notation like that:
map["pm"]["addControls"]({position: 'topleft'});
I guess that's not the best way to do this. So my question is how to properly use geoman-io in ngx-leaflet?
When i tried exactly these steps, it doesn't work, because at map.pm.addControls({...}) i get error
Property 'pm' does not exist on type 'Map'
Steps:
npm i #geoman-io/leaflet-geoman-free
Import geoman in the component import '#geoman-io/leaflet-geoman-free';
In angular.json in "build" section import geoman styles:
"styles": [
"src/styles.scss",
"./node_modules/leaflet/dist/leaflet.css",
"./node_modules/#geoman-io/leaflet-geoman-free/dist/leaflet-geoman.css"
],
my component:
import { BaseIconOptions, geoJSON, Bounds, CRS, Icon, icon, IconOptions, imageOverlay, latLng,
LatLngBounds, LatLngBoundsExpression, layerGroup, Map, marker, point, polyline, tileLayer } from 'leaflet';
import * as L from 'leaflet';
import 'leaflet-rotatedmarker';
import '#geoman-io/leaflet-geoman-free';
#Component({
selector: 'app-map',
templateUrl: './map.component.html',
styleUrls: ['./map.component.scss']
})
export class MapComponent {
...
onMapReady(map: Map) {
map.pm.addControls({
position: 'topleft',
drawMarker: false
});
}
}
My package.json file:
"dependencies": {
"#angular/animations": "~10.2.0",
"#angular/cdk": "^10.2.7",
"#angular/common": "~10.2.0",
"#angular/compiler": "~10.2.0",
"#angular/core": "~10.2.0",
"#angular/flex-layout": "^10.0.0-beta.32",
"#angular/forms": "~10.2.0",
"#angular/material": "^10.2.7",
"#angular/platform-browser": "~10.2.0",
"#angular/platform-browser-dynamic": "~10.2.0",
"#angular/router": "~10.2.0",
"#asymmetrik/ngx-leaflet": "^8.1.0",
"#fortawesome/angular-fontawesome": "^0.7.0",
"#geoman-io/leaflet-geoman-free": "^2.7.0",
"#types/leaflet": "^1.5.19",
"#types/leaflet-rotatedmarker": "^0.2.1",
"leaflet": "^1.7.1",
"leaflet-rotatedmarker": "^0.2.0",
"rxjs": "~6.6.0",
"tslib": "^2.0.0",
"zone.js": "~0.10.2"
},
"devDependencies": {
"#angular-devkit/build-angular": "~0.1002.0",
"#angular/cli": "~10.2.0",
"#angular/compiler-cli": "~10.2.0",
"#types/node": "^12.11.1",
"#types/jasmine": "~3.5.0",
"#types/jasminewd2": "~2.0.3",
"codelyzer": "^6.0.0",
"jasmine-core": "~3.6.0",
"jasmine-spec-reporter": "~5.0.0",
"karma": "~5.0.0",
"karma-chrome-launcher": "~3.1.0",
"karma-coverage-istanbul-reporter": "~3.0.2",
"karma-jasmine": "~4.0.0",
"karma-jasmine-html-reporter": "^1.5.0",
"protractor": "~7.0.0",
"ts-node": "~8.3.0",
"tslint": "~6.1.0",
"typescript": "~4.0.2"
}
If i change the the onMapReady function to onMapReady(map: L.Map) , it throws the same error. Thanks for help!

Answer 1

For me it works with the dirty type any:
onMapReady(map: any)