Merge pull request #1 from jwasilgeo/maintenance/upgrade-to-esri-loader

replaced angular2-esri-loader with esri-loader; jsapi 4.6 version bump

package.json

@@ -23,9 +23,8 @@
     "@angular/platform-browser": "^4.2.4",
     "@angular/platform-browser-dynamic": "^4.2.4",
     "@angular/router": "^4.2.4",
-    "angular2-esri-loader": "^1.0.0",
     "core-js": "^2.4.1",
-    "esri-loader": "^1.1.0",
+    "esri-loader": "^2.0.0",
     "rxjs": "^5.4.2",
     "zone.js": "^0.8.14"
   },

src/app/app.module.ts

@@ -15,7 +15,6 @@ import {
 } from '@angular/material';
 // import { MatButton } from '@angular/material/button';
 import { AppComponent } from './app.component';
-import { EsriLoaderService } from 'angular2-esri-loader';
 import { EsriMapComponent } from './esri-map/esri-map.component';
 import { HeaderComponent } from './header/header.component';
 import { AoiComponent, CoordinateDialog } from './aoi/aoi.component';
@@ -44,7 +43,7 @@ import { OptionsComponent } from './options/options.component';
     MatInputModule
   ],
   entryComponents: [ CoordinateDialog ],
-  providers: [EsriLoaderService],
+  providers: [],
   bootstrap: [AppComponent]
 })
 export class AppModule { }

src/app/esri-map/esri-map.component.css

@@ -1,6 +1,6 @@
 /* import the required JSAPI css */
-@import 'https://js.arcgis.com/4.3/esri/css/main.css';
+@import 'https://js.arcgis.com/4.6/esri/css/main.css';
 
 .esri-view {
-    height: 500px;
+  height: 500px;
 }

src/app/esri-map/esri-map.component.ts

@@ -1,7 +1,8 @@
 import { Component, OnInit, ViewChild, ElementRef, EventEmitter, Output } from '@angular/core';
 
-// also import the "angular2-esri-loader" to be able to load JSAPI modules
-import { EsriLoaderService } from 'angular2-esri-loader';
+// also import "esri-loader" methods to be able to load JSAPI modules
+// loadScript is optional if always using the latest JSAPI 4.x version
+import { loadScript, loadModules } from 'esri-loader';
 
 @Component({
   selector: 'app-esri-map',
@@ -30,9 +31,6 @@ export class EsriMapComponent implements OnInit {
   @ViewChild('mapViewNode') private mapViewEl: ElementRef;
 
 
-  constructor( private esriLoader: EsriLoaderService) { }
-
-
   activateDraw() {
     this.drawingActive.emit(true);
     if (this.extentGraphic) {
@@ -147,10 +145,10 @@ export class EsriMapComponent implements OnInit {
   //TODO any concern w/ putting all logic w/in the init lifecycle handler?
   public ngOnInit() {
     // only load the ArcGIS API for JavaScript when this component is loaded
-    return this.esriLoader.load({
-      url: 'https://js.arcgis.com/4.5/'
+    return loadScript({
+      url: 'https://js.arcgis.com/4.6/'
     }).then(() => {
-      this.esriLoader.loadModules([
+      loadModules([
         'esri/Map',
         'esri/views/MapView',
         'esri/Graphic',
@@ -177,4 +175,4 @@ export class EsriMapComponent implements OnInit {
     });
   }
 
-}
+}