Esri / angular-cli-esri-map

Example Angular component for building mapping applications with the ArcGIS API for JavaScript
https://stackblitz.com/edit/angular-cli-esri-map3
Apache License 2.0
89 stars 48 forks source link

How to resolve importScripts? #52

Closed RyannGalea closed 4 years ago

RyannGalea commented 4 years ago

Using the Angular webpack implementation I am having an issue where it seemingly is trying to resolve dojo scripts locally?

dojo.js:6 DOMException: Failed to execute 'importScripts' on 'WorkerGlobalScope': The script at 'http://localhost:4200/dojo/arcgis-js-api/views/2d/engine/vectorTiles/WorkerTileHandler.js' failed to load.

How do I fix this issue?

RyannGalea commented 4 years ago

It seems I have all these files in my node_modules in the 'arcgis-js-api' folder although I do not know how to forward the esriConfig to it?

I am reading about dojoConfig but again I do not know how to implement this with Angular

andygup commented 4 years ago

Can you share a code snippet of what you are trying to do?

RyannGalea commented 4 years ago

Ok, so I have used the webpack implementation in my Angular 9 project and when using the 'topo-vector' basemap I cannot load properly.

I resolved the issues with localhost as I wasn't setting my config properly. I am currently using:

    const DEFAULT_WORKER_URL = "https://js.arcgis.com/4.14/";
    const DEFAULT_LOADER_URL = `${DEFAULT_WORKER_URL}dojo/dojo-lite.js`;

    esriConfig.workers.loaderUrl = DEFAULT_LOADER_URL;
    esriConfig.workers.loaderConfig = {
      baseUrl: `${DEFAULT_WORKER_URL}dojo`,
      packages: [
        { name: "esri", 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" }
      ]
    }

To reolve this above issue I am just using 'topo' basemap for now.

Although I am facing a different issue now were I get the error:

dojo-lite.js:6 DOMException: Failed to execute 'importScripts' on 'WorkerGlobalScope': The script at 'https://js.arcgis.com/4.14/dojo/arcgis-js-api/views/2d/layers/features/Pipeline.js' failed to load.
    at Function.injectUrl (https://js.arcgis.com/4.14/dojo/dojo-lite.js:6:127)
    at Ja (https://js.arcgis.com/4.14/dojo/dojo-lite.js:21:304)
    at c (https://js.arcgis.com/4.14/dojo/dojo-lite.js:4:436)
    at https://js.arcgis.com/4.14/dojo/dojo-lite.js:11:284
    at Ea (https://js.arcgis.com/4.14/dojo/dojo-lite.js:19:193)
    at ka (https://js.arcgis.com/4.14/dojo/dojo-lite.js:11:270)
    at na (https://js.arcgis.com/4.14/dojo/dojo-lite.js:12:110)
    at t (https://js.arcgis.com/4.14/dojo/dojo-lite.js:5:107)
    at messageHandler (blob:http://localhost:4200/e85013a7-83fe-46ce-946a-596516ebcbfd:1:1795)

Its very frustrating not knowing how to resolve it, it seems to be going to the correct path, or am I missing something? It shows up twice consecutively

RyannGalea commented 4 years ago

I have noticed now I can actually resolve that file using this link opposed to where it's trying to locate it:

https://js.arcgis.com/4.14/esri/views/2d/layers/features/Pipeline.js

Just not sure how to adapt the config to use this correct link.

RyannGalea commented 4 years ago

Ok, well I have figure out that I had to add this line:

{ name: "arcgis-js-api", location: `${DEFAULT_WORKER_URL}esri` },

to my loaderConfig packages, this has resolved this issue for now.

andygup commented 4 years ago

I'm testing Angular 9 and I was able to get topo-vector to work using all the project defaults without modifying any config files except to update the node packages. Something might have changed that fixed the issue:

"@arcgis/webpack-plugin": "^4.14.1" "@angular/core": "~9.0.2" "@angular/cli": "~9.0.2" "@angular-builders/custom-webpack": "^8.4.1"

image

RyannGalea commented 4 years ago

@andygup, Thanks for the update, will test this out at soon.