angularcytoscape.jscytoscape

How to add cytoscape extensions in Angular

Im trying to implement cytoscape extensions in Angular 8

npm install cytoscape-edge-editing Cytoscape work fine.

1.app.ts

import * as cytoscape from 'cytoscape';
import * as edgeBendEditing from 'cytoscape-edge-editing';
import * as jquery from 'jquery';


let cytoscape = require('cytoscape');
let jquery = require('jquery');
let edgeBendEditing = require('cytoscape-edge-editing');

edgeBendEditing( cytoscape, jquery );
cytoscape.use(edgeBendEditing);

  1. angular.json 

     "scripts": [
              "node_modules/cytoscape/dist/cytoscape.min.js",
              "node_modules/cytoscape-edge-editing/cytoscape-edge-editing.js",
              "node_modules/query/dist/jquery.min.js"
            ]

The error in browser is as below.

ReferenceError: $ is not defined[Learn More]

Solution

  • First of all you need to amend your imports. write:

    "import cytoscape from 'cytoscape'"

    "import $ from 'jquery'"

    after correcting your typo mistake as mentioned on above solution

    "node_modules/jquery/dist/jquery.min.js".

    Angular will give error following direct import, for it you have to add

    "allowSyntheticDefaultImports": true,

    in tsconfig.json file under

    "experimentalDecorators": true,

    line and in tsconfig.app.json file under

    "types": [],

    line. For jquery to be imported in angular you have to add following line (if not there) at the end in index.d.ts file which is under your-project/node_modules/@types/jquery (assuming you have mpm installed jquery):

    export = jQuery;

    Then you will be able to register jquery easily using:

    cytoscape.use($);

    it will resolve the error you are facing. But jquery works with the extension it is being used with, for that you have to register that extension with jquery like this:

    cytoscape.use(edgeBendEditing,$)

    This statement will give error of overloading arguments, for it you have to amend the index.d.ts file of cytoscape under your-project/node_modules/@types/cytoscape:

    function use(module: Ext): void;

    to this:

    function use(module: Ext, module2?: Ext): void;

    It'll solve your problem. I have used contextmenus using jquery with the same ammendments, hope that works for you as I was facing the same error.