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!
Solved! Go to Solution.
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.
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.
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. 🙂