Leaflet showMeasurements does't work on ionic 5

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

tab.3 html

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

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

  <ion-grid id="select">
      <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>

  <div id="map3">



Note that at this time the showMeasurements method does not work


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';

  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;

    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];

    }, 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',

    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


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;

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