Select to view content in your preferred language

@arcgis/core ESM in Angular publishable library?

700
4
03-25-2022 02:10 AM
RichardReinicke
Occasional Contributor II

Hi,

I'm in the situtation that I want to create an Angular publishable library with Esri JavaScript logic. Other colleagues should be able to install my npm package and esri assets/css should work out of the box.

CDN is not a problem but I can't figure out the best way to ship esri assets with my library and how I can configure css/assets inside my library so that I can do both:

a) use my library at development time inside my angular workspace and its app projects directly

b) or in another workspace with the npm package.

Does anybody have experience in that? 

Tags (3)
0 Kudos
4 Replies
AndyGup
Esri Regular Contributor

Hi @RichardReinicke are you putting together a package for public usage, or for internal-use only?

The Angular docs provide guidelines for shipping asset files with a library, in case you hadn't had a chance to review them: https://angular.io/guide/creating-libraries#managing-assets-in-a-library.

0 Kudos
RichardReinicke
Occasional Contributor II

Hi @AndyGup,

the library / package is for internal usage. It's meant to encapsulate the Esri JS API viewer with a standard toolset and configuration. Other developers should then only consume the components.

Thank you for that useful hint. I will definetly try that out!

But I'm still struggling a little bit with including all the assets in my package. Is there a way to pull assets from our own server similar to esri-loader?

I understand that the ESM sources are meant to be compiled in this case although it increases built time a lot but for CSS it would be enouth to have an option similar to loadCss() where I just point to a main.css on our server.

Thank you again for your help.

0 Kudos
RichardReinicke
Occasional Contributor II

Hello @AndyGup ,

in addition to my mail from Wednesday.

If I package the esri assets with my package, then the target workspace/project will first of have them twice in node_modules because @arcgis/core will be installed as dependency of my project anyway and will ship these assets as well and furthermore my package will bring the assets again to node_modules.

Also I don't win anything. The consuming app will still be responsible to serve the assets and tell the library where it serves them.

Really I don't see how I can achieve that my library loads and set's up esri on its own. The consuming app should not be rersponsible for that :(. We need a function inside @arcgis/core that loads CSS at runtime from our server like loadCss().

I think its a common requirement to use arcgis/core in an independent module/library where mapping is only a small part of a much bigger application. 

Isn't it possible that you and your team only set up a basic scenario for that and tell me the best approach? I'm not asking for any specific API functionality. This is something I can figure out myself. It's about the usability and integration of your overall package and the question if we can use it for our projects.

The fallback would be to use esri/leaflet but I really would like to stick to JS api because of the api design and functionality.

0 Kudos
AndyGup
Esri Regular Contributor

@RichardReinickecheck out the Managing Assets Locally doc here: https://developers.arcgis.com/javascript/latest/es-modules/#managing-assets-locally. You can copy the assets from anywhere and you can manually configure the path used by the API for consuming assets. Take a look at that and see if it meets your requirements.

0 Kudos