Using Extent and SpatialReference with ArcGIS API for JavaScript?

Question

I am trying to display an ArcGIS Map on my webpage.

Whenever I try to use the 'extent' Attribute next to the 'center' and 'zoom' Attributes, I get the following error:

GET https://js.arcgis.com/4.8/esri/SpatialReference.js net::ERR_ABORTED 404

So apparently the SpatialReference.js can not be loaded, but is a part of the ArcGIS API.

Am I misunderstanding something?

I have my code from https://developers.arcgis.com/javascript/latest/api-reference/esri-views-MapView.html#using where the use of 'extent' is explained.

<code>
<script src="https://js.arcgis.com/4.8/"></script>
// ...
require([
            "esri/views/MapView",
            "esri/geometry/Extent",
            "esri/SpatialReference",
            "esri/WebMap",
            "dojo/domReady!"
        ], function (MapView, WebMap, Extent, SpatialReference) {
            var webmap = new WebMap({portalItem: { id: "f7f....."}});
            var view = new MapView({
                map: webmap,
                container: "mapdiv",
                center: [7.16809, 51.94349],
                zoom: 14 
            });
            // Set the extent on the view
            view.extent = new Extent({
                xmin: -9177882,
                ymin: 4246761,
                xmax: -9176720,
                ymax: 4247967,
                spatialReference: new SpatialReference({ wkid: 102667 })
            });
        }); 
</code>

Answer 1

There are couple of issues in your code, but not too bad.

It's esri/geometry/SpatialReference not esri/SpatialReference. https://developers.arcgis.com/javascript/latest/api-reference/esri-geometry-SpatialReference.html

Plus the order matters when you require the modules, you had a couple of modules out of order.

require([
  "esri/views/MapView",
  "esri/geometry/Extent",
  "esri/geometry/SpatialReference",
  "esri/WebMap",
  "dojo/domReady!"
], function(MapView, Extent, SpatialReference, WebMap

Also because of autocasting in the API, you don't need to initialize all those classes.

require([
  "esri/views/MapView",
  "esri/WebMap",
], function(MapView, WebMap) {
  var webmap = new WebMap({portalItem: { id: "f7f....."}});
  var view = new MapView({
    map: webmap,
    container: "viewDiv",
    center: [7.16809, 51.94349],
    zoom: 14
  });
  // Set the extent on the view
  view.extent = {
    xmin: -9177882,
    ymin: 4246761,
    xmax: -9176720,
    ymax: 4247967,
    spatialReference:{ wkid: 102667 }
  };
});