I deployed an angular app, and there I have a map with Leaflet. Well in my map service I have some methods of adding polylines, and I was using geodesic, in development on my local machine was working, but after I deployed it I get this error:

Error fetching timeline: TypeError: L.Geodesic is not a constructor at _MapService.addClickableObject (map.service.ts:227:24) at postsponent.ts:141:25         at Array.forEach (<anonymous>)  at _PostsComponent.addToMap (postsponent.ts:114:12) at _PostsComponent.<anonymous> (postsponent.ts:80:10)         at Generator.next (<anonymous>)  at fulfilled (chunk-IIGRIO22.js:73:24)         at _ZoneDelegate.invoke (zone.js:369:28) at Object.onInvoke (core.mjs:6525:25)         at _ZoneDelegate.invoke (zone.js:368:34)

Now in my index.html, I have all these scripts:

  <script src=".js"></script>     
<link rel="stylesheet" href=".css" />     
<script src=";></script>     
<script src=";></script>     
<script src=".geodesic"></script>

everything else but the geodesic is working. I was trying to put the js script inside my assets, didn't load it, checks after checks, nothing was clear. in my map service where I am using this I have declared: declare let L: any; and I am creating the polyline like this:

    const polyline = new L.Geodesic(options.path, 
    {color: options.color || '#160BB9',
     weight: 3,
    opacity: 1.0,}
).addTo(this.mapInstance);

as its written in the Docs. I don't know why is giving me this, if you guys have any ideas? Before all these scripts and imports and node modules were in angular.json under "scripts", and I was using import 'leaflet-geodesic' for example, but once I deployed it, the angular didn't recognize them so I used the CDN approach, all works but the geodesic. I even have a leaflet.d.ts which looks like this:

 `import * as L from 'leaflet';

declare module 'leaflet-polylinedecorator';

declare module 'leaflet' {
  interface Map {
    editTools?: L.Editable;
  }

  namespace Symbol {
    function arrowHead(options?: any): any;
  }

  interface Polyline {
    enableEdit(map: L.Map): void;
    disableEdit(): void;
    editor: {
      deleteShape(): void;
      commitDrawing(): void;
    };
  }

  class Editable {
    constructor(map: L.Map, options?: any);
    createPolyline(latlngs: L.LatLngExpression[], options?: L.PolylineOptions): L.Polyline;
    createMarker(latlng: L.LatLngExpression, options?: L.MarkerOptions): L.Marker;
    enable(): void;
  }

  function polylineDecorator(
    polyline: L.Polyline,
    options?: any
  ): L.Layer;

  declare namespace L {
    class Geodesic extends L.Polyline {
      constructor(latlngs?: L.LatLngExpression[] | L.LatLngExpression[][], options?: any);
      setLatLngs(latlngs: L.LatLngExpression[] | L.LatLngExpression[][]): this;
    }
  }

}`

If you guys can help me out, I would appreciate it, thank you!

I deployed an angular app, and there I have a map with Leaflet. Well in my map service I have some methods of adding polylines, and I was using geodesic, in development on my local machine was working, but after I deployed it I get this error:

Error fetching timeline: TypeError: L.Geodesic is not a constructor at _MapService.addClickableObject (map.service.ts:227:24) at postsponent.ts:141:25         at Array.forEach (<anonymous>)  at _PostsComponent.addToMap (postsponent.ts:114:12) at _PostsComponent.<anonymous> (postsponent.ts:80:10)         at Generator.next (<anonymous>)  at fulfilled (chunk-IIGRIO22.js:73:24)         at _ZoneDelegate.invoke (zone.js:369:28) at Object.onInvoke (core.mjs:6525:25)         at _ZoneDelegate.invoke (zone.js:368:34)

Now in my index.html, I have all these scripts:

  <script src="https://unpkg/leaflet/dist/leaflet.js"></script>     
<link rel="stylesheet" href="https://unpkg/leaflet/dist/leaflet.css" />     
<script src="https://unpkg/leaflet-editable"></script>     
<script src="https://unpkg/leaflet-polylinedecorator"></script>     
<script src="https://cdn.jsdelivr/npm/leaflet.geodesic"></script>

everything else but the geodesic is working. I was trying to put the js script inside my assets, didn't load it, checks after checks, nothing was clear. in my map service where I am using this I have declared: declare let L: any; and I am creating the polyline like this:

    const polyline = new L.Geodesic(options.path, 
    {color: options.color || '#160BB9',
     weight: 3,
    opacity: 1.0,}
).addTo(this.mapInstance);

as its written in the Docs. I don't know why is giving me this, if you guys have any ideas? Before all these scripts and imports and node modules were in angular.json under "scripts", and I was using import 'leaflet-geodesic' for example, but once I deployed it, the angular didn't recognize them so I used the CDN approach, all works but the geodesic. I even have a leaflet.d.ts which looks like this:

 `import * as L from 'leaflet';

declare module 'leaflet-polylinedecorator';

declare module 'leaflet' {
  interface Map {
    editTools?: L.Editable;
  }

  namespace Symbol {
    function arrowHead(options?: any): any;
  }

  interface Polyline {
    enableEdit(map: L.Map): void;
    disableEdit(): void;
    editor: {
      deleteShape(): void;
      commitDrawing(): void;
    };
  }

  class Editable {
    constructor(map: L.Map, options?: any);
    createPolyline(latlngs: L.LatLngExpression[], options?: L.PolylineOptions): L.Polyline;
    createMarker(latlng: L.LatLngExpression, options?: L.MarkerOptions): L.Marker;
    enable(): void;
  }

  function polylineDecorator(
    polyline: L.Polyline,
    options?: any
  ): L.Layer;

  declare namespace L {
    class Geodesic extends L.Polyline {
      constructor(latlngs?: L.LatLngExpression[] | L.LatLngExpression[][], options?: any);
      setLatLngs(latlngs: L.LatLngExpression[] | L.LatLngExpression[][]): this;
    }
  }

}`

If you guys can help me out, I would appreciate it, thank you!

• angular
• leaflet

1 Answer 1

Ok so apparently the scripts in angular.json were in conflict with the scripts in the index.html, so, overall these are the modifications

1. angular.json

   "scripts": [],

2. index.html: kept the scripts with the CDNs

3. tsconfig.json: updated the right path for the type "d.ts"

4. leaflet.d.ts: introduced the class Geodesic instead of namespace.

5. Cleared package.json of any leaflet packages