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 }
 };
});