Error: cannot find module within Angular application

[brigghius]

Your environment

• leaflet-elevation: 2.2.7
• leaflet: 1.9.2
• Angular version: 14
• browser: chrome
• operating system: W10

I followed the example guide that I find on git, but when loading the component I don't see the complete tracking map and the console returns me an error.

this error disappears if I delete these two lines of code:

I report the code of the .ts file

import { Component, OnInit } from '@angular/core';
import * as L from "leaflet";
import "@raruto/leaflet-elevation";

@Component({
  selector: 'app-elevation-map',
  templateUrl: './elevation-map.component.html',
  styleUrls: ['./elevation-map.component.scss']
})
export class ElevationMapComponent implements OnInit {

  private map: any;

  constructor() { }

  ngOnInit(): void {

    // Full list options at "leaflet-elevation.js"
    var elevation_options = {
      // Default chart colors: theme lime-theme, magenta-theme, ...
      theme: "lightblue-theme",
      // Chart container outside/inside map container
      detached: true,
      // if (detached), the elevation chart container
      elevationDiv: "#elevation-div",
      // if (!detached) autohide chart profile on chart mouseleave
      autohide: false,
      // if (!detached) initial state of chart profile control
      collapsed: false,
      // if (!detached) control position on one of map corners
      position: "topright",
      // Toggle close icon visibility
      closeBtn: true,
      // Autoupdate map center on chart mouseover.
      followMarker: true,
      // Autoupdate map bounds on chart update.
      autofitBounds: true,
      // Chart distance/elevation units.
      imperial: false,
      // [Lat, Long] vs [Long, Lat] points. (leaflet default: [Lat, Long])
      reverseCoords: false,
      // Acceleration chart profile: true || "summary" || "disabled" || false
      acceleration: false,
      // Slope chart profile: true || "summary" || "disabled" || false
      slope: false,
      // Speed chart profile: true || "summary" || "disabled" || false
      speed: false,
      // Altitude chart profile: true || "summary" || "disabled" || false
      altitude: true,
      // Display time info: true || "summary" || false
      time: true,
      // Display distance info: true || "summary" || false
      distance: true,
      // Summary track info style: "inline" || "multiline" || false
      summary: 'multiline',
      // Download link: "link" || false || "modal"
      downloadLink: 'link',
      // Toggle chart ruler filter
      ruler: true,
      // Toggle chart legend filter
      legend: true,
      // Toggle "leaflet-almostover" integration
      almostOver: true,
      // Toggle "leaflet-distance-markers" integration
      distanceMarkers: false,
      // Toggle "leaflet-hotline" integration
      hotline: true,
      // Display track datetimes: true || false
      timestamps: false,
      // Display track waypoints: true || "markers" || "dots" || false
      waypoints: true,
      // Toggle custom waypoint icons: true || { associative array of <sym> tags } || false
      wptIcons: {
        '': L.divIcon({
          className: 'elevation-waypoint-marker',
          html: '<i class="elevation-waypoint-icon"></i>',
          iconSize: [30, 30],
          iconAnchor: [8, 30],
        }),
      },
      // Toggle waypoint labels: true || "markers" || "dots" || false
      wptLabels: true,
      // Render chart profiles as Canvas or SVG Paths
      preferCanvas: true,
    };

    // Instantiate map (leaflet-ui).
    this.map = L.map('map', { center: [41.4583, 12.7059], zoom: 15 });
    const tiles = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
      maxZoom: 18,
      minZoom: 3
    });
    tiles.addTo(this.map);

    // Instantiate elevation control.
    var controlElevation = (L.control as any).elevation(elevation_options).addTo(this.map);

    // Load track from url (allowed data types: "*.geojson", "*.gpx", "*.tcx")
    controlElevation.load("C:/Users/fabrizio.alemanno/workspace/test/src/assets/data/via-emilia.gpx");

    console.log("fine init");
  }

}

if in the code instead of putting "(L.control as any).elevation(...) " I use "L.control.elevation(...)", I get an error:

If I run the code I get this:

what am I doing wrong? how can i fix it? Thanks!

[Raruto]

Hi @brigghius,

ref: https://github.com/Raruto/leaflet-elevation/issues/182, probably all these console errors are related to the fact that dynamic imports are not properly handled by your single page application (Angular, React, Vue, ...).

You can try to statically include in your project also all dependencies of this library (togeojson, src/handlers, ...), they should all be listed here:

https://github.com/Raruto/leaflet-elevation/blob/c58250e7c20d52490aa3a50b611dbb282ff00a57/src/control.js#L19-L29

otherwise, you can also try override those parameters to URLs of your choice (see: https://github.com/Raruto/leaflet-elevation/pull/192#issuecomment-1092622748 to get an idea of how you could proceed).

Otherwise, as usual, pull requests are welcome if you think you have an idea to improve this.

BTW, I would bet there is even a way recommended by your framework to fix this..

Have a nice day, Raruto

[brigghius]

Thanks for the reply. Using elevation version 1.9.6 everything worked fine and I was able to get everything working without problems.