I am working on an Angular app and trying to integrate Cytoscape. I have installed Cystoscape and Types/cytoscape using npm, but I encountered an error when trying to import it into my project. To troubleshoot, I started a new test project before implementing it in my main app.
This is my app.module:
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { GraphComponent } from './graphCytoscape/graph.component';
import cytoscape = require('cytoscape');
@NgModule({
declarations: [
AppComponent,
GraphComponent,
],
imports: [
BrowserModule,
],
exports: [],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
This is my component:
import { Component, OnInit } from '@angular/core';
import cytoscape from 'cytoscape';
@Component({
selector: 'app-graph',
templateUrl: 'graph.component.html'
})
export class GraphComponent implements OnInit {
cy;
constructor() { }
ngOnInit() {
this.cy = cytoscape({
container: document.getElementById('cy'),
elements: [
{ data: { id: 'a' } },
{ data: { id: 'b' } },
{ data: {
id: {
id: 'ab',
source: 'a',
target: 'b',
}
}
},
]
});
}
}
The error message I received is:
ERROR in src/app/graphCytoscape/graph.component.ts(2,8): error TS2305: Module '"C:/Users/hudson.joubert/Documents/projects/cytoscopeJS/node_modules/@types/cytoscape/index"' has no
default export.
I checked the node_modules folder and found the necessary files, but I'm unsure how to resolve this issue.