组织结构图在本地工作，在部署中不起作用：jQuery(...).orgchart is not a function答案

【问题标题】：Org Chart work locally and didn't work in deploy: jQuery(...).orgchart is not a function组织结构图在本地工作，在部署中不起作用：jQuery(...).orgchart is not a function
【发布时间】：2023-03-22 14:00:01
【问题描述】：

我正在使用名为 orgchart 的 Angular 库制作组织结构图。代码源在我的机器上本地工作，当我们在 nginx 服务器上部署代码时，我们得到这个错误链接到 jQuery。

这是我的代码：

>  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 链接：https://github.com/dabeng/OrgChart.

部署服务器：nginx。

否则，相同的工作环境：角 CLI：8.3.4 节点：10.16.3 npm : 6.7.0

提前谢谢你。

【问题讨论】：

如何将 Orgchart 加载/包含到您的项目中？
我刚刚安装了"orgchart": "^2.1.9",并在angular.json中添加了"node_modules/orgchart/dist/css/jquery.orgchart.min.css", && ` "node_modules/orgchart/dist/js/jquery.orgchart.min.js",`
npm，链接，...？
对不起，我更新了我的评论，你可以再看到它
嗯...好的。也许使用 ES6 版本而不是 jQuery 会更好。所以你可以直接在你的组件中导入它并在你的模板中使用它。不需要jquery。或者它不是一个完整的 Angular 应用程序，您需要 jquery 版本？

标签： javascript jquery angular7 orgchart

【解决方案1】：

我在 github: brandt-codes/orgchart-angular 上创建了一个小型 Angular 包装器。随意使用;-) 将在接下来的几天内更新和美化这个小项目。

最小的部分： 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'
    });
  }
}

和 HTML：

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

PS：我使用了orgchart.js 包（不是orgchart）。

【讨论】：