Using Cytoscape JS with JHipster Angular

Question

I'm trying to use a plain javascript library (cytoscapejs) into my angular application that is generated using jhipster. I installed the library using npm and added the js file to my vendor.ts file. When I tried to use the library in my component, it is not available. When I inspect I see the library in the source under webpack, but that library is not loaded. I followed the instruction in the ReadMe as it is. Am I missing some additional steps?

Steps followed:

1. npm install cytoscape
2. added cytoscape.js to vendor.ts
3. added the following line in my component "declare const cytoscape: any;"
4. Tested the code.
5. "cytoscape is not defined"

But If I add cytoscape cdn link directly in my index.html it works. But I want jhipster vendor build to include cytoscapejs.

Is all the javascript libraries added to vendor.ts gets executed/linked?

Any help would be appreciated.

Answer 1

Cytoscape looks like a nice tool, I never used it before so I integrated it from scratch however it could be easier using one of the few Angular wrappers that exist for it.

The final github repository and the detailed instructions below which are similar to the ones from the Leaflet example from JHipster generated project's README.md with one difference about which bundle to import in vendor.ts and it could be the most important part Cytoscape JS can be used also in a Node app (I followed their doc which mentions webpack)

1. Install cytoscape using npm install --save-exact cytoscape
2. Install cytoscape types using npm install --save-dev --save-exact @types/cytoscape
3. Edit app/vendor.ts

/* ESM version of cytoscape for webpack */
import 'cytoscape/dist/cytoscape.esm.js';

4. Edit app/home/home.component.html to add a container for our graph

        <!-- cytoscape container -->
        <div id="cy"></div>

5. Edit app/home/home.scss to style our container with at least width and height

#cy {
  width: 400px;
  height: 200px;
}

6. Edit app/home/home.component.ts to define our graph by importing cytoscape module, then initializing it in ngOnInit()

import * as cytoscape from 'cytoscape';

@Component({
  selector: 'jhi-home',
  templateUrl: './home.component.html',
  styleUrls: ['home.scss'],
})
export class HomeComponent implements OnInit, OnDestroy {
  account: Account | null = null;
  authSubscription?: Subscription;
  cy: any;

  constructor(private accountService: AccountService, private loginModalService: LoginModalService) {}

  ngOnInit(): void {
    this.authSubscription = this.accountService.getAuthenticationState().subscribe(account => (this.account = account));
    this.cy = cytoscape({
      container: document.getElementById('cy'),
      elements: [
        { data: { id: 'a' } },
        { data: { id: 'b' } },
        {
          data: {
            id: 'ab',
            source: 'a',
            target: 'b'
          }
        }]
    });
  }

and here is the result: