ESRI CSS not properly loading

[sbuscher]

Description

This could be considered more of a question than an issue. Followed the arcgis-webpack-plugin configuration steps. The Popup and LayerList widget are styled correctly when requesting the light theme over CDN:

<link rel="stylesheet" href="https://js.arcgis.com/4.16/esri/themes/light/main.css"

Since the theme is already bundled in arcgis-js-api I'd rather not rely on fetching at runtime. I've tried configuring the style in angular.json on line 45:

The results are erratic. In this case no layers (all vector tile) display. However, the LayerList widget does display properly indicating the light theme is loading.

I was hoping there was a reference implementation or guidance for loading the esri themes properly with arcgis-webpack-plugin. The angular-cli-esri-map example uses the CDN as well. Wondering what ideas there are to get this working properly?

Expected Behavior

Correctly styled app using the light theme from node_modules/arcgis-js-api/themes/light/main.css.

Actual Behavior

Vector tile layers do not show.

Possible Fix

An example or instructions.

Steps to Reproduce

1. Add "node_modules/arcgis-js-api/themes/light/main.css" to angular.json (see above image).
2. Add a vector tile layer, popup, and layer list widget to the map.

Context

Trying to avoid loading the esri light theme via CDN.

Your Environment

• Version used: Angular 9, arcgis jsapi 4.16
• Browser Name and version: Latest Chrome
• Operating System and version (desktop or mobile): Win 64
• Link to your project if available:

[odoe]

I'm unsure what this particular issue is, but I don't think it's css related.

I was able to load the built css in an app using sass like this.

@import "~arcgis-js-api/themes/light/main.css";

This worked in my local app, but it's not an angular app, so not sure if that needs something special.

The errors you have listed are related to errors loading worker files. It looks like it's trying to load them from dojo/arcgis-js-api, which isn't correct. The workers need to be loaded from the CDN or a locally hosted version of the API that was downloaded from here.

You can configure that with a configuration file as detailed here.

I think that is your issue and not the css.

[sbuscher]

Thanks for the lightning fast response odoe!

If I remove loading the esri style from angular.json and instead use the CDN, the app works normally. I agree the CSS shouldn't be causing the worker file errors but it's happening for one reason or another. Probably a red herring so not concerned about it...

I tried @import "~arcgis-js-api/themes/light/main.css" as you mentioned and this made the app happy, well mostly. There's an image asset that fails to be retrieved because the url is incorrect: localpolar.apps.fcsamerica.com/auth/arcgis-js-api/images/support/sdk_gps_location.png. /auth should not be in there and is likely an artifact of the preceding oauth redirects. That's on my end to figure out.

Is the worker configuration you mentioned something you put in the webpack config or somewhere else?

Closing this issue. Thanks again.

[odoe]

The worker configuration would be its own module that you can add to your app. Like here.

[sbuscher]

How do you implement the worker configuration for Angular applications? There's no mention of it in the configuration section of Using the ArcGIS API for JavaScript with Angular and I don't see the worker configuration being used in the arcgis-webpack-angular reference application.

I'm running into an issue that looks related to an incorrect worker url https://localpolar/fcsamerica.com/auth/dojo/dojo.js. I'm guessing the base url should instead be https://js.arcgis.com/4.16, which can be set in worker-config.ts.

The app only errors out when the user is redirected from a login page. The '/auth' part of the url is some kind of artifact. When users are already authenticated the app loads normally without errors.

Can you provide a reference ArcGIS Angular app with worker configuration in place or instructions on how to set it up for Angular apps?

[andygup]

Hi @sbuscher, I'll make sure the angular-cli-esri-map repo gets updated with both using the local css and the workers. There are several github issues floating around that discuss this, but I'll make sure it's documented in the repo. Here's a psuedo-example:

// In ngOnit()
async initializeMap() {

    // IMPORTANT - this version MUST match the version that the webpack plugin is using.
    const DEFAULT_WORKER_URL = "https://js.arcgis.com/4.16/";
    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" }
      ]
    };

      // Configure the Map
      const mapProperties = {
        basemap: this._basemap
      };

      const map = new Map(mapProperties);  
      const citiesLayer = new FeatureLayer({
        url: "https://services.arcgis.com/.../arcgis/rest/services/WorldCities/FeatureServer/0",
      });

      map.add(citiesLayer);      

      // Initialize the MapView
      const mapViewProperties = {
        container: this.mapViewEl.nativeElement,  
        center: this._center,
        zoom: this._zoom,
        map: map
      };

      this._view = new MapView(mapViewProperties);

      // wait for the map to load
      await this._view.when(); 
      return this._view;
  }

[sbuscher]

Thanks for being on top of this @andygup! I'll give your pseudo a shot.

[sbuscher]

@andygup adding the workers knocked out 12 of 13 errors. The remaining one pertains to fetching arcgis jsapi image assets. The first url should be used instead of the second. For some reason this occurs only when being redirected from a login page. Is there a way to prevent this from happening?

https://localpolar.apps.fcsamerica.com/arcgis-js-api/images/support/sdk_gps_location.png https://localpolar.apps.fcsamerica.com/auth/arcgis-js-api/images/support/sdk_gps_location.png

[andygup]

@sbuscher Since you are working with a redirect, one thought is to try setting the esriConfig.workers.loaderConfig.baseUrl => https://developers.arcgis.com/javascript/latest/api-reference/esri-config.html#workers