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

4044
18
Jump to solution
08-19-2021 07:40 AM
NicoleSulzberger
Occasional Contributor

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:

NicoleSulzberger_0-1629383796686.png

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.

see also https://indepth.dev/posts/1258/a-gentle-introduction-into-tree-shaking-in-angular-ivy

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

 

1 Solution

Accepted Solutions
PeteVitt
Occasional Contributor III

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

View solution in original post

18 Replies
AndyGup
Esri Regular Contributor

@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

NicoleSulzberger
Occasional Contributor

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
 
NicoleSulzberger_0-1629407597864.png

 

 

 

Frédéric_ALBERT
New Contributor II

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.

0 Kudos
by Anonymous User
Not applicable

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)

PeteVitt
Occasional Contributor III

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

0 Kudos
by Anonymous User
Not applicable

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.

PeteVitt
Occasional Contributor III

Thanks Tory - thats really good to know

 

Pete

0 Kudos
PeteVitt
Occasional Contributor III

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

wasmError.jpgAngularversions.jpg

0 Kudos
AndyGup
Esri Regular Contributor

@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

0 Kudos