Incorporating arcgis-js-api types into my angular5 application has been a challenge. Whenever I attempt to import the types in multiple components, an uncaught reference error occurs: __esri is not defined. I made sure to include arcgis-js-api in the types array within the tsconfig.app.json file. Below is a snippet of my code.
import { Component, OnInit, Input, ViewChild, ElementRef } from
'@angular/core';
import * as esriLoader from 'esri-loader';
import { environment } from '../../../environments/environment';
import Esri = __esri;
@Component({
selector: 'app-custom-widget',
templateUrl: './custom-widget.component.html',
styleUrls: ['./custom-widget.component.css']
})
export class CustomWidgetComponent implements OnInit {
private _mapView: Esri.MapView;
private _scriptOptions: any;
@ViewChild('customWidget') widgetElement: ElementRef;
@Input()
set mapView(mapView: Esri.MapView) {
if (!mapView) {
return;
}
this._mapView = mapView;
this.renderWidget();
}
get mapView(): Esri.MapView {
return this._mapView;
}
constructor() {
this._scriptOptions = {
url: environment.arcgisAPIVersion
};
}
ngOnInit() {
}
renderWidget(): void {
esriLoader.loadModules([
'esri/widgets/Widget'
], this._scriptOptions).then(([Widget]) => {
const widgetProperties: Esri.WidgetProperties = {
container: this.widgetElement.nativeElement
};
const widget: Esri.Widget = new Widget(widgetProperties);
this._mapView.ui.add(widget, 'bottom-right');
});
}
}