Skip to content

Getting error in Angular application #709

@ironmike

Description

@ironmike

I am trying to use 3d-force-graph in an angular application. Using v1.77.0 of 3d-force-graph

Pretty simple component:

`import { AfterViewInit, Component, ElementRef, ViewChild } from '@angular/core';
import ForceGraph3D from '3d-force-graph';
import { CSS2DObject } from 'three-css2drender';

@component({
selector: 'key-party-graph',
templateUrl: './graph.component.html'
})
export class GraphComponent implements AfterViewInit {

// ForceGraph = ForceGraph;
@ViewChild('graphComponent') graphComponent: ElementRef;

ngAfterViewInit() {
    const graphData = {
        nodes: [{ id: 'A' }, { id: 'B' }, { id: 'C' }, { id: 'D' }],
        links: [
            { source: 'A', target: 'B' },
            { source: 'B', target: 'C' },
            { source: 'A', target: 'D' },
        ]
    };
    const myGraph = new ForceGraph3D(this.graphComponent.nativeElement)
        .dagMode('td')
        .dagLevelDistance(35)
        .graphData(graphData)
        .width(500)
        .height(500)
        .nodeThreeObject(node => {
            const nodeEl = document.createElement('div');
            nodeEl.textContent = node.id;
            nodeEl.style.color = node.color;
            nodeEl.className = 'node-label';
            return new CSS2DObject(nodeEl);
        })
        .nodeThreeObjectExtend(true)
        .linkDirectionalArrowLength(5)
        .linkDirectionalArrowRelPos(1);
}

}
`

The error I am seeing in the console is:

`× Failed to compile.
√ Browser application bundle generation complete.

Initial Chunk Files | Names | Raw Size
main.js | main | 8.77 MB |
runtime.js | runtime | 12.93 kB |

10 unchanged chunks

Build at: 2025-05-20T19:37:10.798Z - Hash: 6277d18fc8d90d68 - Time: 7011ms

Error: node_modules/three-forcegraph/dist/three-forcegraph.d.ts:253:155 - error TS2344: Type 'NodeType' does not satisfy the constraint 'NodeObject'.
Type 'NodeType' is not assignable to type 'object'.

253 declare class ThreeForceGraph<NodeType = NodeObject, LinkType = LinkObject> extends ThreeForceGraphGeneric<ThreeForceGraph<NodeType, LinkType>, NodeType, LinkType> {}
~~~~~~~~

node_modules/three-forcegraph/dist/three-forcegraph.d.ts:253:31
253 declare class ThreeForceGraph<NodeType = NodeObject, LinkType = LinkObject> extends ThreeForceGraphGeneric<ThreeForceGraph<NodeType, LinkType>, NodeType, LinkType> {}
~~~~~~~~~~~~~~~~~~~~~
This type parameter might need an extends object constraint.
node_modules/three-forcegraph/dist/three-forcegraph.d.ts:253:31
253 declare class ThreeForceGraph<NodeType = NodeObject, LinkType = LinkObject> extends ThreeForceGraphGeneric<ThreeForceGraph<NodeType, LinkType>, NodeType, LinkType> {}
~~~~~~~~~~~~~~~~~~~~~
This type parameter might need an extends NodeObject constraint.

× Failed to compile.`

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions