Angular 17 with ArcGIS Javascript SDK

[thxmike13]

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

[AndyGup]

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%;
}

[thxmike13]

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. 

[AndyGup]

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. 

[thxmike13]

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

[thxmike13 · Accepted solution]

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