Org Chart work locally and didn't work in deploy: jQuery(...).orgchart is not a function

Question

I'm working on organizational chart with angular library named orgchart. The code source work locally on my machine and when we deploy the code on nginx server we got this error linked to jQuery.

This is my code :

>  organigramme.forEach((collab, i) => {
>      jQuery('#chart-container').append(jQuery('<div id="chart_'+i+'"></div>')); 
>      const chart = jQuery('#chart_'+i).orgchart({
>       'data' : collab,
>       'nodeContent': 'post',

Console error on deployment

Github link : https://github.com/dabeng/OrgChart.

Deployment server : nginx.

Otherwise, same work environment : Angular CLI: 8.3.4 Node: 10.16.3 npm : 6.7.0

Thank you in advance.

Answer 1

I created a small Angular wrapper on my github: brandt-codes/orgchart-angular. Feel free to use ;-) Will update and beatify this small project in the next days.

---

The minimal part: TS:

import { Component, OnInit } from '@angular/core';
import OrgChart from 'orgchart.js/src/orgchart.js'

@Component({
  selector: 'app-orgchart',
  templateUrl: './orgchart.component.html',
  styleUrls: ['./orgchart.component.scss']
})
export class OrgchartComponent implements OnInit {
  private datascource = {
    'name': 'Lao Lao',
    'title': 'general manager',
    'children': [
      { 'name': 'Bo Miao', 'title': 'department manager' },
      { 'name': 'Su Miao', 'title': 'department manager',
        'children': [
          { 'name': 'Tie Hua', 'title': 'senior engineer' },
          { 'name': 'Hei Hei', 'title': 'senior engineer',
            'children': [
              { 'name': 'Pang Pang', 'title': 'engineer' },
              { 'name': 'Xiang Xiang', 'title': 'UE engineer' }
            ]
          }
        ]
      },
      { 'name': 'Yu Jie', 'title': 'department manager' },
      { 'name': 'Yu Li', 'title': 'department manager' },
      { 'name': 'Hong Miao', 'title': 'department manager' },
      { 'name': 'Yu Wei', 'title': 'department manager' },
      { 'name': 'Chun Miao', 'title': 'department manager' },
      { 'name': 'Yu Tie', 'title': 'department manager' }
    ]
  };

  public orgchartFromData: OrgChart;

  constructor() { }

  ngOnInit() {
   this.orgchartFromData = new OrgChart({
      'chartContainer': '#chartContainerData',
      'data' : this.datascource,
      'depth': 2,
      'nodeContent': 'title'
    });
  }
}

and the HTML:

<div id="chartContainerData"></div>

PS: I used the orgchart.js package (not the orgchart).