Leaflet Geodesic with Angular, I cannot use the geodesic in production

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 posts.component.ts:141:25 at Array.forEach (<anonymous>) at _PostsComponent.addToMap (posts.component.ts:114:12) at _PostsComponent.<anonymous> (posts.component.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.com/leaflet/dist/leaflet.js"></script>
<link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet-editable"></script>
<script src="https://unpkg.com/leaflet-polylinedecorator"></script>
<script src="https://cdn.jsdelivr.net/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!

Continue reading...