What is the process for incorporating the jsnetworkx library into an ionic or angular 4 project?

When using any Ionic3 app service

import * as jsnx from 'jsnetworkx';

The output error message is:

Uncaught (in promise): Error: Cannot find module "lodash/lang/isPlainObject" Error: Cannot find module "lodash/lang/isPlainObject" at webpackMissingModule

I attempted to declare it in this manner:

import jsnx = require('jsnetworkx');

but encountered the following error:

 Uncaught (in promise): ReferenceError: jsnx is not defined ReferenceError: jsnx is not defined at

Both packages are currently installed:

...,
"jsnetworkx": "^0.3.4",
"lodash": "^4.17.4",
...

If anyone knows how to resolve this issue in Angular 4 or Ionic, please share your insights.

The library functions correctly when used with Node.js.

angulartypescriptionic-frameworklodashjsnetworkx

Answer №1

I got it to work by installing d3 v3 (which is a dependency of jsnetworkx) alongside jsnetworkx

npm install --save d3@^3.0.0
npm install --save jsnetworkx

Next, I loaded the d3 script in the angular-cli.json file

// angular-cli.json
scripts: [
    "../node_modules/d3/d3.min.js"
]

After that, I imported jsnetworkx into the component

// component.ts
import * as jsnx from 'jsnetworkx';

Now you can utilize it within that component

// component.ts
ngOnInit(){
    // basic jsnetworkx example
    let G = new jsnx.Graph();

    G.addWeightedEdgesFrom([[2,3,10]]);
    G.addStar([3,4,5,6], {weight: 5});
    G.addStar([2,1,0,-1], {weight: 3});

    jsnx.draw(G, {
        element: '#canvas',
        weighted: true,
        edgeStyle: {
            'stroke-width': 10
        }
    });
}

// component.html
<div id="canvas"></div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Tips for embedding text into a doughnut chart with primeng/chart.js

Currently tackling a primeng chart project involving the development of a doughnut chart within angular. The task at hand is to display text inside the doughnut chart, aligning with the designated design vision. Referencing the image below for visualizatio ...

javascriptnode.jsangularchart.jsprimeng

An Angular module downloaded from npm seems to be lacking the required @NgModule declaration

There seems to be a missing @NgModule and @Directive declarations in an NPM module, even though they exist in the source code on Github. This is causing an issue with importing a directive for databinding from an HTML attribute. I am attempting to utilize ...

angulartypescriptangular-module

"Every time you run mat sort, it works flawlessly once before encountering an

I am having an issue with a dynamic mat table that includes sorting functionality. dataSource: MatTableDataSource<MemberList>; @Output() walkthroughData: EventEmitter<number> = new EventEmitter(); @ViewChild(MatSort, { static: true }) sort ...

angulartypescriptsortingangular-materialangular-material2

Using a child element in a component to access a directive method: What steps should you follow?

I'm looking to develop a directive that can display or hide a component based on a condition validated in a service. Additionally, I want some child elements of the component to be able to execute a method of the directive. I would like to use somethi ...

angular

Is utilizing a single endpoint for the 'put' method sufficient to make updates to a document containing nested arrays?

[I've come across a previous unanswered question from last year, and I want to elaborate on it] Currently working on a REST api using node.js + mongoose (MEAN.io). In my model, there are nested arrays that I need to update via a put endpoint. The mai ...

angularjsnode.jsrestmongooselodash

The method of having two consecutive subscribe calls in Angular2 Http

Can the Subscribe method be called twice? I am attempting to create an API factory that stores data in the factory and allows different components to use that data for each AJAX call. The factory: export class api { result = []; constructor (p ...

typescriptangularangular2-http

Automatic type inference for functions in TypeScript with arguments

I am looking to define an interface with the following structure: interface CheckNActSetup<D, C> { defs: (event: Event) => D, context: (defs: D) => C; exec: (context: C) => any[]; when: ((context: C) => boolean)[]; } and implement it usi ...

typescript

Loading pages in real-time with parameters (Using Ionic 2 and Angular 2)

I'm in the process of developing a recipe app that features various categories which I want to load dynamically upon click. To retrieve recipes, I have a URL (HTTP GET request) that I intend to modify by adding a specific string based on the category ...

httpangularionic-frameworkionic2

Strategies for Implementing Responsive Design in Angular and Bootstrap Shopping Cart Apps to Deliver Custom Views on Mobile and Desktop Devices

Our shopping cart application utilizes Angular and Bootstrap. We are in need of routing different pages for mobile and desktop screens. Specifically, we want the /cart route to display a different page on mobile devices compared to desktops, taking into ...

angulartwitter-bootstrap-3

Eslint is back and it's cracking down on unused variables with no

I've configured eslint to alert me about unused variables rules: { '@typescript-eslint/no-unused-vars': ['error', { args: 'none' }], } Presently, I have a TypeScript class structured like this: import { User } from &ap ...

typescripteslint

Include baseHref in the sourceLocale configuration of Angular's internationalization feature

In order to set a baseHref for my default language in my Angular code (written in Portuguese), I need to make some adjustments. My goal is to use "ng serve --configuration=pt" to serve angular, and have the router display "http://localhost:4200/pt", simila ...

angular

Is there a method to incorporate a click event for the confirm button in the ElMessageBox UI element?

When I try to remove data from the table, I need a warning message to appear in the center of the screen first. The delete function is already set up, but I'm struggling to figure out how to implement a confirm button click event with ElMessageBox. I ...

javascripttypescriptvuejs3messageboxuielement

Placeholder for Images in Next.js with Typescript

Recently, I've been exploring Next.js with TypeScript and trying to utilize the image component with the placeholder prop. Unfortunately, I keep encountering an error in my implementation. Take a look at my code below: import bgSell from '../../ ...

reactjstypescriptnext.js

The option buttons will be displayed when the ng-change directive is added to the ion-toggle element

Greetings! I am relatively new to Ionic and mobile development. I am currently working on a simple reminder app and integrating the ion-toggle feature into it. Below is an excerpt of my code: <ion-item class="item-avatar" ng-repeat="med in meds.medicat ...

angularjsionic-framework

Unable to resolve host name for registry.npmjs.org on port 80

Hello everyone! I'm currently working on getting my angular library published on npm, but I seem to be running into an issue. When I try to log in, I encounter the following error: npm ERR! code EAI_AGAIN npm ERR! errno EAI_AGAIN npm ERR! request to h ...

node.jsangularnpmproxy

Inserting information into an array: Access the final index consistently with TypeScript

I am interested in dynamically creating a table by allocating it, with the variable nbrBoules: boules:Boule :[] boule:Boule; Boule{id,poids} Method(){ for (var _i = 0; _i < this.nbrBoules; _i++) { this.boule.id = _i; alert(_i); this ...

javascripttypescript

Calculating the Angular Sum of Multiple Input Fields

There are multiple input fields on this page. <div class="form-group w-100"> <label class="col-md-3 text-left" for="">Box 2</label> <input class="form-control ml-2 mr-2" [value]="MenuBox2" [style.backgrou ...

angularangular-forms

Typescript issue when a value is possibly a function or null

I have defined a type called StateProps with the following properties type StateProps = { isPending: boolean, asyncFn: (...args: any[]) => void | null } To initialize, I set up an initialState variable where the asyncFn property is initially s ...

typescript

Ways to manipulate the placement of angular material 2 sidenav content to the bottom

I have been experimenting with various methods in CSS to override the existing side nav component in Angular Material 2. mat-sidenav-container { background: white; bottom: 0px !important; /* <---- no success */ } mat-sidenav { width: 300px; ...

cssangularangular-material2

Ways to conceal a fabric button

Is there a way to hide my Material button properly? The button appears grey and works fine: <button mat-raised-button class="mat-primary" (click)="deleteClick()" [disabled]="data.createMode"> <mat-icon>delete_forever</mat-icon>DELET ...

angularangular-materialmaterial-ui