Angular 17 with ArcGIS Javascript SDK

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

Continue reading...