Uncaught Error: Template parse errors: 'ng2-cytoscape' is not a known element; with Meteor

[Callmoon]

Hello,

I am trying to use ng2-cytoscape inside my meteor angular 2 projekt.

I've imported the Module via import { NgCytoscapeModule } from "ng2-cytoscape/dist"; inside my app.module.ts and my first attempt to include the component produces the following error inside the browser (with no rendered content):

modules.js?hash=72acef43a1ecfa85e6c7ff1a5a53a650625d7c7d:39758 Uncaught Error: Template parse errors:
Can't bind to 'elements' since it isn't a known property of 'ng2-cytoscape'.
1. If 'ng2-cytoscape' is an Angular component and it has 'elements' input, then verify that it is part of this module.
2. If 'ng2-cytoscape' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("<ng2-cytoscape [ERROR ->][elements]="graphData"></ng2-cytoscape> "): ng:///AppModule/GrapherComponent.html@0:15
'ng2-cytoscape' is not a known element:
1. If 'ng2-cytoscape' is an Angular component, then verify that it is part of this module.
2. If 'ng2-cytoscape' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("[ERROR ->]<ng2-cytoscape [elements]="graphData"></ng2-cytoscape> "): ng:///AppModule/GrapherComponent.html@0:0
    at syntaxError (modules.js?hash=72acef43a1ecfa85e6c7ff1a5a53a650625d7c7d:39758)
    at TemplateParser.parse (modules.js?hash=72acef43a1ecfa85e6c7ff1a5a53a650625d7c7d:50855)
    at JitCompiler._compileTemplate (modules.js?hash=72acef43a1ecfa85e6c7ff1a5a53a650625d7c7d:65058)
    at modules.js?hash=72acef43a1ecfa85e6c7ff1a5a53a650625d7c7d:64977
    at Set.forEach (<anonymous>)
    at JitCompiler._compileComponents (modules.js?hash=72acef43a1ecfa85e6c7ff1a5a53a650625d7c7d:64977)
    at modules.js?hash=72acef43a1ecfa85e6c7ff1a5a53a650625d7c7d:64864
    at Object.then (modules.js?hash=72acef43a1ecfa85e6c7ff1a5a53a650625d7c7d:39747)
    at JitCompiler._compileModuleAndComponents (modules.js?hash=72acef43a1ecfa85e6c7ff1a5a53a650625d7c7d:64863)
    at JitCompiler.compileModuleAsync (modules.js?hash=72acef43a1ecfa85e6c7ff1a5a53a650625d7c7d:64792)

It says that ng2-cytoscape is not a known element (got no other errors in the console or somewhere else).

Is it necessary to install the cytoscape package separately (its already located in node_modules but not in ng2-cytoscape/node_modules? Or do I have to add something to the package.json?

additionally I've added my package.json from the project and directly from the node_modules/ng2-cytoscape folder.

package.json

{
  "name": "acme",
  "private": true,
  "scripts": {
    "start": "meteor run",
    "start:prod": "meteor run --production",
    "build": "meteor build ./build/",
    "clear": "meteor reset",
    "meteor:update": "meteor update --all-packages",
    "test": "meteor test --driver-package practicalmeteor:mocha",
    "test:ci": "meteor test --once --driver-package dispatch:mocha-phantomjs"
  },
  "devDependencies": {
    "@types/chai": "3.5.2",
    "@types/meteor": "^1.4.1",
    "@types/mocha": "2.2.41",
    "chai": "3.5.0",
    "chai-spies": "0.7.1",
    "meteor-node-stubs": "0.2.4"
  },
  "dependencies": {
    "@angular/animations": "^4.4.3",
    "@angular/cdk": "2.0.0-beta.12",
    "@angular/common": "^4.4.3",
    "@angular/compiler": "^4.4.3",
    "@angular/core": "^4.4.3",
    "@angular/flex-layout": "2.0.0-beta.8",
    "@angular/forms": "^4.4.3",
    "@angular/http": "^4.4.3",
    "@angular/material": "2.0.0-beta.12",
    "@angular/platform-browser": "^4.4.3",
    "@angular/platform-browser-dynamic": "^4.4.3",
    "@angular/router": "^4.4.3",
    "@types/node": "^7.0.22",
    "@types/underscore": "^1.8.1",
    "angular2-file-drop": "^0.2.0",
    "angular2-meteor": "0.7.1",
    "angular2-meteor-accounts-ui": "1.0.0",
    "angular2-meteor-polyfills": "0.2.0",
    "angular2-meteor-tests-polyfills": "0.0.2",
    "angular2-qrcode": "^2.0.1",
    "@agm/core": "1.0.0-beta.2",
    "babel-runtime": "6.23.0",
    "bcrypt": "=1.0.2",
    "gm": "^1.23.0",
    "hammerjs": "^2.0.8",
    "meteor-node-stubs": "0.2.11",
    "meteor-rxjs": "0.4.7",
    "meteor-typings": "1.3.1",
    "ng2-cytoscape": "0.4.0",
    "ng2-pagination": "^2.0.1",
    "ng2-dragula": "^1.5.0",
    "reflect-metadata": "0.1.10",
    "rxjs": "5.4.0",
    "zone.js": "0.8.11"
  }
}

node_modules/ng2-cytoscape/package.json

{
  "_args": [
    [
      {
        "raw": "[email protected]",
        "scope": null,
        "escapedName": "ng2-cytoscape",
        "name": "ng2-cytoscape",
        "rawSpec": "0.4.0",
        "spec": "0.4.0",
        "type": "version"
      },
      "C:\\acm"
    ]
  ],
  "_from": "[email protected]",
  "_id": "[email protected]",
  "_inCache": true,
  "_location": "/ng2-cytoscape",
  "_nodeVersion": "8.1.2",
  "_npmOperationalInternal": {
    "host": "s3://npm-registry-packages",
    "tmp": "tmp/ng2-cytoscape-0.4.0.tgz_1504302187568_0.35979742906056345"
  },
  "_npmUser": {
    "name": "michaelknoch",
    "email": "[email protected]"
  },
  "_npmVersion": "4.2.0",
  "_phantomChildren": {
    "symbol-observable": "1.0.4"
  },
  "_requested": {
    "raw": "[email protected]",
    "scope": null,
    "escapedName": "ng2-cytoscape",
    "name": "ng2-cytoscape",
    "rawSpec": "0.4.0",
    "spec": "0.4.0",
    "type": "version"
  },
  "_requiredBy": [
    "/"
  ],
  "_resolved": "https://registry.npmjs.org/ng2-cytoscape/-/ng2-cytoscape-0.4.0.tgz",
  "_shasum": "620fb74dfa5efb071c9566970b229feb31efac91",
  "_shrinkwrap": null,
  "_spec": "[email protected]",
  "_where": "C:\\acm",
  "author": {
    "name": "Michael Knoch"
  },
  "bugs": {
    "url": "https://github.com/michaelknoch/ng2-cytoscape/issues"
  },
  "dependencies": {
    "@angular/common": "^4.3.5",
    "@angular/core": "^4.3.5",
    "@types/jquery": "^3.2.12",
    "cytoscape": "^2.7.24",
    "jquery": "^3.2.1",
    "rxjs": "^5.4.3",
    "zone.js": "^0.8.17"
  },
  "description": "## Example Usage",
  "devDependencies": {
    "typescript": "^2.2.1",
    "typings": "^1.5.0"
  },
  "directories": {},
  "dist": {
    "shasum": "620fb74dfa5efb071c9566970b229feb31efac91",
    "tarball": "https://registry.npmjs.org/ng2-cytoscape/-/ng2-cytoscape-0.4.0.tgz"
  },
  "gitHead": "98388ce46e3423cfe0b996691359c3313fe82f51",
  "homepage": "https://github.com/michaelknoch/ng2-cytoscape#readme",
  "license": "ISC",
  "main": "index.js",
  "maintainers": [
    {
      "name": "michaelknoch",
      "email": "[email protected]"
    }
  ],
  "name": "ng2-cytoscape",
  "optionalDependencies": {},
  "readme": "ERROR: No README data found!",
  "repository": {
    "type": "git",
    "url": "git+https://github.com/michaelknoch/ng2-cytoscape.git"
  },
  "scripts": {
    "tsc": "tsc"
  },
  "version": "0.4.0"
}

Thanks!

[tjb4578]

Hello Callmoon, I was wondering if you found a solution to this issue. I ran into the same problem when trying to run the code in the readme file!

[Callmoon]

Hey tjb,

it's not a real cytoscape solution but I switched to vis.js in combination with ng2-vis.

I just needed a nodegraph and there it worked like a charm (with clicking events and so on)