Angular2, how to import visjs

Question

I just add visjs to my node modules so now I would like to import visjs like that:

import * as Vis from 'vis';
import { Component, ViewChild, ElementRef } from '@angular/core';

@Component({
  selector: 'center-pane',
  templateUrl: './center-pane.component.html',
  styleUrls: ['./center-pane.component.scss']
})
export class CenterPaneComponent {

  constructor(){}

  ngAfterViewInit(){
     console.log(Vis);
  }
}

But it doesn't work, 'vis' is not found.

How can I do ?

To bypass that I currently use the lib like that :

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/vis/4.18.1/vis.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/vis/4.18.1/vis.min.css" rel="stylesheet" type="text/css" />

But it's not the best way to use it...

Mackler

Answer 1

remove script link from cdn if you wanna import

run this first npm install vis --save

if you wanna use cdn instead, remove this import * as Vis from 'vis'; then add this line

declare var vis

Woodyard

Answer 2

Besides installing vis, you also need to install its type definitions.

npm install vis --save
npm install @types/vis --save-dev

After that, you can import and use vis elements:

import { Network, DataSet, Node, Edge, IdType } from 'vis';

Hodman

Hi, you can import all by using: import * as Vis from 'vis'; – Aesir