Search code examples
angulartypescript-typingsvis.jsvis.js-timeline

Module not found error with vis-timeline and angular 8


I'm trying to use the "new" forked vis-timeline 5.1.0 with the latest angular 8 version, but I get and error when trying to run the application:

[ng] ERROR in ./src/app/pages/interventions/interventions-details/interventions-details.page.ts [ng] Module not found: Error: Can't resolve 'vis' in 'D:_GIT\appbo\src\app\pages\interventions\interventions-details'

I installed vis-timeline via npm:

npm install vis-timeline --save

and then, I installed the types:

npm install @types/vis --save-dev

On my page I imported the class and tryed to run the app:

import { Timeline, TimelineOptions, DataItem, DataSet } from 'vis';

@Component(
{
    selector: 'app-interventions-details',
    templateUrl: './interventions-details.page.html',
    styleUrls: ['./interventions-details.page.scss'],
})
export class InterventionsDetailsPage extends AppBasePage implements OnInit
{
    @ViewChild('revisionsTimeline', { static: true }) RevisionsTimeline: ElementRef;

    constructor() 
    { 

    }

    ngOnInit() 
    {
        this.RenderTimeline();
    }

    public RenderTimeline()
    {    
        //RANDOM DATA SOURCE FOR TESTING
        var items = new DataSet(
        [
            { id: 1, content: 'item 1', start: '2014-04-20'},
            { id: 2, content: 'item 2', start: '2014-04-14'},
            { id: 3, content: 'item 3', start: '2014-04-18'},
            { id: 4, content: 'item 4', start: '2014-04-16', end: '2014-04-19'},
            { id: 5, content: 'item 5', start: '2014-04-25'},
            { id: 6, content: 'item 6', start: '2014-04-27', type: 'point'}
        ]);

        //SOME BASIC PROPS TO CONFIG THE TIMELINE
        let timelineOptions:TimelineOptions = 
        {
            start: '2014-03-10',
            end: '2014-05-10',
            verticalScroll: false,
            editable: false,
            zoomable:true, 
            locale: "pt"
        };

        //INIT TIMELINE INSTANCE
        let timeline:Timeline = new Timeline(this.RevisionsTimeline.nativeElement, items, timelineOptions);
    }

}

Am I doing something wrong? Can someone help me fix the problem?


Solution

  • Since you installed the package with npm install vis-timeline --save it will be saved to ./node_modules/vis-timeline.

    To use this package, you'll need to use vis-timeline as the package name:

    import { Timeline, TimelineOptions, DataItem, DataSet } from 'vis-timeline';
    

    It also looks like the @types/vis package won't work for this. You'd need @types/vis-timeline but looks like those don't exist yet. A short-term fix could be to copy @types/vis to your project (assuming they're the same types).