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?

Isaiah

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 :)

Menam

thank you very much, I did exactly the same but guiding me from this example: github.com/asiftasleem/angular-2-cytoscape – Isaiah

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({...})

Heresiarch

Sounds logical. I think we have very similar approach in our application. It deserves to be accepted answer, because of proper usage of both npm isntall workflow and tips for IDE... – Batman

Exactly, this should be the accepted answer. I didn't know much about the correct workflow when I wrote my answer but still wanted to provide my solution since it did work. However, it is reduntant and dirty. Do it this way! – Menam