Leaflet showMeasurements does't work on ionic 5

Ionic Framework
1

I’m drawing a terrain in leafleat within the Ionic5 framework. It turns out that the image display occurs, but the metric measurements are not being shown. You are already the types of the leaflet-measure-path, but still it does not render …

Below is my codeand the Draw picture

e3bbed28-4cdf-4ef4-80cb-3e7ef49793b3
e3bbed28-4cdf-4ef4-80cb-3e7ef49793b3720×1280 107 KB

tab.3 html

<ion-header [translucent]="true">
  <ion-toolbar color="primary">
    <ion-title>
      Edição de croqui
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content [fullscreen]="true">

  <ion-grid id="select">
    <ion-item>
      <ion-label>Camada</ion-label>
      <ion-select value="12">
        <ion-select-option value="01">Edicula</ion-select-option>
        <ion-select-option value="02">Garagem</ion-select-option>
        <ion-select-option value="03">Pav-Inferior</ion-select-option>
        <ion-select-option value="04">Pav-Sup-1</ion-select-option>
        <ion-select-option value="04">Pav-Sup-2</ion-select-option>
        <ion-select-option value="04">Pav-Sup-3</ion-select-option>
        <ion-select-option value="04">Pav-Sup-4</ion-select-option>
        <ion-select-option value="05">Pav-Terreo</ion-select-option>
        <ion-select-option value="06">Pscina</ion-select-option>
      </ion-select>
    </ion-item>
  </ion-grid>

  <div id="map3">

  </div>

</ion-content>

Note that at this time the showMeasurements method does not work

tab3.ts


import { Component, OnInit } from '@angular/core';

import * as L from "leaflet";
import 'src/assets/js/leaflet-measure-path.js';
import "leaflet-draw";

import { TesterService } from '../service/tester.service';

@Component({
  selector: 'app-tab3',
  templateUrl: 'tab3.page.html',
  styleUrls: ['tab3.page.scss']
})
export class Tab3Page implements OnInit {

  map: L.Map;
  public drawControl: any;

  public myLat: number;
  public myLog: number;

  public lotGeometry: any;


  constructor(
    private testeService: TesterService
  ) { }

  ngOnInit() {

    this.testeService.getLoteGeoom().subscribe((res: any) => {
      this.lotGeometry = res;
      this.myLog = this.lotGeometry.coordinates[0][0][0][0];
      this.myLat = this.lotGeometry.coordinates[0][0][0][1];
      this.leafletMap();

    }, error => {
      console.log(error)
    })

  async leafletMap() {
    this.map = new L.Map('map3', {
      center: [this.lotGeometry.coordinates[0][0][0][1], this.lotGeometry.coordinates[0][0][0][0]],
      zoom: 16
    });


    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
      attribution: 'edupala.com © Angular LeafLet',
    }).addTo(this.map);

    await this.drawLote();

  }


  async drawLote() {
    let coordinates = this.invertArray(this.lotGeometry.coordinates);
    let currentCroqui: any;
    currentCroqui =  L.polygon(coordinates).addTo(this.map).showMeasurements()
  }


  invertArray(array: any[]) {
    const copy = [...array];

    if (copy[0] instanceof Array) {
      return copy.map(subarray => this.invertArray(subarray));
    } else {
      return copy.reverse();
    }
  }

}

And finally my typing for the method for typescript

leaflet-mensure-path.ts


import * as L from 'leaflet';

declare module 'leaflet' {
  interface PathOptions {
    showMeasurements?: boolean;
  }

  interface Layer {
    showMeasurements: (options?: LeafletMeasurePath.Options) => this;
    showMeasurementsAndCoordenates: (options?: LeafletMeasurePath.Options) => this;
    hideMeasurements(): this;
    updateMeasurements(): this;
  }

  namespace LeafletMeasurePath {
    interface Options {
      showOnHover?: boolean;
      minDistance?: number;
      formatDistance?(distance: number): string;
      formatArea?(area: number): string;
      showDistances?: boolean;
      showArea?: boolean;
      showCoordenates?:boolean;
    }
  }
}

Would anyone know the reason why the meditas are not shown on the screen? The css files are also in the global ionic directory