Oops! TypeError: Unable to access 'basemapLayer' property of undefined
I recently put together a simple application using the Angular CLI. After successfully building and running the application with ng serve -o, I encountered an issue in Chrome where the map section failed to load. Upon inspecting the page, I came across this error message in the console:
ERROR TypeError: Cannot read property 'basemapLayer' of undefinedConfiguration
- 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 Recreate the Problem:
If you already have angular CLI installed, follow these steps:
Perform Steps 1-6 & 10 in your terminal/cmd prompt window
- Create a new application
ng new esriLeafletApp - Navigate to the new application
cd esriLeafletApp npm install --save leafletnpm install --save esri-leafletnpm install --save @types/esri-leafletnpm 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- Check the application in Chrome
- Inspect the code and locate the error in the console
We Need Your Assistance
Can anyone explain why esri is coming up as undefined in the line
L.esri.basemapLayer('Streets').addTo(map);