leaflet Property-Routing-does-not-exist-on-type-typeof-import

Question

I have made a post but not getting any responses. Im new to leaflet and dont know whats going on or why. I believe I added everything the documents say to add but I'm still getting the error.

<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" />
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>

import L from 'leaflet';

ERROR TypeError: Cannot read property 'control' of undefined

My Code here:

var polylineRouteB = L.Routing.control({...});

Answer 1

In order your L.Routing class not to be undefined you need to get a reference to the map and use it there when map is loaded but before this step you need to configure angular.json to search your assets folder for the markers icons otherwise this issue arises.

import { 
    latLng, 
    tileLayer, 
    Icon, icon, Marker
} from 'leaflet';

import 'leaflet';
import 'leaflet-routing-machine';
declare let L;
...

// Override default Icons
private defaultIcon: Icon = icon({
    iconUrl: 'assets/marker-icon.png',
    shadowUrl: 'assets/marker-shadow.png'
});

ngOnInit() {
    Marker.prototype.options.icon = this.defaultIcon;
}

onMapReady(map: L.Map) {
    L.Routing.control({
        waypoints: [
            L.latLng(57.74, 11.94),
            L.latLng(57.6792, 11.949)
        ],
        routeWhileDragging: true
    }).addTo(map);
}

Template

<div style="height: 800px;"
    leaflet 
    [leafletOptions]="options"
    (leafletMapReady)="onMapReady($event)">
</div>

Demo

Note also that his library does not permit unlimited requests to the server thus it returns frequently 429 HTTP responses.

Answer 2

You wanna install this:

npm install --save @types/leaflet-routing-machine

It fixe my problem.