Cannot find namespace __esri

[Lucas-H2N]

Hello,

I have a little problem with your esri-map.component.ts.

I have just clone your repo and when i do the ng serve i have this error :

ERROR in src/app/esri-map/esri-map.component.ts(4,15): error TS2503: Cannot find namespace '__esri'.

Have you this problem too ?

Can you help me ?

Thank you :)

[jwasilgeo]

That is OK if you only downloaded and did ng serve the first time.

Did you continue with the README instructions here? It sounds to me that you still need to install dependencies, including the Esri typings.

https://github.com/Esri/angular-cli-esri-map#install-esri-loader-and-the-esri-typescript-types

[jwasilgeo]

We will also update the README to not ask you to run ng serve before installing those additional dependencies. I hope that helps clear this issue up (for you and for anyone else reading this).

[Lucas-H2N]

Thank you for your help ! My dependencies was installed but i forget the tsconfig.app.json.

My bad this time, sorry.

[jwasilgeo]

No worries, and thanks anyways for your question as it'll help us continue to update the README instructions.

[ziadagh]

I'm facing the following problem When adding: npm install --save esri-loader npm install --save @types/arcgis-js-api And adding your code into my esri-map.ts file and then try running it I get the following error:

ERROR in node_modules/@types/arcgis-js-api/index.d.ts(1994,14): error TS2304: Cannot find name 'AbortSignal'.
node_modules/@types/arcgis-js-api/index.d.ts(2009,14): error TS2304: Cannot find name 'AbortSignal'.
node_modules/@types/arcgis-js-api/index.d.ts(30857,14): error TS2304: Cannot find name 'AbortSignal'.

But I can't seem to find any reason for that? Do you have any idea what is wrong? Or what AbortSignal is? I can't even find usage for it in my code.

[andygup]

Can you create a stackblitz example that reproduces the issue? It will help to see all of your code, or at least the code for your esri-map.ts.

Example: https://stackblitz.com/edit/angular-cli-esri-map2?file=src%2Fapp%2Fesri-map%2Fesri-map.component.ts

[ziadagh]

I think the problem is related to a library I have in my own project, because when I tried a brand new project and followed your steps I was able to open the solution normally.

[mrgreen8]

If you are using Angular 8 with arcgis-js-api, add arcgis-js-api to your compilerOptions -> types in your tsconfig.app.json file. That fixed the issue for me.

[andygup]

Continuing on @mrgreen8's comment for Angular 8 - the types configuration for tsconfig.app.json is included in the latest versions of this repo:

For esri-loader: https://github.com/Esri/angular-cli-esri-map/blob/master/tsconfig.app.json#L5 For arcgis-webpack-plugin: https://github.com/Esri/angular-cli-esri-map/blob/arcgis-webpack-angular/tsconfig.app.json#L5

[madolmo]

I'm new to Angular and Typescript and I'm trying to train on a huge project developed by my colleagues and I'm stuck on a really weird problem. I have a component referencing a lot of objects from the esri namespace without problems (imported with "import esri=esri"), but when I import a new custom module with a class that uses the same namespace, it disappears! Even simpler: it happens also in the example that @andygup linked above (https://stackblitz.com/edit/angular-cli-esri-map2?file=src%2Fapp%2Fesri-map%2Fesri-map.component.ts) if you simply add a var referencing the esri.Extent object at the bottom of the esri-map.components.ts file, just after the end of the the EsriMapComponent class definition:

` [...] ngOnInit() { this.initializeMap(); } }

var myExtent = new esri.Extent( { xmin: 728903.501727, ymin: 4214431.991531, xmax: 2074195.199547, ymax: 5955973.243981, spatialReference: {wkid:102100} });`

What's wrong!?

[andygup]

@madolmo you are mixing modules and interfaces. I'll provide some explanation since we get this question a lot and it's also different from the original issue question above. It's important to keep in mind that TypeScript is for checking of "types" at compile time only.

Modules such as esri/Extent implement actual functionality as defined in the API doc, and the Esri Typescript definitions are interfaces, such as __esri.Extent, that help enforce that properties types and method signatures are correctly matched up. You won't be able to "new up" or initialize new esri.Extent since that's not how interfaces work.

For more info:

• https://www.typescriptlang.org/docs/handbook/modules.html
• https://www.typescriptlang.org/docs/handbook/interfaces.html

Here's a working code snippet that uses type assertion, carefully note the as esri.Extent. This works because both sides of the = assignment are of type esri.Extent:

      const [EsriMap, EsriMapView, EsriExtent] = await loadModules([
        'esri/Map',
        'esri/views/MapView',
        'esri/geometry/Extent' // ArcGIS API for JavaScript Class module
      ]);

      // Note esri.Extent is an interface and EsriExtent is an alias for the Extent Class
      let myExtent: esri.Extent = new EsriExtent(
      {
         xmin: 728903.501727,
         ymin: 4214431.991531,
         xmax: 2074195.199547,
         ymax: 5955973.243981,
         spatialReference: {wkid:102100}
      }) as esri.Extent;

Here's an example that trips up a lot of people. The reason this doesn't throw an error is because if you hover over EsriMap you'll notice it is implicitly assigned the any type, and esri.Extent type does equal the type assignment of any :

     const map: esri.Extent = new EsriMap(mapProperties);

And, if you accidentally did something like this, now you would get a red squiggle in Stackblitz under map since there is a type mismatch between esri.Extent and esri.Map:

      const map: esri.Extent = new EsriMap(mapProperties) as esri.Map;

And here's another example that throws an error, note the red squiggly line again:

If you hover over the red squiggle line:

[madolmo]

@andygup thank you very much for the complete and clear explantion!