There appears to be an issue with the latest ArcGIS JavaScript API working with the latest Angular CLI. The issue is that when you use the latest Angular CLI to generate a new project (ng new my_project) and then include a simple map in the project, the map will not work when building the app in production mode. The map works fine when it is running in development, but not production.
The issue can be reproduced using the following repository:
rustygreen/arcgis-angular-issue-example (github.com)
The code in the repository was created by simply running the `ng new` command using the latest version of the Angular CLI and then I added a simple ArcGIS JS API map to it.
Clone this repository
git clone https://github.com/rustygreen/arcgis-angular-issue-example.git
Install packages
npm install
Run in development
npm run start
*Note: the map shows without any issue
Run in production
npm run start -- --configuration production
:collision:NOTE: the map will not show and an error is in the console from the ArcGIS JS API
Solved! Go to Solution.
There are known issues with Angular CLI 12.2.x+, they made significant changes to how they do optimization. You'll need to stay at versions 12.0.0 - 12.1.x. So far 13.0.0-next fixes the bug. Reference: https://github.com/Esri/jsapi-resources/tree/master/esm-samples/jsapi-angular-cli#known-issues
There are known issues with Angular CLI 12.2.x+, they made significant changes to how they do optimization. You'll need to stay at versions 12.0.0 - 12.1.x. So far 13.0.0-next fixes the bug. Reference: https://github.com/Esri/jsapi-resources/tree/master/esm-samples/jsapi-angular-cli#known-issues