Select to view content in your preferred language

Sample Angular application using Calcite / ArcGIS Maps SDK 4.29

131
2
Jump to solution
Wednesday
MarshMapper
New Contributor

Hi.  I mostly wanted to share a sample application I developed using the Maps SDK and Calcite Components with Angular Material 17.x in case it's of interest or useful to anyone else:

https://github.com/MarshMapper/ngx-arcgis-demo

I'm very impressed with the SDK and the components, and the ability to extend them as needed!  I did have one question regarding getting types for the components.  You can see, for example, in the arc-map.component.ts file that the way to reference Map, FeatureLayer and other objects is different from importing "whenOnce", for example, in which the braces are used to specify which objects are being imported.

import { CalciteComponentsModule } from '@esri/calcite-components-angular';
import { ProtectedAreasService } from '../../services/protected-areas.service';
import { UnprotectedAreasService } from '../../services/unprotected-areas.service';
import { ProgressService } from '../../services/progress.service';
import Map from "@arcgis/core/Map";
import ImageryTileLayer from '@arcgis/core/layers/ImageryTileLayer';
import FeatureLayer from '@arcgis/core/layers/FeatureLayer';
import View from "@arcgis/core/views/View";
import LayerView from "@arcgis/core/views/layers/LayerView";
import { whenOnce } from '@arcgis/core/core/reactiveUtils';

Is this the best / expected way to import Map, FeatureLayer, etc. to have strong typing for them?  It seems to be working well, just want to check if there's a better way to do it.

Thanks for any ideas on this or any other feedback!

0 Kudos
1 Solution

Accepted Solutions
ReneRubalcava
Frequent Contributor II

If you are just using them for type annotations, you can use the `import type` syntax.

import type Map from "@arcgis/core/Map";

It's safer, as this import won't be in the output JavaScript. Most bundlers "should" omit unused imports, but honestly, this can vary.  I could have sworn the TS compiler was smart enough to do this anyway, but either way, the "import type" syntax would cover your bases.

View solution in original post

2 Replies
ReneRubalcava
Frequent Contributor II

If you are just using them for type annotations, you can use the `import type` syntax.

import type Map from "@arcgis/core/Map";

It's safer, as this import won't be in the output JavaScript. Most bundlers "should" omit unused imports, but honestly, this can vary.  I could have sworn the TS compiler was smart enough to do this anyway, but either way, the "import type" syntax would cover your bases.

MarshMapper
New Contributor

Thanks!  I am not currently experiencing the type of issues that was meant to correct from what I understand, but I wasn't aware of the differences between import and "import type" and it's good to know them!  Appreciate it.

Updating this to accept Rene's answer as the solution.  I didn't have a specific problem, just wondered if there was a different approach I was missing.  Ended up learning something so appreciate that. 🙂

0 Kudos