How to use esri-loader - 10 common examples

public ngOnInit() {

    this.panRequestSubscription = this.mapService.panRequest.subscribe(() => {
      this.panMap(this.mapService.wonderCoordinates);
    });

    // use esri-loader to load JSAPI modules
    return loadModules([
      'esri/Map',
      'esri/views/MapView',
      'esri/Graphic'
    ])
      .then(([Map, MapView, Graphic]) => {
        const map: __esri.Map = new Map({
          basemap: 'hybrid'
        });

        this.mapView = new MapView({
          container: this.viewNode.nativeElement,
          center: [-12.287, -37.114],
          zoom: 12,
          map: map
        });
      })

function addWidget (view, widget) {
    switch (widget.parent) {
    case 'expand': 
        // expand type widget. places a widget inside a expand wrapper that is toggle able and mobile friendly
        // https://developers.arcgis.com/javascript/latest/sample-code/widgets-expand/index.html
        //!steal-remove-start
        if (widget.iconClass) {
            //eslint-disable-next-line
            console.warn('widget.iconClass is deprecated: use widget.parentOptions.expandIconClass instead')
        }
        //!steal-remove-end
        loadModules(['esri/widgets/Expand']).then(([Expand]) => {
            const expand = new Expand(Object.assign({

                // see https://developers.arcgis.com/javascript/latest/guide/esri-icon-font/
                expandIconClass: widget.iconClass || DEFAULT_ICON,
                view: view,
                content: widget.component
            }, widget.parentOptions || {}));
                    
            view.ui.add({
                component: expand,
                position: widget.position || DEFAULT_POSITION,
                index: widget.index
            });
        });
        break;

public async canLoad(
        route: Route,
        segments: UrlSegment[]
    ): Promise {
        if (isLoaded()) {
            return true;
        }
        try {
            const options = this.getOptions();
            // load esri script and dojoConfig;
            await loadScript(options);
            // add cors enabled hosts
            const [config] = await loadModules(['esri/config']);
            for (const server of environment.trustedServers) {
                config.request.trustedServers.push(server);
            }
            return true;
        }
        catch (ex) {
            console.error(ex);
            return false;

public async canLoad(
        route: Route,
        segments: UrlSegment[]
    ): Promise {
        if (isLoaded()) {
            return true;
        }
        try {
            const options = this.getOptions();
            // load esri script and dojoConfig;
            await loadScript(options);
            // add cors enabled hosts
            const [config] = await loadModules(['esri/config']);
            for (const server of environment.trustedServers) {
                config.request.trustedServers.push(server);
            }
            return true;
        }
        catch (ex) {
            console.error(ex);
            return false;
        }
    }

return new Promise((resolve, reject) => {
    const cdn = global.options.cdn

    if (cdn !== undefined && global.loaded) {
      // Has the ArcGIS API been added to the page?
      if (!esriLoader.isLoaded()) {
        // No, lazy load it the ArcGIS API before using its classes
        esriLoader.bootstrap(err => {
          if (err) {
            logger.error(err)
          }
          // Once it's loaded, create the map
          logger.log(`Waiting ESRI server...`)
          dojoLoader(resolve, reject)
        }, {
          // Use a specific version instead of latest 4.x
          url: cdn
        })
      } else {
        // ArcGIS API is already loaded, just create the map
        logger.log(`Waiting ESRI server...`)
        dojoLoader(resolve, reject)

intializeWebMap() {
        // get the id of the webmap from the component
        const { itemId } = this.get();

        // set the session from the global store
        const { session } = this.store.get();

        // load the CSS dynamically with Esri Loader
        loadCss("https://js.arcgis.com/4.10/esri/css/main.css");

        // load JS API modules with Esri Loader
        loadModules([
          "esri/views/MapView",
          "esri/WebMap",
          "esri/identity/IdentityManager"
        ])
          .then(([MapView, WebMap, esriId]) => {
            // since our webmap might be private we can pass teh credentials
            // from the ArcGIS REST JS session to the JS API Identity Manager
            // the JS API will then use these credentials for future requests
            esriId.registerToken(session.toCredential());

            // then we load a web map from an id
            var webmap = new WebMap({
              portalItem: {

loadScript (options) {
    return esriLoader.loadScript(options)
    .then(script => {
      // have to wrap this async side effect in Ember.run() so tests don't fail
      // may be able to remove this once we can have esriLoader use RSVP.Promise
      run(() => {
        // update the isLoaded computed property
        this.notifyPropertyChange('isLoaded');
        return script;
      });
    });
  },

return new Promise((resolve, reject) => {
      // don't try to load a second time
      if (isLoaded()) {
        resolve(dojoRequire);
      }
      // wrap bootstrap in a promise
      bootstrap((err) => {
        if (err) {
          reject(err);
        } else {
          resolve(dojoRequire);
        }
      }, options);
    });
  }

return new Promise((resolve: Function, reject: Function) => {
      // don't try to load a second time
      if (isLoaded()) {
        resolve(dojoRequire);
      }
      // wrap bootstrap in a promise
      bootstrap((err: Error) => {
        if (err) {
          reject(err);
        } else {
          resolve(dojoRequire);
        }
      }, options);
    });
  }

const URL_WAYBACK_IMAGERY_SELECT = URL_WAYBACK_IMAGERY_BASE + '?f=json';
const URL_WAYBACK_AGOL_ITEMS_LOOKUP_BASE = 'https://s3-us-west-2.amazonaws.com/config.maptiles.arcgis.com';
const URL_WAYBACK_AGOL_ITEMS_LOOKUP = tierInfo.devMode ? URL_WAYBACK_AGOL_ITEMS_LOOKUP_BASE + '/dev/waybackconfig.json' : URL_WAYBACK_AGOL_ITEMS_LOOKUP_BASE + '/waybackconfig.json';
const URL_PORTAL = tierInfo.devMode ? 'https://devext.arcgis.com' : 'https://www.arcgis.com';
const URL_CUSTOMIZED_PORTAL = tierInfo.portal || null;

const KEY_RELEASE_NUM = 'M';
const KEY_RELEASE_NAME = 'Name';

const DOM_ID_MAP_CONTAINER = 'mapDiv';
const DOM_ID_BARCHART = 'barChartDiv';
const DOM_ID_ITEMLIST = 'listCardsWrap';
const MODAL_ID_UPLAOD_WEBMAP = 'web-map-loading-indicator';

// before using esri-loader, tell it to use the promise library
esriLoader.utils.Promise = Promise;
const esriLoaderOptions = {
    // url: 'https://js.arcgis.com/4.10'
};

$(window).on('load', function() {

    esriLoader.loadModules([
        'esri/views/MapView', 
        'esri/WebMap',
        // "esri/geometry/Extent",
        "esri/geometry/Point",
        // "esri/Graphic",
    
        "esri/layers/BaseTileLayer",
        "esri/request",
        "esri/core/watchUtils",