Network & Promise issues on next '^4.16.0-next.20200507'

[RyannGalea]

Hi Guys,

Currently developing an Angular 9 project where I'm using this package Without any issues as shown below. I have been using version:

"arcgis-js-api": "^4.15.0-next.20200330"

    const DEFAULT_WORKER_URL = `https://js.arcgis.com/4.15/`
    esriConfig.workers.loaderUrl = `${DEFAULT_WORKER_URL}dojo/dojo-lite.js`
    esriConfig.workers.loaderConfig = LoaderConfig(DEFAULT_WORKER_URL)

export const LoaderConfig = (DEFAULT_WORKER_URL) => ({
  baseUrl: `${DEFAULT_WORKER_URL}dojo`,
  packages: [
    { name: "esri", location: `${DEFAULT_WORKER_URL}esri` },
    { name: "arcgis-js-api", location: `${DEFAULT_WORKER_URL}esri` },
    { name: "dojo", location: `${DEFAULT_WORKER_URL}dojo` },
    { name: "dojox", location: `${DEFAULT_WORKER_URL}dojox` },
    { name: "dstore", location: `${DEFAULT_WORKER_URL}dstore` },
    { name: "moment", location: `${DEFAULT_WORKER_URL}moment` },
    { name: "@dojo", location: `${DEFAULT_WORKER_URL}@dojo` },
    { name: "cldrjs", location: `${DEFAULT_WORKER_URL}cldrjs`, main: "dist/cldr" },
    { name: "globalize", location: `${DEFAULT_WORKER_URL}globalize`, main: "dist/globalize" },
    { name: "maquette", location: `${DEFAULT_WORKER_URL}maquette`, main: "dist/maquette.umd" },
    { name: "maquette-css-transitions", location: `${DEFAULT_WORKER_URL}maquette-css-transitions`, main: "dist/maquette-css-transitions.umd" },
    { name: "maquette-jsx", location: `${DEFAULT_WORKER_URL}maquette-jsx`, main: "dist/maquette-jsx.umd" },
    { name: "tslib", location: `${DEFAULT_WORKER_URL}tslib`, main: "tslib" }
  ]
})

My custom webpackconfig, which i comment out which packages i want to include.

"customWebpackConfig": {
  "path": "esri-web.config.js"
}

const ArcGISPlugin = require("@arcgis/webpack-plugin");
/**
 * Configuration items defined here will be appended to the end of the existing webpack config defined by the Angular CLI.
 */
module.exports = {
  plugins: [
    new ArcGISPlugin({
      features: {
        "3d": false
      },
      userDefinedExcludes: [
        "arcgis-js-api/layers/BaseDynamicLayer",
        "arcgis-js-api/layers/BaseElevationLayer",
        // "arcgis-js-api/layers/BaseTileLayer",
        "arcgis-js-api/layers/BingMapsLayer",
        "arcgis-js-api/layers/BuildingSceneLayer",
        "arcgis-js-api/layers/CSVLayer",
        "arcgis-js-api/layers/ElevationLayer",
        // "arcgis-js-api/layers/FeatureLayer",
        // "arcgis-js-api/layers/GeoJSONLayer",
        "arcgis-js-api/layers/GeoRSSLayer",
        // "arcgis-js-api/layers/GraphicsLayer",
        // "arcgis-js-api/layers/GroupLayer",
        "arcgis-js-api/layers/ImageryLayer",
        "arcgis-js-api/layers/IntegratedMeshLayer",
        "arcgis-js-api/layers/KMLLayer",
        // "arcgis-js-api/layers/Layer",
        "arcgis-js-api/layers/MapImageLayer",
        "arcgis-js-api/layers/MapNotesLayer",
        "arcgis-js-api/layers/OpenStreetMapLayer",
        "arcgis-js-api/layers/PointCloudLayer",
        "arcgis-js-api/layers/SceneLayer",
        "arcgis-js-api/layers/StreamLayer",
        // "arcgis-js-api/layers/TileLayer",
        "arcgis-js-api/layers/UnknownLayer",
        "arcgis-js-api/layers/UnsupportedLayer",
        // "arcgis-js-api/layers/VectorTileLayerView2D",
        // "arcgis-js-api/layers/VectorTileLayer",
        // "arcgis-js-api/layers/WebTileLayer",
        "arcgis-js-api/layers/WMSLayer",
        "arcgis-js-api/layers/WMTSLayer",
      ]
    })
  ],
  node: {
    process: false,
    global: false,
    fs: "empty"
  }
};

I thought I'd upgrade to the latest version to begin using it and have come across loading issues & also promise issues I am guessing, I seen there is a breaking change to the promise's but unsure how to resolve if that is the issue.

Here is what I get when I upgrade to version:

"arcgis-js-api": "^4.16.0-next.20200507"

Image ref: https://ibb.co/W328Y28

I also update the following to 4.16 or 'next' which did fix some errors but not all

    const DEFAULT_WORKER_URL = `https://js.arcgis.com/4.16 /`

Thanks for taking a look, I Don't see this documented anywhere which is up to date.

[odoe]

Try installing the next version of the webpack-plugin.

npm install --save-dev @arcgis/webpack-plugin@next

This will copy over the new translation files during the build process.

We'll get this into the readme.

[RyannGalea]

Working on my end now, using both next packages and '/next' as my default worker url.

I also had to add the 'root' field to my webpack plugin as it was using Angulars route on load to try and find the Esri files, so if I refreshed into a nested route it would error out. I did not have to do this in previous version.

new ArcGISPlugin({
  root: "./"
})

[andygup]

@RyannGalea sorry for the late reply, not sure if you were aware, here is a working example with the arcgis-webpack-plugin and Angular 9: https://github.com/Esri/angular-cli-esri-map/tree/arcgis-webpack-angular. I didn't see any issues with using "@arcgis/webpack-plugin": "^4.16.0-next.20200427" other than having to change the SCSS to @import url('https://jsdev.arcgis.com/4.16/esri/themes/light/main.css');

Also, fyi if you set "esModuleInterop": true in tsconfig.json then you can use this pattern in your component files. I'm working on updating our docs to clarify this:

import Map from "esri/Map";
import MapView from "esri/views/MapView";
import FeatureLayer from "esri/layers/FeatureLayer";
import SimpleRenderer from "esri/renderers/SimpleRenderer";
import SimpleMarkerSymbol from "esri/symbols/SimpleMarkerSymbol";