core.js ERROR TypeError: Array or DataSet expected for vis-network angular 10

Question

How can I properly initialize vis-network in TS to avoid following error:

ERROR TypeError: Array or DataSet expected
    at t.value (vis-network.min.js?087a:58)
    at Lf.setData (vis-network.min.js?087a:58)
    at new Lf (vis-network.min.js?087a:58)
    at DependencyDashboardComponent.ngAfterViewInit (dependency-dashboard.component.ts?5305:39)
    at callHook (core.js?7d7a:2922)
    at callHooks (core.js?7d7a:2892)
    at executeInitAndCheckHooks (core.js?7d7a:2844)
    at refreshView (core.js?7d7a:7304)
    at refreshEmbeddedViews (core.js?7d7a:8335)
    at refreshView (core.js?7d7a:7257)

I have following TS code for vis-network initialization:

ngAfterViewInit(): void {
    // create an array with nodes
    const nodes = new DataSet<any>([
      { id: 1, label: 'Node 1' },
      { id: 2, label: 'Node 2' },
      { id: 3, label: 'Node 3' },
      { id: 4, label: 'Node 4' },
      { id: 5, label: 'Node 5' },
    ]);

    // create an array with edges
    const edges = new DataSet<any>([
      { from: '1', to: '3' },
      { from: '1', to: '2' },
      { from: '2', to: '4' },
      { from: '2', to: '5' },
    ]);

    const data = { nodes, edges };

    const container = this.visNetwork;
    this.networkInstance = new Network(container.nativeElement, data, {});
  } 

Full code sample is available under https://github.com/tillias/microservice-catalog/blob/dev/src/main/webapp/app/dashboard/dependency-dashboard/dependency-dashboard.component.ts

It has worked like charm previously with angular 9.

I have created issue https://github.com/visjs/vis-network/issues/1085, but not sure if this is a bug or "feature".

Answer 1

Based on answers of vis.js developers the key is correct import. Here is working solution:

import {DataSet} from 'vis-data/peer';
import {Network} from 'vis-network/peer';

 refreshGraph(dependencies: IDependency[]): void {
    const nodes = new DataSet<any>();
    const edges = new DataSet<any>();

    dependencies.forEach(d => {
      nodes.add({
        id: d.id,
        label: d.name
      });

      edges.add({
        from: d.source?.id,
        to: d.target?.id
      })
    })

    const data = {nodes, edges};

    const container = this.visNetwork;
    this.networkInstance = new Network(container.nativeElement, data, {
      height: '500px',
    });
 }