__esri is not defined

[PeteVitt]

Hi I'm using Angular 11, Esri Javascript api 4.18 with the ESRI loader.  I'm getting the subject error at runtime when I try to create a new 'esri/geometry/SpatialReference' object. Wierdly, Intellisense recognizes the Spatial Reference Object before I run the code.  I'm also able to create the Map and MapView objects without problems.

Any idea why this is happening?  I'm attempting to define the Spatial Reference inside the ngOnInit method within the code that gets called after the esri loader loads the ESRI modules -- same place as where the Map and MapView get created.

Thanks

Pete

The ngOnInit method is below:

ngOnInit(): void {

    loadModules([

      'esri/Map',

      'esri/views/MapView',

      'esri/geometry/support/webMercatorUtils',

      'esri/geometry/Polygon',

      'esri/geometry/SpatialReference'

    ])

      .then(([EsriMap, EsriMapView, EsriwebMercatorUtils,

        EsriPolygon, EsriSpatialReference

      ]) => {

...

//********the map and view get created fine:*****************

 const map = new EsriMap({

          basemap: 'streets'

        });

        this.mapView = new EsriMapView({

          container: this.viewNode.nativeElement,

          center: [-117.5, 33.9],

          zoom: 10,

          map: map

        });

//**************problem here *******************

          this.sr = new __esri.geometry.SpatialReference();//---> error here

          this.sr.wkid = 3857;

          //*************it can be autocasted

         // let sr = { 

          //   wkid:3857

          // }

[AndyGup]

@PeteVitt use the normal API pattern for initializing a new SpatialReference:

const sr = new SpatialReference({
  wkid: 3857
});

[PeteVitt]

When I changed the code I get a compile error: "Module not found: Error: Can't resolve 'esri/geometry'"

[PeteVitt · Accepted solution]

I switched to ES Modules and the code is running fine.  Maybe something in my project configuration was causing ESRI loader not to work.

Pete