Vis-timeline 7 and Angular 11

Question

I've been using vis-timeline 6.5.2 successfully with Angular for some time.

In my package.json dependencies, I have "vis-timeline": "^6.5.2"

In my typescript files, I have import { Timeline, DataSet } from 'vis-timeline';

Everything works.

Now, I am trying to upgrade to version 7.4.7. I changed the version in package.json and ran npm install.

First, my import statements break with

Module '"../../../../node_modules/vis-timeline/declarations"' declares 'DataSet' locally, but it is not exported

I can fix this by changing the imports to import { Timeline, DataSet } from 'vis-timeline/standalone';, but I have no idea if this is the correct thing to do.

When I try to run the project with ng s I get these errors:

Error: ./node_modules/vis-timeline/peer/umd/vis-timeline-graph2d.min.js  
Module not found: Error: Can't resolve 'vis-data/peer/umd/vis-data.js' in 'C:\Users\Ken\workspace\hatch-tools
ode_modules\vis-timeline\peer\umd'

and also

Error: ./node_modules/vis-timeline/peer/umd/vis-timeline-graph2d.min.js
Module not found: Error: Can't resolve 'moment' in 'C:\Users\Ken\workspace\hatch-tools
ode_modules\vis-timeline\peer\umd'

If I add moment and vis-data to my package.json I get yet more obscure errors.

Any advice on how to get vis-timeline 7 working in Angular?

I am on Angular 11.2.8 and Node 14.16.1.

user_14276635 · Answer

I just started using vis-timeline recently and did the obvious of trying to use the latest version, then installing all of the required peer dependencies. Once I got it compiling I ran into runtime issues like 'Cannot read property 'get' of undefined whenever I clicked an editable event (note: this was happening on the examples page a couple of days ago as well, but isn't now)

After searching around, I found this post and downgraded the version to 6.5.2. I then realized that there's a security risk in 6.5.2 link.

Going back in to it, I dug around and found the version (7.4.4) where they addressed said security issue. This version doesn't have the same issues I mentioned earlier at run time.

I used the following successfully on an Angular 11.2.8 project:

package.json

"vis-timeline": "7.4.4",
"@egjs/hammerjs": "2.0.17",
"keycharm": "0.4.0",
"moment": "2.29.1",
"propagating-hammerjs": "2.0.1",
"uuid": "7.0.3",
"vis-data": "7.1.2",
"vis-util": "4.3.4",
"xss": "1.0.8",

component:

   import { DataSet } from 'vis-data/esnext';
   import { Timeline } from 'vis-timeline/esnext';

(you could also import both from 'vis-timeline/standalone' but we use webpack, so the esnext option was better for our application - ref)

user_661701 · Answer

I was tasked to firing up a new timeline today as well and I am seeing the same issues. Started a bare bones angular project from scratch to isolate everything and had to run the 'npm i' on vis-data, vis-util and moment which all came in before just by installing the timeline. Even after installing those I am getting an error for XSS namespace and hammerJs (did a 'npm i hammerjs' and still get the error). I had to revert to the same version as you where previously using. This build will need to be fixed before it can be used.

Vis-timeline 7 and Angular 11

2 Answers