CSS not properly loading, buttons & widget not rendering correctly

KevinWrona

Hey,

I am using ArcGIS API for JavaScript 4.20 ES modules and I am trying to add a Sketch Widget to the top right corner. The standard buttons like Zoom in and Zoom out and the widget are not rendering properly. All I am getting is the following:

Like in the documentation i am adding CSS resource with @import "@arcgis/core/assets/esri/themes/light/main.css";

Nearly the same Code worked with 4.17.

My angular component below.

import MapView from '@arcgis/core/views/MapView';
import BaseMap from '@arcgis/core/Basemap';
import WMSLayer from "@arcgis/core/layers/WMSLayer";
import Map from "@arcgis/core/Map";
import esriConfig from "@arcgis/core/config";
import Sketch from "@arcgis/core/widgets/Sketch";
import GraphicsLayer from "@arcgis/core/layers/GraphicsLayer";

@Injectable()
export class AppComponent{
  // The <div> where we will place the map
  @ViewChild('mapViewNode', { static: true }) private mapViewEl: ElementRef | undefined;

  constructor() {
    esriConfig.assetsPath = "assets/@arcgis/core/assets";
  }

  public initializeMap() {
    const graphicsLayer = new GraphicsLayer();
    const basemap = new BaseMap({
      baseLayers: [
        new WMSLayer({
          url: '<URL to WMS Server>?SERVICE=WMS&VERSION=1.3.0&REQUEST=GetCapabilities'
        })
      ]
    });
    const map = new Map({
      basemap: basemap,
      layers: [graphicsLayer]
    });

    const view = new MapView({
      container: this.mapViewEl?.nativeElement,
      map: map,
      zoom: 5,
      center: [90, 45]
    });

    view.when(() => {
      const sketch = new Sketch({
        layer: graphicsLayer,
        view: view
      });
      view.ui.add(sketch, "top-right");
    });
  }

  public ngOnInit(): void {
    // Initialize MapView and return an instance of MapView
    this.initializeMap();
  }
}

 

Any ideas?

KevinWrona

I tried in 2 seperate projects. In one project I use the:

"copyEsriAssets": "xcopy .\\node_modules\\@arcgis\\core\\assets .\\apps\\vwa\\src\\assets\\@arcgis\\core\\assets /sy"

 

In a second blank Angular project for testing I copied the assets (esri and components folder) manually to my-app\src\assets\@arcgis\core\assets and use 

esriConfig.assetsPath = "./assets/@arcgis/core/assets";

 

I am sure the path is correct becauce if I change it I get a 404 for widget-assets not found and so on ...

So I am not sure about what is important next to the asset folder and the import of main.css