Error loading Pipeline.js - Angular & ArcGIS API For JavaScript

2672
6
11-06-2019 12:40 PM
mfcallahan
Occasional Contributor II

I've come across an error which I am not quite sure how to diagnose.  I have an Angular 7 application which uses the ArcGIS JS API and the arcgis-webpack-plugin, configured similarly to this sample app:

 

GitHub - Esri/angular-cli-esri-map at arcgis-webpack-angular 

 

I need to use some components of the dojo framework directly, importing them like this:

import * as dojo from 'dojo/dojo';
import * as domProp from 'dojo/dom-prop';

However, I'm receiving this error at run time (the app does build without error):

 

DOMException: Failed to execute 'importScripts' on 'WorkerGlobalScope': The script at 'localhost:4200/dojo/arcgis-js-api/views/2d/layers/features/Pipeline.js' failed to load.

 

The error is straightforward - the script at '/dojo/arcgis-js-api/views/2d/layers/features/Pipeline.js' fails to load because it does not exist.  But I was wondering if anyone can shed some light on this and help me understand what would cause an app to look in the 'dojo' API files for an ArcGIS JS API file.  File '/arcgis-js-api/views/2d/layers/features/Pipeline.js' does exist, I'm just not sure what uses Pipeline.js as that is not something I directly reference or import, and why the app looks inside the dojo API for that file.

0 Kudos
6 Replies
ReneRubalcava
Frequent Contributor

I'm not familiar with that Angular app, but somewhere you need to set up the worker loader url configuration like this file.

arcgis-cli-app/config.ts at master · odoe/arcgis-cli-app · GitHub 

This let's the API know to load the workers from the CDN, because they cannot currently be built with webpack and I don't see that being done in that app, at least not from a quick glance.

I'm pretty sure that is the source of the error you are seeing.

mfcallahan
Occasional Contributor II

Thanks for the reply.  Can you elaborate on what is meant by "This let's the API know to load the workers from the CDN, because they cannot currently be built with webpack and I don't see that being done in that app..."

0 Kudos
ReneRubalcava
Frequent Contributor

In that file above

import esriConfig from "esri/config";

// CDN version of the API
const DEFAULT_WORKER_URL = "https://js.arcgis.com/4.7/";
// Lite AMD loader on the CDN
const DEFAULT_LOADER_URL = `${DEFAULT_WORKER_URL}dojo/dojo-lite.js`;

// You define the `esriConfig.workers.loaderUrl` to point to the CDN
(esriConfig.workers as any).loaderUrl = DEFAULT_LOADER_URL;
esriConfig.workers.loaderConfig = {
  // Set up the loader config
  // to treat the CDN as the base url for workers
  baseUrl: `${DEFAULT_WORKER_URL}dojo`,
  // need to also let the workers know
  // where the module packages are on the CDN
  packages: [
    { name: "esri", location: DEFAULT_WORKER_URL + "esri" },
    { name: "dojo", location: DEFAULT_WORKER_URL + "dojo" },
    { name: "dojox", location: DEFAULT_WORKER_URL + "dojox" },
    { name: "dijit", location: DEFAULT_WORKER_URL + "dijit" },
    { 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" }
  ]
} as any;

This tells the workers in the API where the workers should be loaded from. In this case, the CDN.

mfcallahan
Occasional Contributor II

Thanks, adding a similar configuration to my project looks like it would resolve the path issue I was seeing.  I ultimately abandoned moving my the project to the arcgis-webpack-plugin, but I will likely refer back to your answer in the near future with other projects.  Thanks for taking the time to help!

0 Kudos
רוןאברהם
New Contributor

Hello. I am facing the same issue. Just wondered if you managed to fix this, and How. Thanks in advance

0 Kudos
RyannGalea
New Contributor II

I had to add this line:

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

To my loaderConfig packages as it was resolving the file at the wrong url.