The error message "Property Routing does not exist on type 'typeof import'" indicates that the property "Routing

I have created a post but unfortunately, I haven't received any responses. Being new to leaflet, I am quite confused about what might be causing the issue. I followed all the instructions from the documents but I am still encountering errors.

<link rel="stylesheet" href="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="6b070e0a0d070e1f2b5a4558455f">[email protected]</a>/dist/leaflet.css" />
<script src="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="cba7aeaaada7aebf8bfae5f8e5ff">[email protected]</a>/dist/leaflet.js"></script>

import L from 'leaflet';

ERROR TypeError: Cannot read property 'control' of undefined

Below is my code snippet:

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

Answer №1

To ensure that your L.Routing class is not undefined, you must obtain a reference to the map and utilize it when the map is loaded. However, before doing so, you need to configure angular.json to search your assets folder for the marker icons. Failure to do this may result in this issue occurring.

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

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

// Customize 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

It is important to note that this library limits requests to the server and may frequently return 429 HTTP responses.

Answer №2

Looking to add this to your project:

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

It resolved the issue I was facing.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Operator in RxJS that maps the elements within an array composed of multiple arrays

disclaimer: I have a creative solution and would like to share it here. While exploring the RxJS documentation for map methods that meet this specific requirement - let's call it mapArray - I haven't been able to find one. of([1, 2, 3]).pipe( ...

typescriptrxjs

Executing a single insert statement in a TypeScript Express application using PostgreSQL is taking over 240 milliseconds to complete

Seeking assistance with optimizing a db insert operation test using mocha for a node.js express app that utilizes fp-ts and pg npm package. The tests run successfully, but the insert test is taking over 240 ms to complete. The database table has a maximum ...

node.jstypescriptmocha.jsfp-ts

Monitor data changes by utilizing observables in Angular

At the start, I have a boolean variable named loading which is set to false, and there's a button whose text is determined by the value of this variable. To handle this functionality, I created a method as follows: changeBtnTxt() { this.loginBtn = ...

angularangular5

In a situation where Typescript fails to provide enforcement, how can you effectively indicate that a function is not defined for specific value(s)?

If I were to utilize Typescript to create a function called mean that calculates the mean of an array of numbers, how should I handle the scenario where the array is empty? Enforcing that an array must be non-empty can be inconvenient, so what would be th ...

typescripttypes

The overlay pop-up does not reposition on scroll movements

Within the image, there is a MatDialog Box positioned on top of another dialog box. Inside the MatDialog Box, there is a Component called MyNewDetailComponent. This component is accessed via Overlay with the scrollOptions set to reposition(). The issue ar ...

angularangular-materialangular-material2

I'm experiencing difficulty in scrolling on my Nextjs web application

Currently, I am facing an issue with my portfolio webpage which is divided into 3 main components - Hero, About, and Portfolio. The layout structure is as follows: export default function RootLayout({ children, }: { children: React.ReactNode }) { ret ...

reactjstypescriptnext.jsscrollnavigation

Tips for instructing kysely key-gen to utilize basic data types for mapping database tables

While using the kysely-codegen tool to automatically create all models from my database, I have noticed a peculiar behavior. It seems to be adding a Generated type to every field instead of generating only number or boolean. Any idea why this is happening? ...

typescriptkysely

Insert information into a 3-tiered nested Angular FormArray within interconnected dropdown fields

After trying to retrieve data from an API call to populate a select form field, I encountered difficulties setting the value correctly using a FormArray. This led me to creating a FormArray with 3 nested levels in Angular, taking reference from this examp ...

angulartypescriptangular-formsangular-reactive-forms

Updating the node startup file with Visual Studio 2015 using NodeJS/Typescript

Encountering a persistent error: Error Code: TS5055 Cannot write file C:/project/dir/server.js' because it would overwrite the input file. Project: TypeScript/JavaScript Virtual Projects Even after renaming my entry filename to nodeserver.js, the ...

javascriptnode.jscompiler-errorstypescriptvisual-studio-2015

Dynamic Data Binding in Ionic 2

One challenge I am facing is with creating my own info window for a Google Maps marker. Whenever I click on the marker, a div is displayed but the information inside the div does not get updated. It seems like the event.title remains unchanged from its old ...

htmlangulartypescriptionic-frameworkionic2

Can a custom structural directive be utilized under certain circumstances within Angular?

Presently, I am working with a unique custom structural directive that looks like this: <div *someDirective>. This specific directive displays a div only when certain conditions are met. However, I am faced with the challenge of implementing condit ...

htmlangulartypescriptangular-structural-directive

Why are my variables resetting in Angular after ngAfterViewInit?

There seems to be an issue with my variables resetting after successfully using them in ngAfterViewInit(). I have a few @ViewChild and regular variables that are utilized or set in ngAfterViewInit. However, when certain events that I added post-initializa ...

javascriptangulartypescript

What is the best way to integrate GeoJSON data into my next.js application using Leaflet?

I am encountering an issue in my Next.js app while trying to display multiple locations on a leaflet map using a GeoJSON data file. Everything works fine when I have just one location displayed on the map, but as soon as I import additional data and attemp ...

leafletnext.jsgeojsonreact-leaflet

having difficulty configuring drizzle on express

When configuring the database connection with MySQL using drizzle, I encountered a puzzling situation. I am utilizing express and top-level await without async, but I'm unsure of how it all fits together. import { drizzle } from "drizzle-orm/mysq ...

node.jstypescriptexpressdrizzle

Using Private and Protected Methods in Typescript with React: Best Practices

Currently, I am engrossed in developing a React application utilizing Typescript. In cases where a component needs to offer functionality through a reference, I typically incorporate a public method (public focus() : void {...}). However, I find myself pon ...

reactjstypescriptaccess-modifiers

How to effectively manage errors in TypeScript using RxJS?

Exploring subscribe arguments in the official RxJS documentation has raised some interesting questions for me. For instance, what is the purpose of using error: (e: string) => { ... } to catch errors emitted by an observable? Despite this implementation ...

typescripterror-handlingobservable

What is the process for incorporating buttons into an Angular mat-table?

I have successfully utilized Angular mat-table to showcase data retrieved from a database: view the image description here <table mat-table [dataSource]="UserDataSourceFilters" class="mat-elevation-z1 mt-5"> <ng-co ...

javascriptangulartypescriptangular-material

React Query mutation encountered a TS2554 error: Type argument was not valid

I'm a beginner when it comes to TypeScript and I am using react-query. I tried using mutate, but it is causing an error. TS2554: Expected 1-2 arguments, but got 3. interface: interface ChangePassword{ email: string; password: string; conf ...

typescriptreact-query

Tips for managing server data and dynamically binding values in Ionic 3

I am struggling with handling data retrieved from the server. I have a provider that fetches the data through HTTP, and I want to ensure the data is loaded before the page loads. However, there is a delay in reflecting the data on the page. Can someone pro ...

angulartypescriptionic-frameworkionic3

What is the most effective method for distributing TypeScript functions that are used by services and span multiple components?

I have a set of TypeScript functions that are currently scattered across components. These functions are being duplicated unnecessarily, and I am looking for a way to centralize them so all components can access them without redundancies. Since these fun ...

angulartypescript