How to use geoman-io with ngx-leaflet

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:

1. npm i @geoman-io/leaflet-geoman-free
2. Import geoman in the component import '@geoman-io/leaflet-geoman-free';
3. 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"
           ],

4. 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!

For me it works with the dirty type any:

 onMapReady(map: any)