This project was created for the Developer Summit 2021 ArcGIS JavaScript API and Angular presentation. The project was used to demonstrate several aspects of Angular and the ArcGIS JavaScript API 4.18 or later. This can be considered a starter application to help Angular developers create a single page map-centric application using the ArcGIS JavaScript API.
The project touches on the following Packages
- Angular
- Angular Material
- Angular Flex-Layout (used to create an adapative layout)
- Angular In-Memory Web API
- ArcGIS JavaScript API (v4.18)
- NgRx (Store, Effects, RouterStore, StoreDevTools, and Freeze)
- Jasmine Testing using mocks with createSpyObj
- Jasmine Marbles
- Karma Code Coverage
The project also contains the following custom components and services
- Status Container
- Toolbar (vertical toolbar with overflow)
- HttpClientService (service to wrap the HttpClient)
- BaseService
- RouterService
- RestResponse
- RouteMetadata
- ServiceStatus
- Helpers
There are a few configuration changes that have to be made to an Angular Project so that it works wtih the ArcGIS JavaScript API (v4.18).
- angular.json
Add the following to the architect/build/options section of the angular.json file.
"assets": [
{
"glob": "**/*",
"input": "node_modules/@arcgis/core/assets",
"output": "/assets/"
},
"src/favicon.ico",
"src/assets"
]
- styles.css
Add the following to the styles.css so that the main.css for the JSAPI is loaded. The "~" character tells the Webpack loader to resolove the path starting in node_modules. If the @arcgis/core package is updated to use a newer version then this syntax will always use the main.css from the @arcgis/core in node_modules.
@import url('~@arcgis/core/assets/esri/themes/light/main.css');
- app.component.ts
Don't forget to define the assetsPath in the JSAPI config.
config.assetsPath = '/assets';
I have this defined in the app.component.ts file.