Encountering error - enableEdit is not a function

[parky128]

I know this is probably more suited as an SO question, I have asked there and not had and responses so thought I'd give here a try.

I am trying to get polylines added to my map to be editable as per the quick start steps here

I am using TypeScript in my project (AngularJS) and am attempting to enable editing as follows:

private addNewSection = (startStop: Interfaces.IStop, endStop: Interfaces.IStop) => {
    const section = L.polyline([
      [startStop.geoLocation.latitude, startStop.geoLocation.longitude],
      [endStop.geoLocation.latitude, endStop.geoLocation.longitude]
    ], { color: 'red' });
    section.addTo(this.map);
    section.enableEdit();
  }

I am getting an Uncaught TypeError: section.enableEdit is not a function error when it attempts to execute in the browser. This is being thrown from my TS source in the browser, since I am using inline source maps for debugging.

I am making user of bower and have a gulp task to concatenate my bower libraries into a single file. I have checked this file and can see the library is included and can find the enableEdit function the error is referring to. I have double checked this concatenated version of the file served up for my application does include the library and that its not some weird concat issue.

I have tried taking Leaflet.Editable out of my concatenate bower libs file, and including this as a separate script include on my page where I am showing my map (in case of a load order between Leaflet and Leaflet.Editable) but the same error occurs.

So I am unsure what is stopping this from working. I did notice in the quick start guide for the Leaflet.Editable repo there is a mention about having to include a Path.Drag library for dragging functionality. I haven't included this since I don't want to be able to drag the entire line, I just want to be able to edit\move the points that make up the line - unless I am mistaken?

Anyone out there got any ideas what my problem could be?

Thanks