Missing properties error when using Leaflet in Angular

Question

I am trying to use Leaflet and Leaflet Routing Machine. I used following commands to install leaflet and leaflet routing machine,

npm i leaflet
npm i --save-dev @types/leaflet

npm i leaflet-routing-machine
npm i --save-dev @types/leaflet-routing-machine

Importing leaflet and using it is fine but when I am trying to use leaflet routing machine it it giving me errors.

Following is my code,

L.Routing.control({
    waypoints: [
      L.latLng(latitude, longitude),
      L.latLng(latitude, longitude),
    ],
    show: false,
    lineOptions: {styles: [{color: randomColor, opacity: 1, weight: 5}],},
    createMarker: function () {
      return null;
    },
    }).addTo(this.map);

I am using webstorm as IDE I get 2 errors for both lineOptions and createMarker. I have the same code in plain JavaScript and it is working fine but for Angular it is giving me this errors.

For lineOptions it says following and when I added those missing params, the error was gone but I don't want to put those params.

TS2739: Type '{ styles: { color: string; opacity: number; weight: number; }[]; }' is missing the following properties from type 'LineOptions': extendToWaypoints, missingRouteTolerance

And for createMarker it says following,

TS2345: Argument of type '{ router: MapBox; waypoints: LatLng[]; show: false; createMarker: () => null; }' is not assignable to parameter of type 'RoutingControlOptions'.   Object literal may only specify known properties, and 'createMarker' does not exist in type 'RoutingControlOptions'.

Since it is working in JavaScript why it is not working in Angular?

Answer 1

createMarker does not exist on RoutingControlOptions. Remove it from the object.

There is, however, a plan: Plan member, of which can be passed a PlanOptions to the constructor that does contain createMarker.

LineOptions must define extendToWaypoints and missingRouteTolerance. If you "don't want" them, set them to values that make sense - something like false for extendToWaypoints and 0 for missingRouteTolerance.

The JavaScript implementation likely ignores unknown and has sane defaults for undefined key-values in the options objects that you pass. However, the TypeScript definitions are more strict. There is also the chance that it is not definitely correctly typed.