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
- Create a new application
ng new esriLeafletApp
- Navigate to the new application
cd esriLeafletApp
npm install --save leaflet
npm install --save esri-leaflet
npm install --save @types/esri-leaflet
npm install --save @types/leaflet
- 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);
}
}
- Update the contents of the app.component.html file
<div style="text-align:center">
<h1>
Welcome to {{title}}!
</h1>
</div>
<div id="map"></div>
Update the contents of the app.component.css file
#map { height: 500px; width: 100%; }
Build and run the application
ng serve -o
- View the application in Chrome
- 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?
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:
import * as esri from 'esri-leaflet';