How to bundle @arcgis/core files in Angular build?

656
4
Jump to solution
05-05-2021 07:15 AM
ShaneBuscher1
New Contributor III

I have a very simple Angular app that generates 171 build js files from @arcgis/core. Is there a way to combine these into a single js file that can be referenced in a single html script tag? 

For some background I'm using Angular Elements to create a native web component from an Angular component containing an arcgis js map. When I drop that web component in a vanilla html page I get console errors about the missing 171 js files. I need to bundle up the 171 files into a singe one but somehow keep the references intact. 

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>ESRI Map</title>
    <base href="/" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="icon" type="image/x-icon" href="favicon.ico" />
    <link
      rel="stylesheet"
      href="https://js.arcgis.com/4.19/esri/themes/light/main.css"
    />
    <script src="main.js"></script>
    <script src="polyfills.js"></script>
    <script src="vendor.js"></script>
  </head>

  <body>
    <esri-map></esri-map>
    <script src="map-elements.js"></script>
  </body>
</html>

 

ShaneBuscher1_0-1620224062249.png

 

0 Kudos
1 Solution

Accepted Solutions
AndyGup
Esri Regular Contributor

Hi @ShaneBuscher1 I haven't used Angular elements, but with a webpack build you have to include all the output bundle files from the Angular build - main,js is just the entry point. Here's a couple blog posts that talk about the ES modules: https://www.esri.com/arcgis-blog/products/js-api-arcgis/announcements/arcgis-api-for-javascript-work...  and https://www.esri.com/arcgis-blog/products/js-api-arcgis/mapping/javascript-just-works/ 

View solution in original post

4 Replies
ShaneBuscher1
New Contributor III

Going to partially answer my question. I ended up copying the 171 files to the root of the html app in addition to the @arcgis/core assets. This fixed all of the errors and was able to display the map web component. However, still looking for a cleaner way of bundling all the files to make deployments cleaner. 

0 Kudos
AndyGup
Esri Regular Contributor

Hi @ShaneBuscher1 I haven't used Angular elements, but with a webpack build you have to include all the output bundle files from the Angular build - main,js is just the entry point. Here's a couple blog posts that talk about the ES modules: https://www.esri.com/arcgis-blog/products/js-api-arcgis/announcements/arcgis-api-for-javascript-work...  and https://www.esri.com/arcgis-blog/products/js-api-arcgis/mapping/javascript-just-works/ 

ShaneBuscher1
New Contributor III

Thanks for the resources @AndyGup and quick response. What you describe makes sense with main.js being the entry point and webpack doing its thing to split up the files for optimization.

0 Kudos
ReneRubalcava
Frequent Contributor II

I can add to this that I have tested a single file bundle. using webpack and you pretty much end up with a 7mb js file with tons of code you probably won't use at runtime.