Angular property does not exist : Using leaflet and leaflet-gpx in Ionic 7 Angular 18 application

Ionic Framework Ionic Angular
1

I am trying to display a GPX file on leaflet into my Ionic Angular application by using GPX plugin for Leaflet. In VS Code, everything looks fine but when I run Ionic Serve, I get the following error : Property 'GPX' does not exist on type 'typeof import("TestLeaflet/node_modules/@types/leaflet/index")'.

Here is how to reproduce the issue :

  1. ionic start TestLeaflet blank (select Angular and Standalone)
  2. npm install leaflet
  3. npm install @types/leaflet --save-dev
  4. npm install leaflet-gpx
  5. npm install @types/leaflet-gpx --save-dev

Here is the content of the file app.component.ts :

import { Component, OnInit } from '@angular/core';
import { IonApp, IonRouterOutlet } from '@ionic/angular/standalone';
import * as L from 'leaflet';

@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html',
  standalone: true,
  imports: [IonApp, IonRouterOutlet],
})
export class AppComponent implements OnInit {
  constructor() {}

  ngOnInit() {
    this.initMap();
  }

  private initMap(): void{
    const options = {
      async: true,
      marker_options: {
        startIconUrl: 'https://cdn.jsdelivr.net/npm/leaflet-gpx@1.7.0/pin-icon-start.png',
        endIconUrl: 'https://cdn.jsdelivr.net/npm/leaflet-gpx@1.7.0/pin-icon-end.png',
        shadowUrl: 'https://cdn.jsdelivr.net/npm/leaflet-gpx@1.7.0/pin-shadow.png'
      }
    }

    const url = '../assets/gpx/rando.gpx';

    const map = L.map('map');
      L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        attribution: 'Map data &copy; <a href="http://www.osm.org">OpenStreetMap</a>'
      }).addTo(map);
    
    new L.GPX(url, options).on('loaded', (e) => {
        map.fitBounds(e.target.getBounds());
      }).addTo(map);
  }
}

So far everything is good in VS Code, but when I run Ionic serve, I get the following error :

Property 'GPX' does not exist on type 'typeof import("Projects/TestLeaflet/node_modules/@types/leaflet/index")'. [ng] 35 new L.GPX(url, options).on('loaded', (e) => {

I already tried without success :

  • Replace import * as L from 'leaflet'; by import * as L from 'leaflet-gpx';
  • Add import * as LGPX from 'leaflet-gpx'; and use new LGPX.GPX(url, options... which gives Property 'GPX' does not exist on type 'typeof import("TestLeaflet/node_modules/@types/leaflet-gpx/index")'

What am I missing ?

Thanks for your help !

2

To resolve the error with leaflet-gpx in your Angular application:

  1. Install Dependencies: Ensure leaflet and leaflet-gpx are installed.
  2. Update TypeScript Definitions: Add a global.d.ts file with:

typescript

Copy code

import * as L from 'leaflet';
import 'leaflet-gpx';

declare module 'leaflet' {
  namespace L {
    class GPX extends L.Layer {
      constructor(url: string, options?: any);
      on(event: string, callback: (e: any) => void): this;
      addTo(map: L.Map): this;
    }
  }
}
  1. Import Correctly: Use:

typescript

Copy code

import * as L from 'leaflet';
import 'leaflet-gpx';
  1. Verify File Path: Ensure the GPX file path is correct and accessible.

These steps should fix the TypeScript error and integrate leaflet-gpx properly.

3

That worked, thanks so much