ArcGIS for JS + Angular + TypeScript

[LarsKölln]

Hi everybody,

currently we are trying to use the ArcGIS SDK for JS inside an Angular application together with the TypeScript definitions(@types/arcgis-js-api) and are running into some compiler problems on the imports..

What we did:

We followed this guide to create an ArcGIS + Angular application: Angular | ArcGIS API for JavaScript 4.14 

This is running fine with these imports:

import Map from 'arcgis-js-api/Map';
import MapView from 'arcgis-js-api/views/MapView';

Then we tried to use this guide to install the TypeScript type definitions: TypeScript - Setting up your development environment | ArcGIS API for JavaScript 4.14

And here comes the problem. We added the definitions and can see them in our node_modules/@types folder. And WebStorm can find them aswell. When we try to import Map or MapView it suggests

import Map from 'esri/Map';
import MapView from 'esri/views/MapView';

It gets the link to the correct file and our instances of Map and MapView got the correct properties and methods BUT the TypeScript compiler complains that it is not able to find these modules: "TS2307: Cannot find module 'esri/Map'."

We then looked at the demo project: jsapi-resources/4.x/typescript/demo at master · Esri/jsapi-resources · GitHub  

The demo project itself is working aswell, just without Angular.

If we look at the differences, we found some compiler differences in the tsconfig.json file which we tried but didn't work. 

What we found suspicious: the type definitions are in the folder @types/arcgis-js-api and NOT in @types/esri how it would be normally, as the modules are exported with "esri/..."

Any ideas or help would be appreciated

Thanks,

Lars

Our tsconfig file:

{
"compileOnSave": false,
"compilerOptions": {
"baseUrl": "./",
"outDir": "./dist/out-tsc",
"sourceMap": true,
"declaration": false,
"downlevelIteration": true,
"experimentalDecorators": true,
"module": "esnext",
"moduleResolution": "node",
"importHelpers": true,
"target": "es5",
"typeRoots": [
"node_modules/@types"
],
"lib": ["dom", "es2015.promise", "es5", "es6"]
},
"angularCompilerOptions": {
"fullTemplateTypeCheck": true,
"strictInjectionParameters": true
}
}

[TateM · Accepted solution]

Lars,

I think your tsconfig.json is fine.  But I believe you also have to include  a "types": ["arcgis-js-api"] in your tsconfig.app.json and tsconfig.spec.json 

Also try to: import {loadModules} from 'esri-loader'; if you have installed the esri-loader.  And also : import esri  = __esri . Then in your class you can have the property for the MapView, something like: mapView: esri.MapView; 

See Esri's github on Angular: GitHub - Esri/angular-cli-esri-map: Example Angular component for building mapping applications with... 

Hope this help. 

[LarsKölln]

Hi Tate,

huh learned something new, thank you! I didn't know there is another tsconfig file for the app. After I added the types it works!

Do you know why this is necessary? All other types are recognized by default, without adding them to the "types" list.

Thansk again!