如何在Angular 9中集成Camunda Modeler并解决连接器显示问题

一、解决isAny导出错误的核心方案 #

错误根源是依赖版本不兼容：bpmn-js-connectors-extension@0.4.6依赖bpmn-js的isAny方法，但你当前使用的bpmn-js@6.3.4并未导出该方法。推荐以下两种解决方式：

1. 升级依赖到兼容版本 #

调整依赖版本，确保各包版本匹配：

• bpmn-js升级到^7.0.0（推荐7.3.0，经测试兼容连接器扩展）
• bpmn-js-properties-panel对应升级到^0.39.0
• camunda-bpmn-moddle升级到^7.1.0

执行安装命令：

npm install bpmn-js@7.3.0 bpmn-js-connectors-extension@0.4.6 bpmn-js-properties-panel@0.39.0 camunda-bpmn-moddle@7.1.0 --save

2. 手动补全isAny方法（仅临时适配旧版本） #

如果无法升级bpmn-js，可手动实现isAny并通过webpack alias替换引用（维护成本高，不推荐长期使用）：

• 在项目中创建src/utils/model-util.ts：

export function isAny(element: any, types: string[]) {
  return types.some(type => element.$instanceOf(type));
}

• 借助@angular-builders/custom-webpack添加webpack alias，在angular.json的build配置中修改：

"builder": "@angular-builders/custom-webpack:browser",
"options": {
  "customWebpackConfig": {
    "path": "./webpack.config.js"
  }
}

• 创建webpack.config.js：

module.exports = {
  resolve: {
    alias: {
      'bpmn-js/lib/util/ModelUtil': require.resolve('./src/utils/model-util.ts')
    }
  }
};

二、Angular 9集成Camunda建模环境的完整流程 #

1. 配置静态资源 #

在angular.json的assets数组中添加bpmn字体资源，避免图标显示异常：

"assets": [
  "src/favicon.ico",
  "src/assets",
  {
    "glob": "**/*",
    "input": "./node_modules/bpmn-js/dist/assets/bpmn-font",
    "output": "/assets/bpmn-font/"
  }
]

2. 创建BPMN编辑器组件 #

TypeScript代码（bpmn-editor.component.ts）

import { Component, OnInit, ElementRef, ViewChild } from '@angular/core';
import BpmnModeler from 'bpmn-js/lib/Modeler';
import { CamundaPlatformPropertiesProvider, CamundaPlatformPropertiesPanelModule } from 'bpmn-js-properties-panel';
import connectorsExtensionModule from 'bpmn-js-connectors-extension';
import camundaModdleDescriptor from 'camunda-bpmn-moddle/resources/camunda.json';

@Component({
  selector: 'app-bpmn-editor',
  templateUrl: './bpmn-editor.component.html',
  styleUrls: ['./bpmn-editor.component.scss']
})
export class BpmnEditorComponent implements OnInit {
  @ViewChild('canvas') canvasRef!: ElementRef;
  private bpmnModeler!: BpmnModeler;

  ngOnInit(): void {
    this.initModeler();
  }

  private initModeler(): void {
    this.bpmnModeler = new BpmnModeler({
      container: this.canvasRef.nativeElement,
      propertiesPanel: {
        parent: '#properties-panel'
      },
      additionalModules: [
        CamundaPlatformPropertiesPanelModule,
        connectorsExtensionModule,
        {
          __init__: ['propertiesProvider'],
          propertiesProvider: ['type', CamundaPlatformPropertiesProvider]
        }
      ],
      moddleExtensions: {
        camunda: camundaModdleDescriptor
      }
    });

    // 加载默认空流程
    const emptyDiagram = `<?xml version="1.0" encoding="UTF-8"?>
<bpmn:definitions xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
                  xmlns:bpmn="http://www.omg.org/spec/BPMN/20100524/MODEL"
                  xmlns:bpmndi="http://www.omg.org/spec/BPMN/20100524/DI"
                  xmlns:dc="http://www.omg.org/spec/DD/20100524/DC"
                  id="Definitions_1"
                  targetNamespace="http://bpmn.io/schema/bpmn">
  <bpmn:process id="Process_1" isExecutable="true"></bpmn:process>
  <bpmndi:BPMNDiagram id="BPMNDiagram_1">
    <bpmndi:BPMNPlane id="BPMNPlane_1" bpmnElement="Process_1"></bpmndi:BPMNPlane>
  </bpmndi:BPMNDiagram>
</bpmn:definitions>`;

    this.bpmnModeler.importXML(emptyDiagram, (err: Error | null) => {
      if (err) {
        console.error('流程加载失败:', err);
      } else {
        console.log('流程加载成功');
      }
    });
  }
}

模板文件（bpmn-editor.component.html）

<div class="bpmn-editor-wrapper">
  <div #canvas class="bpmn-canvas"></div>
  <div id="properties-panel" class="bpmn-properties-panel"></div>
</div>

样式文件（bpmn-editor.component.scss）

.bpmn-editor-wrapper {
  display: flex;
  height: 100vh;
  width: 100%;

  .bpmn-canvas {
    flex: 1;
    background-color: #f8f9fa;
  }

  .bpmn-properties-panel {
    width: 320px;
    background-color: #ffffff;
    border-left: 1px solid #dee2e6;
    overflow-y: auto;
  }
}

// 引入官方样式
@import '~bpmn-js/dist/assets/diagram-js.css';
@import '~bpmn-js/dist/assets/bpmn-font/css/bpmn.css';
@import '~bpmn-js-properties-panel/dist/assets/properties-panel.css';
@import '~bpmn-js-connectors-extension/dist/assets/connectors.css';

3. 验证功能 #

启动Angular项目后，打开编辑器页面：

• 拖拽流程节点到画布，右键可添加连接器
• 选中节点后，属性面板会显示Camunda连接器配置项，与在线Modeler功能一致

三、注意事项 #

• Angular 9兼容性：确保所有依赖包支持ES5/ES6标准，避免编译报错
• 样式冲突：若项目有全局样式，需调整bpmn相关样式的优先级
• 性能优化：大型流程场景下，可延迟加载bpmn-js模块以减少初始加载时间

内容的提问来源于stack exchange，提问作者thamali