topic Re: Angular 17 with ArcGIS Javascript SDK in ArcGIS JavaScript Maps SDK Questions

Angular 17 with ArcGIS Javascript SDK

thxmike13 — Wed, 04 Sep 2024 14:04:02 GMT

I am attempting to use the ArcGIS Javascript SDK. I am following the documentation outlined here: https://developers.arcgis.com/javascript/latest/get-started-angular/

In doing so, I keep getting the following error(s):

[esri.views.webgl.FramebufferObject] Resizing FBO attachment size 2368x16476 to device limit 16384

The system seems to loop continually with this error until it finally fails with this error:

ERROR TypeError: Cannot destructure property 'spans' of 'g' as it is null.
    at m2._renderBackgroundLayers (/Users/mrivera/Projects/mapping-test-2/node_modules/@arcgis/core/views/2d/engine/vectorTiles/VectorTileContainer.js:5:5146)
    at m2._doRender (/Users/mrivera/Projects/mapping-test-2/node_modules/@arcgis/core/views/2d/engine/vectorTiles/VectorTileContainer.js:5:2957)
    at m2.renderChildren (/Users/mrivera/Projects/mapping-test-2/node_modules/@arcgis/core/views/2d/engine/vectorTiles/VectorTileContainer.js:5:2374)
    at m2.doRender (/Users/mrivera/Projects/mapping-test-2/node_modules/@arcgis/core/views/2d/engine/Container.js:5:1898)
    at m2.doRender (/Users/mrivera/Projects/mapping-test-2/node_modules/@arcgis/core/views/2d/engine/vectorTiles/VectorTileContainer.js:5:2055)
    at m2.processRender (/Users/mrivera/Projects/mapping-test-2/node_modules/@arcgis/core/views/2d/engine/DisplayObject.js:5:2380)
    at h4.renderChildren (/Users/mrivera/Projects/mapping-test-2/node_modules/@arcgis/core/views/2d/engine/Container.js:5:3507)
    at h4.doRender (/Users/mrivera/Projects/mapping-test-2/node_modules/@arcgis/core/views/2d/engine/Container.js:5:1898)
    at h4.processRender (/Users/mrivera/Projects/mapping-test-2/node_modules/@arcgis/core/views/2d/engine/DisplayObject.js:5:2380)
    at q2._renderChildren (http://localhost:4200/@fs/Users/mrivera/Projects/mapping-test-2/.angular/cache/17.3.8/vite/deps/mapViewDeps-6CCLAVOG.js?v=44a6020f:2830:11) {stack: "TypeError: Cannot destructure property 'spans…s/mapViewDeps-6CCLAVOG.js?v=44a6020f:2830:11)", message: "Cannot destructure property 'spans' of 'g' as it is null."}

On the UI, the map appears to render initially but then scrolls in till the map finally disappears.

The application setup is pretty basic, since I am just trying to get the map to show on the screen. I am pretty new in using ArcGiS so any assistance would be appreciated.

app.component.ts -

import { Component } from '@angular/core';
import { RouterOutlet } from '@angular/router';
import { MappingModule } from './mapping/mapping.module';

@Component({
  selector: 'aig-root',
  standalone: true,
  imports: [RouterOutlet, MappingModule],
  templateUrl: './app.component.html',
  styleUrl: './app.component.scss'
})
export class AppComponent {
  title = 'mapping-test-2';
}

app.component.html -

<div>
 <aig-mapping></aig-mapping>
</div>

mapping.module.ts -

import { NgModule } from '@angular/core';
import { ComponentLibraryModule } from '@arcgis/map-components-angular';

import { MappingComponent } from './mapping.component';

@NgModule({
  declarations: [MappingComponent],
  imports: [ComponentLibraryModule],
  exports:[MappingComponent]
})
export class MappingModule {}

mapping.component.ts -

import { Component, OnInit } from "@angular/core";
import { defineCustomElements } from "@arcgis/map-components/dist/loader";

@Component({
  selector: "aig-mapping",
  templateUrl: "./mapping.component.html",
  styleUrls: ["./mapping.component.scss"]
})
export class MappingComponent implements OnInit {
  title = "map-components-angular-template";

  arcgisViewReadyChange(event: any) {
    console.log("MapView ready", event);
  }

  ngOnInit(): void {
    defineCustomElements(window, { resourcesUrl: "https://js.arcgis.com/map-components/4.30/assets" });
  }
}

mapping.component.html

<arcgis-map item-id="d5dda743788a4b0688fe48f43ae7beb9" (arcgisViewReadyChange)="arcgisViewReadyChange($event)">
    <arcgis-expand>
      <arcgis-search position="top-right"></arcgis-search>
    </arcgis-expand>
    <arcgis-legend position="bottom-left"></arcgis-legend>
  </arcgis-map>

package.json -

{
  "name": "mapping-test-2",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "watch": "ng build --watch --configuration development",
    "test": "ng test"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^17.3.0",
    "@angular/common": "^17.3.0",
    "@angular/compiler": "^17.3.0",
    "@angular/core": "^17.3.0",
    "@angular/forms": "^17.3.0",
    "@angular/platform-browser": "^17.3.0",
    "@angular/platform-browser-dynamic": "^17.3.0",
    "@angular/router": "^17.3.0",
    "@arcgis/map-components-angular": "^4.30.7",
    "rxjs": "~7.8.0",
    "tslib": "^2.3.0",
    "zone.js": "~0.14.3"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^17.3.8",
    "@angular/cli": "^17.3.8",
    "@angular/compiler-cli": "^17.3.0",
    "@types/jasmine": "~5.1.0",
    "jasmine-core": "~5.1.0",
    "karma": "~6.4.0",
    "karma-chrome-launcher": "~3.2.0",
    "karma-coverage": "~2.2.0",
    "karma-jasmine": "~5.1.0",
    "karma-jasmine-html-reporter": "~2.1.0",
    "typescript": "~5.4.2"
  }
}

Any assistance would be appreciated

Re: Angular 17 with ArcGIS Javascript SDK

AndyGup — Wed, 04 Sep 2024 15:30:25 GMT

Make sure you add the appropriate CSS.

In app.component.css:

@import url('https://js.arcgis.com/4.30/@arcgis/core/assets/esri/themes/light/main.css');

And in styles.css:

html, body { padding: 0; margin: 0; height: 100%; width: 100%; }

Re: Angular 17 with ArcGIS Javascript SDK

thxmike13 — Mon, 09 Sep 2024 16:21:19 GMT

I find it interesting that this is not documented - https://developers.arcgis.com/javascript/latest/get-started-angular/

But in any case, I added the items suggested but unfortunately, this just gives me a blank page.

Re: Angular 17 with ArcGIS Javascript SDK

AndyGup — Mon, 09 Sep 2024 17:04:39 GMT

We will be updating the doc in the next week or two to clarify adding the CSS. In the meantime, you can use the sample here as a working example: https://github.com/Esri/jsapi-resources/tree/main/component-samples/map-components/samples/angular. Also, if you still can't get it to work, you'll need to provide a minimal reproducible sample app: https://developers.arcgis.com/javascript/latest/troubleshooting/#minimal-reproducible-application.

Re: Angular 17 with ArcGIS Javascript SDK

thxmike13 — Sat, 28 Sep 2024 18:33:06 GMT

So after few hours of experimentation and digging into this and comparing with the Repo you provided, it appears that the SDK does not like to be applied in an external component from outside the standard app component.

From a design perspective this kinds of breaks conventions with components.

Initially, I thought it was and issue with running app with Angular's new Stand alone components feature since a lot of vendors have not caught up with this since it was formalized in v17, but it appears to work fine with running angular as a stand alone component.

I will continue to experiment with this but I now have at least a starting point

Re: Angular 17 with ArcGIS Javascript SDK

thxmike13 — Sat, 28 Sep 2024 18:46:05 GMT

If you decide to leverage the SDK in a separate angular component, you will have to use create it with the Legacy Angular Module and export the ComponentLibraryModule in the Module you create it in, Otherwise your map won't load properly. Here is an example of what is required:

import { NgModule } from '@angular/core'; import { ComponentLibraryModule } from '@arcgis/map-components-angular'; import { MappingComponent } from './mapping.component'; @NgModule({ declarations: [MappingComponent], imports: [ComponentLibraryModule], exports:[MappingComponent, ComponentLibraryModule] }) export class MappingModule {}

This angular module can then be imported into the AppModule for consumption