How to import modules outside of loadModules()?

[jplew]

I am trying to rewrite the Sample Code for "Create a FeatureLayer with client side graphics" in Typescript rather than plain JS. I got all my red squigglies to go away but am running into an issue at compile-time because of my imports.

I know I can load modules like this:

public ngOnInit() {
  loadModules([
    'esri/views/MapView',
    'esri/Map',
    'esri/geometry/Point',
    'esri/widgets/Legend',
    'esri/request'
  ])
    .then(([MapView, EsriMap, EsriPoint, EsriLegend, EsriRequest]) => {

However, this scopes my EsriLegend variable to my then block. I want to reuse it in another method outside. For example I want to go const legend = new EsriLegend() in a helper function defined outside of ngOnInit.

To achieve this, I tried:

import * as Legend from 'esri/widgets/Legend'

But the compiler complains:

Module not found: Error: Can't resolve 'esri/widgets/Legend' in '~/projects/topcoder/dubai/rta/src/app/map'

I then tried this (like the docs curiously seem to recommend):

import Legend = require('esri/widgets/Legend')

But got this error instead:

ERROR in src/app/map/map.component.ts(28,1): error TS1202: Import assignment cannot be used when targeting ECMAScript modules. Consider using 'import * as ns from "mod"', 'import {a} from "mod"', 'import d from "mod"', or another module format instead.

Here is my full attempt at a Typescript rewrite: https://gist.github.com/jplew/c0ebade552034ea1630ec05067bd18e4

Thanks very much.

[jplew]

Answer

I was confused about the esri namespace. You don't have to import anything individually, you can simply access all the subclasses via the esri namespace:

const legend = new esri.Legend()

This is actually already documented here: https://github.com/TheKeithStewart/angular-esri-components/blob/68861b286fd3a4814c495c2bd723e336e917ced2/src/lib/esri4-map/esri4-map.component.ts#L20-L26

[andygup]

Another good documentation topic. We need to doc the esri namespace better.

[jplew]

Yes, I'm struggling with the namespace the most at present.

Would you mind helping me with the following?

I'm currently getting the error: ReferenceError: __esri is not defined from this bit of code:

createGraphics(response) {
  // raw GeoJSON data
  const geoJson = response.data

  // Create an array of Graphics from each GeoJSON feature
  return geoJson.features.map((feature, i) => {
    return {
      geometry: new __esri.Point({ // <----- ERROR right here
        x: feature.geometry.coordinates[0],
        y: feature.geometry.coordinates[1]
      }),
    }
  })
}

Note: this error appears in the browser console (from .catch(err => console.error(err))). It does not error at compile-time.

Full gist: https://gist.github.com/jplew/cf61707f727dfe8fb897f838ee444af4#file-map-component-ts-L387

In an attempt to resolve that, I tried aliasing the namespace (as per the original component). However that just shifts the location of the error:

import esri = __esri // <---- error moves here: "Uncaught ReferenceError: __esri is not defined"
...

    geometry: new esri.Point({ // <----- change __esri to esri
      x: feature.geometry.coordinates[0],
      y: feature.geometry.coordinates[1]
    }),

Do you know why it is doing this?

[andygup]

Did you try moving import esri = __esri up to this line: https://gist.github.com/jplew/cf61707f727dfe8fb897f838ee444af4#file-map-component-ts-L24?

Each component that uses esri types has to have that reference. As long as the esri types have been installed and exist under the node_modules directory then "in general" you should be good.

[jplew]

Update

I managed to get everything working by importing my modules using loadModules, then inlining my methods inside ngOnInit(). Here is a working example: https://gist.github.com/jplew/869db9a0db818d212a3d98ae5ac58fd6#file-map-component-ts-L360

The problem with this approach is that it does not enable code reuse. My desire is to define a helper method outside of ngOnInit(). This does not work because it is not possible to accessing the esri namespace outside of loadModules().

I tried your suggestion, and restored import esri = __esri back to the line you mentioned, but that gives this error: "Uncaught ReferenceError: __esri is not defined"

[perfectr]

Just adding a +1 from me. I'd like to use this library too but like jplew I'm struggling a bit understanding how to integrate the examples from the Esri website with this Angular based approach. In particular I've hit a roadblock around the use of JSX. Looking forward to any pointers you might be able to give.

[jplew]

@perfectr

Haven't looked at them myself, but have you seen these React-specific repos?

https://github.com/davetimmins/arcgis-react-redux-legend
https://github.com/davetimmins/esri-loader-react
https://github.com/nicksenger/react-arcgis

[andygup]

@perfectr yep, we are only planning on providing typescript/javascript samples for Angular 5 and 6. You are welcome to open Angular/JSX related issues and hopefully folks in the community can provide answers.

[andygup]

Here are a few comments that will hopefully help to clarify some of the questions above:

• The use of Esri typings is optional. 😀 Typescript is designed as a compile-time productivity tool and works great to reduce errors and bugs. If the Esri types are causing you headaches then it's easy to remove the typings to get things working and revisit the issue later, IMHO.
• Make sure to add the typings to the tsconfig.app.json file: https://github.com/Esri/angular-cli-esri-map#generate-the-scaffolding-for-your-mapping-component
• The Promise callback scope for esri-loader is standard JavaScript scoping. Here are a few reference articles that may help others understand what's going on: https://www.w3schools.com/js/js_scope.asp, https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures
• There are more advanced Angular samples here: https://github.com/sean-olson-e/Angular-and-the-ArcGIS-API-for-JavaScript
• And, WRT import, here's a great blog post by @tomwayson, it's worth a few minutes of perusal anyway because it talks about working with ArcGIS JavaScript modules in a variety of frameworks: http://tomwayson.com/2018/01/05/loader-of-the-things-one-library-to-load-them-all/

[andygup]

Closing. We might be able to fix some of the namespace issues with the new TS 2.9 import pattern. Reference: https://davidea.st/articles/typescript-2-9-import-types