Default demo does not work, DataSet is undefined.

[CapnCrunchsna]

Prerequisites

Please answer the following questions for yourself before submitting an issue.

• I am running the latest version
• I checked the documentation and found no answer
• I checked to make sure that this issue has not already been filed
• I'm reporting the issue to the correct repository

Current Behavior

Running the provided network demo using demo/network/network-example.component.ts does not create nor display the graph.

Expected Behavior

The graph should be created and displayed.

Failure Information

When trying to create the DataSet using the new DataSet(...) constructor the program fails. The constructor in the compiled code is being run as:
this.nodes = new ngx_vis_1.DataSet([...])
Breakpointing at this location shows the ngx_vis_1.DataSet is undefined.

If you remove the wrapping constructor and simply run:
this.nodes = [...]
then the graph will display.

Steps to Reproduce

This issue can be seen in the following Stackblitz, in particular test.component.ts:
https://stackblitz.com/edit/angular-9-custom-elements-ffxu2j?file=src%2Fapp%2Ftest%2Ftest.component.ts

Reproduce code snippet

See code in stackblitz above.

Context

Angular Version: 9.0.7
ngx-vis: 3.0.4

All other dependency versions can be found in the stackblitz.

[jbsilva]

I got something similar. Same versions:

core.js:6185 ERROR TypeError: ngx_vis__WEBPACK_IMPORTED_MODULE_1__.DataSet is not a constructor
    at GraphComponent.ngOnInit (graph.component.ts:40)
    at callHook (core.js:4686)
    at callHooks (core.js:4650)
    at executeInitAndCheckHooks (core.js:4591)
    at refreshView (core.js:11814)
    at refreshComponent (core.js:13229)
    at refreshChildComponents (core.js:11527)
    at refreshView (core.js:11848)
    at renderComponentOrTemplate (core.js:11922)
    at tickRootContext (core.js:13391)
defaultErrorLogger @ core.js:6185

After removing new DataSet<Node>( and new DataSet<Edge>( the graph is displayed, but addNode() doesn't work.

[hypery2k]

strange, seems to not correctly re-exporting the constructor

[epitomz]

I have the same error with version 3.0.4. Any update on this?

[jbsilva]

Until this get solved, just import DataSet from vis-data.

[epitomz]

I still get an error "Array or DataSet expected" at t.value (vis-network.min.js:84)

[jbsilva]

Try this:

this.visNetworkData = { nodes: this.nodes.get(), edges: this.edges.get() };
this.visNetworkService.setData(this.visNetwork, this.visNetworkData);
this.visNetworkService.fit(this.visNetwork);

[anvial]

this.visNetworkData = { nodes: this.nodes.get(), edges: this.edges.get() };
this.visNetworkService.setData(this.visNetwork, this.visNetworkData);
this.visNetworkService.fit(this.visNetwork);

can you please , more in detail explain where to try this code?

[anvial]

Try this:

this.visNetworkData = { nodes: this.nodes.get(), edges: this.edges.get() };
this.visNetworkService.setData(this.visNetwork, this.visNetworkData);
this.visNetworkService.fit(this.visNetwork);

OK, I think I understand, what you mean.

But I suppose I face with the problem, that you mentioned earlier:

After removing new DataSet( and new DataSet( the graph is displayed, but addNode() doesn't work.

[Stexxen]

Just had a quick look at this, and there is quite a lot wrong with it.
For starters it looks like it's never been properly updated from the version in original repo.
Here are some things I've noticed.

In the network directive it's been updated to look for the properties visData and visOptions

Yet the demo Template still uses the original repo's properties visNetworkData and visNetworkOptions

Another Example
When creating a Network the data is meant to be passed as a Data object, defined in vis-network as

yet the Demo tries to use DataSet objects instead of arrays or DataInterface.
Now the comment by @jbsilva to use get() would've helped and convert the DataSet, but it depends on the template parameters being correct first

And the DataSet constructors now looks like this.

So the Demo is using the first constructor and effectively stuffing the data in the options parameter.

[ericleib]

Not sure this is a good fix, but it solves the issue for me. See this StackOverflow answer

In the case of this project, just use:

import { Node, Edge, Network } from 'vis-network/peer/esm/vis-network';
import { DataSet } from "vis-data/peer/esm/vis-data"

[digit81]

After migrating from ngx-vis from version 2 to version 3 and changing VisEdges to DataSet I got the same error:

ERROR TypeError: ngx_vis__WEBPACK_IMPORTED_MODULE_1__.DataSet is not a constructor

importing DataSet from vis-data was the solution for now:

import {DataSet} from "vis-data/peer/esm/vis-data"

Do you plan to fix it?

What dependencies should I have? Now I installed all:

    "vis": "^4.21.0",
    "vis-data": "^6.5.1",
    "vis-network": "^7.6.4",
    "vis-util": "^4.0.0",

[digit81]

after upgrading to:

    "vis-data": "^6.5.3",
    "vis-network": "^7.6.6",
    "vis-util": "^4.0.2",

Problem is back: ERROR TypeError: "Array or DataSet expected"

Noting in code has changed.

[ykamchi]

Hi,

I got the same error as digit81 had. Is there any due date for a fix?

Please provide a valid instructions on how to use the package with new versions of Angular.

"ngx-vis": "^3.1.0",
"uuid": "^7.0.3",
"vis-data": "^6.5.3",
"vis-network": "^7.6.9",
"vis-util": "^4.0.2",

Thx,
Yohay

[hypery2k]

you give [email protected] a try

[ykamchi]

Hi,

Thanks for the quick reply, I updated my npm install with:

"ngx-vis": "^3.1.0-build1590696393",
"vis-data": "^6.5.3",
"vis-util": "^4.0.2",

but the I cannot find the right way to import the components to the example:

import {
VisNode,
VisNodes,
VisEdges,
VisNetworkService,
VisNetworkData,
VisNetworkOptions } from 'ngx-vis';

Only one component from this list (VisNetworkService) is OK, the others are rejected by the compiler. what is the right way to import?

Thx,
Yohay

[samgevorgyan]

thank you @hypery2k . it worked