topic Re: ArcGIS JS API 4.20 and Angular 12: build optimization is failing in ArcGIS JavaScript Maps SDK Questions

ArcGIS JS API 4.20 and Angular 12: build optimization is failing

NicoleSulzberger — Thu, 19 Aug 2021 14:40:30 GMT

We have migrated our angular application to angular 12. Now the build optimization does not work anymore.

When started up a production build with optimization enabled, we get hundreds of these console logs:

We were able to partly resolve it by enabling optimization in angular.json

"optimization": true,

but setting the environment variable NG_BUILD_MANGLE to false. It's not that nice, but at least it still does part of the optimization.

Are there other developer experiencing this issue? Will Esri support fixing this issue in further releases?

Re: ArcGIS JS API 4.20 and Angular 12: build optimization is failing

AndyGup — Thu, 19 Aug 2021 15:24:12 GMT

@NicoleSulzberger I'm guessing you upgraded to Angular 12.2.x? There is a known issue with production builds in 12.2.x and we recommend staying at 12.1.x until the problem is fixed in Angular 12 or when version 13 is ready. We did some very limited testing with Angular 13.0.0-next and the issue seemed to be resolved.

Reference and additional info: https://github.com/Esri/jsapi-resources/tree/master/esm-samples/jsapi-angular-cli#known-issues

Re: ArcGIS JS API 4.20 and Angular 12: build optimization is failing

NicoleSulzberger — Thu, 19 Aug 2021 21:14:30 GMT

Thanks very much for your fast reply, Andy! 12.1 didn't work either.

Downgrade to 12.0.5 helped, but we also I had to set styles optimalization to false

Re: ArcGIS JS API 4.20 and Angular 12: build optimization is failing

Frédéric_ALBERT — Fri, 20 Aug 2021 07:50:54 GMT

Same issue with 12.2.2.
What's in your map doesn't seem to matter.
Only disabling styles optimization in production builds is definitely the workaround.
Thanks for narrowing that down.

Re: ArcGIS JS API 4.20 and Angular 12: build optimization is failing

Anonymous User — Wed, 29 Sep 2021 15:53:08 GMT

We also ran into this issue recently with an update to angular 12.2.7, I was able to unbreak it with the following build setting for production:
in angular.json:configurations

... "optimization":{ "scripts":false, "styles":true, "fonts":true }

but that leaves the javascript as unminified/obfuscated (not ideal for a prod deployment)

I was able to roll back angular to 12.1.4 and the build started working again with no modifications to the optimization setting (leaving at default)

Re: ArcGIS JS API 4.20 and Angular 12: build optimization is failing

PeteVitt — Tue, 19 Oct 2021 22:59:41 GMT

My map wasn't visible when I upgraded the cli to 12.2.9. I downgraded the cli to 12.1 and used Tory's optimization configuration in the angular.json file and my basemap became visible, but a featurelayer wasn't. The errors thrown in the browser are attached. Do all of the devkits need to be downgraded too? I guess the best thing is to wait for 13 -- comes out Nov 3, 2021 supposedly

Pete

Re: ArcGIS JS API 4.20 and Angular 12: build optimization is failing

Anonymous User — Wed, 20 Oct 2021 00:30:35 GMT

Yes, I had to roll back all the angular packages to 12.1 (12.1.4 is what we're currently running on for _all_ angular packages), once I did that, I did not have to use the optimization settings, things "just worked" as before.

Re: ArcGIS JS API 4.20 and Angular 12: build optimization is failing

PeteVitt — Wed, 20 Oct 2021 14:04:15 GMT

Thanks Tory - thats really good to know

Pete

Re: ArcGIS JS API 4.20 and Angular 12: build optimization is failing

PeteVitt — Wed, 20 Oct 2021 22:09:12 GMT

I rolled all packages back to 12.1.4, but still not seeing my feature layer -- a 404 error for assets/esri/core/libs/libtess/libtess.wasm. I would think the error was related to something other than the upgrade, but the feature layer displays fine, and no console errors when debugging

Re: ArcGIS JS API 4.20 and Angular 12: build optimization is failing

AndyGup — Wed, 20 Oct 2021 23:07:28 GMT

@PeteVittthat sounds like a configuration issue. See this doc on Working with Assets: https://developers.arcgis.com/javascript/latest/es-modules/#working-with-assets. You can also compare your code against our Angular example: https://github.com/Esri/jsapi-resources/tree/master/esm-samples/jsapi-angular-cli.

Re: ArcGIS JS API 4.20 and Angular 12: build optimization is failing

PeteVitt — Wed, 20 Oct 2021 23:18:49 GMT

Thanks Andy, I will look into these

Re: ArcGIS JS API 4.20 and Angular 12: build optimization is failing

PeteVitt — Mon, 25 Oct 2021 19:00:55 GMT

Hi Andy - I'm using the following to copy the esri library to the assets directory on my website:

angular.json file (within architect-->build)

"assets": [

{

"glob": "**/*",

"input": "node_modules/@arcgis/core/assets",

"output": "/assets/"

I'm referencing the local build of the library on my website in my map component code file inside the ngOnInit function using: esriConfig.assetsPath = 'assets/';

I've confirmed that the assets folder is copied to my website and contains an esri subdirectory with all the ESRI resources, including the 'libtess.wasm' file which is throwing a 404 error.

Any other thoughts of what could be causing the problem I'm having?

Thanks

Pete

to my website

Re: ArcGIS JS API 4.20 and Angular 12: build optimization is failing

NicoleSulzberger — Tue, 26 Oct 2021 06:09:21 GMT

I had a similar issue, but in my case my webserver IIS did not know the mime type .wasm. I had to configure it.

File name extension: wasm

MimeType: application/wasm

Re: ArcGIS JS API 4.20 and Angular 12: build optimization is failing

PeteVitt — Tue, 26 Oct 2021 13:49:52 GMT

Thanks Nicole - that did the trick. Strangely it was working before the angular 12 upgrade without the wasm MIME type in iis

Pete

Re: ArcGIS JS API 4.20 and Angular 12: build optimization is failing

JeroenBloemscheer — Fri, 05 Nov 2021 07:39:24 GMT

Now that angular 13 is released, can you confirm this is compatible with

ArcGIS JS API 4.20?

Re: ArcGIS JS API 4.20 and Angular 12: build optimization is failing

PeteVitt — Fri, 05 Nov 2021 15:36:57 GMT

Hi Jeroen - I haven't had a chance to upgrade yet -- I'll post when I do the upgrade.

Pete

Re: ArcGIS JS API 4.20 and Angular 12: build optimization is failing

AndyGup — Fri, 05 Nov 2021 16:19:12 GMT

Confirmation is in-progress for 4.21 and /next. I'll post any updates to this repo: https://github.com/Esri/jsapi-resources/tree/master/esm-samples/jsapi-angular-cli.

Re: ArcGIS JS API 4.20 and Angular 12: build optimization is failing

PeteVitt — Tue, 14 Dec 2021 18:53:11 GMT

the upgrade to angular13 went well. Using arcgis javascript 4.22 -- no problems

Re: ArcGIS JS API 4.20 and Angular 12: build optimization is failing

RedCanzian — Mon, 05 Feb 2024 22:05:26 GMT

I had a similar issue with the "optimization" param, but more subtle. There were no build or runtime errors, but the map was not working. I didn't want to turn off the optimization, so after hours of troubleshooting, I found out that there's a problem with ESBuild 🫠 (I'm using Angular 17). Details here: https://github.com/Esri/jsapi-resources/tree/main/esm-samples/jsapi-angular-cli#known-issues

Bottom line: Always use the official repo to get started with something consistent!