ERROR TypeError: Cannot read property 'basemapLayer' of undefined

Question

ERROR TypeError: Cannot read property 'basemapLayer' of undefined

I have built a very basic application using the Angular CLI. When I build and run the application using ng serve -o everything builds successfully. However, when I view the application in Chrome the map portion does not load. Further inspecting the page I see this error in the console.

ERROR TypeError: Cannot read property 'basemapLayer' of undefined

Setup

• Angular 4
• Chrome 61
• leaflet 1.2.0
• esri-leaflet 2.1.1
• types/leaflet for 1.2
• types/esri-leaflet for 2.1.

Steps to reproduce the error:

These steps assume that you already have angular CLI installed.

Steps 1-6 & 10 are done in terminal/cmd prompt window

1. Create a new application ng new esriLeafletApp
2. Navigate to the new application cd esriLeafletApp
3. npm install --save leaflet
4. npm install --save esri-leaflet
5. npm install --save @types/esri-leaflet
6. npm install --save @types/leaflet
7. Update the contents of the app.component.ts file

import { Component, OnInit } from '@angular/core';

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent implements OnInit {
  title = 'app';

  constructor() { }

  ngOnInit () {
    const map = L.map('map').setView([51.505, -0.09], 13);
    L.esri.basemapLayer('Streets').addTo(map);
  }
}

8. Update the contents of the app.component.html file

<div style="text-align:center">
    <h1>
       Welcome to {{title}}!
    </h1>
</div>
<div id="map"></div>

9. Update the contents of the app.component.css file

   #map {
     height: 500px;
     width: 100%;
   }

10. Build and run the application ng serve -o

11. View the application in Chrome
12. Inspect the code and view the error in the inspector console

Please Help

Does anyone know why esri is undefined in the code block L.esri.basemapLayer('Streets').addTo(map); and how I might go about fixing it?

Answer 1

It seems the issue lies with the typings file for esri-leaflet (@types/esri-leaflet), instead of with esri-leaflet itself. I have opened an issue on the DefinitelyTyped github.

The workaround:

• Remove ESRI typings from package.json and node_modules
• Import esri: import * as esri from 'esri-leaflet';
• Use esri directly (i.e. not as an extension of Leaflet).
• Still could use leaflet typings without a problem.

import { Component, OnInit } from '@angular/core';

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent implements OnInit {
  title = 'app';

  constructor() { }

  ngOnInit () {
    const map = L.map('map', {
      maxZoom: 18,
      minZoom: 0
    }).setView([51.505, -0.09], 15);

    const esriLayer = esri.basemapLayer('Imagery');
    map.addLayer(esriLayer);
  }
}