Angular集成@jsplumb/browser-ui提示getInstance不是函数如何解决？

云原生阿岚

2026-10-2

Angular中@jsplumb/browser-ui调用getInstance报错解决方案

报错jsPlumbBrowserUI.getInstance is not a function的核心原因是@jsplumb/browser-ui 5.x及以上版本调整了API导出规则：废弃了全局挂载的getInstance方法，改为单独导出newInstance方法用于创建实例，且原全量导入的写法不再兼容新API。

正确集成步骤

步骤1：调整导入语句

不要使用全量导入，直接引入newInstance方法：

import { newInstance } from '@jsplumb/browser-ui'

步骤2：在正确的生命周期初始化实例

Angular中DOM元素渲染完成后才会填充ViewChild绑定的节点，因此初始化必须放在ngAfterViewInit钩子中，不能在ngOnInit里执行：

import { Component, ViewChild, AfterViewInit, ElementRef } from '@angular/core';
import { newInstance } from '@jsplumb/browser-ui';

@Component({
  selector: 'app-flow-chart',
  template: `<div #flowContainer class="flow-container"></div>`,
  styles: [`.flow-container { width: 100%; height: 800px; position: relative; }`]
})
export class FlowChartComponent implements AfterViewInit {
  // 绑定容器DOM节点
  @ViewChild('flowContainer') flowContainer!: ElementRef<HTMLDivElement>;
  // 存储jsPlumb实例
  private jsPlumbIns: any;

  ngAfterViewInit(): void {
    // 初始化实例
    this.jsPlumbIns = newInstance({
      container: this.flowContainer.nativeElement,
      // 其他全局配置可以直接在这里加，比如连线样式、锚点规则等
      paintStyle: { stroke: '#456', strokeWidth: 2 },
      anchors: ['Right', 'Left']
    })
  }
}

兼容性说明

如果你使用的是5.x以下的旧版本@jsplumb/browser-ui，可以用默认导入的写法兼容原有逻辑：

// 仅适用于5.x以下版本
import jsPlumb from '@jsplumb/browser-ui'

ngAfterViewInit() {
  this.jsPlumbIns = jsPlumb.getInstance({
    container: this.flowContainer.nativeElement
  })
}