cytoscape.js and Angular6

Question

I want to import cytoscape.js library in my angular project, but I don't know how to do it. As far as I know, there is no official cytoscape module for angular, is there any way to import cytoscape manually?

Answer 1

UPDATE: Please see the answer of D.C. Joo, this should be the accepted answer.

Actually, it's no problem to import JS libraries in Angular, thats how I do it using npm and Angular6:

1. Run npm install cytoscape
2. Download Cytoscape from https://github.com/cytoscape/cytoscape.js/blob/master/dist/cytoscape.min.js
3. Create a directory scripts in your Angular root directory and place the downloaded file there

4. Include your downloaded script in your angular.json:

   "projects": { "myproject": { ... "architect": { "build": { ... "scripts": [ "src/scripts/cytoscape.min.js" ] ... (NOTE: Sorry about the formatting, I tried but it does not want to work)

5. In the Angular component where you want to use Cytoscape, add declare var cytoscape: any; to the imports

Now you can use Cytoscape like you would normally, have fun :)

Answer 2

Philipp's answer actually works but it looks like an improper inclusion of a library using both npm install AND an actual JS file. You can skip the npm install step from the instruction and it will work the same. To actually use npm installed package I advise the following:

1. Run npm install cytoscape
2. Run npm install --save @types/cytoscape for proper IDE tips.
3. In your component add import * as cytoscape from 'cytoscape';
4. Use it like expected e.g. let cy = cytoscape({...})