How to import modules outside of loadModules()? about angular-cli-esri-map HOT 10 CLOSED

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"

from angular-cli-esri-map.

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/

from angular-cli-esri-map.

@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

from angular-cli-esri-map.

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

from angular-cli-esri-map.

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

from angular-cli-esri-map.

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

from angular-cli-esri-map.

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?

from angular-cli-esri-map.

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.

from angular-cli-esri-map.

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.

from angular-cli-esri-map.

@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.

from angular-cli-esri-map.