A Question about how to translate the strings displayed in bpmn-js to another language

Developers Modeler
1

Hello Everyone,
I want to translate the strings displayed in bpmn-js to another language.I visited the official website and find the following method.
Bpmn-js&Angular
bpmn-js i18n Example
But I cannot translate successfully when I use the following code.

import * as BpmnJS from 'bpmn-js/dist/bpmn-modeler.production.min.js';

Thanks in advance,
Xue

2

This will not magically translate your application. Do you have anything more to be shared from your setup?

3

I want to integrate BPMN with my angular project.I have tried to use the following code to introduce dependencies.

import * as BpmnJS from 'bpmn-js/lib/BaseModeler';

But an error will occur at the console in the foreground.

ProcessdesignComponent.html:3 ERROR TypeError: bpmn_js_lib_BaseModeler__WEBPACK_IMPORTED_MODULE_4__ is not a constructor
    at DiagramComponent.push../src/app/mom/moam/workflow/processdesign/diagram/diagram.component.ts.DiagramComponent.ngAfterViewInit (diagram.component.ts:55)
    at callProviderLifecycles (core.js:21414)
    at callElementProvidersLifecycles (core.js:21388)
    at callLifecycleHooksChildrenFirst (core.js:21378)
    at checkAndUpdateView (core.js:29448)
    at callViewAction (core.js:29680)
    at execComponentViewsAction (core.js:29622)
    at checkAndUpdateView (core.js:29445)
    at callViewAction (core.js:29680)
    at execEmbeddedViewsAction (core.js:29643)

diagram.component.ts

ngAfterViewInit() {
    /*let customTranslateModule = {
      translate: [ 'value', customTranslate ]
    };*/
    this.bpmnJS = new BpmnJS({
      container: '#canvas',
      propertiesPanel: {
        parent: '#properties'
      },
      additionalModules: [
        propertiesProvider,
        propertiesPanelModule
      ],
      moddleExtensions: {
        // camunda: camundaModdleDescriptor
        camunda: CamundaModdleDescriptor
      }});
    this.bpmnJS.attachTo(this.el.nativeElement);
    /*this.bpmnJS.on('import.done', ({error}) => {
      if (!error) {
        this.bpmnJS.get('canvas').zoom('fit-viewport');
      }
    });*/
    this.loadUrl(this.url);
  }
loadUrl(url: string) {
    /*return (
      this.http.get(url, {responseType: 'text'}).subscribe(xml => {
        this.bpmnJS.importXML(xml, function(err, warnings) {
        });
      })
    );*/
    this.http.get(url, {responseType: 'text'}).subscribe(xml => {
      this.bpmnJS.importXML(xml, (err)=> {
        if (err) {
          console.error(err);
        }
        this.bpmnJS.get('canvas').zoom('fit-viewport');
      });
    });
  }

diagram.component.html

<div #ref class="diagram-container" id="canvas"></div>
  <div class="properties-panel" id="properties"></div>
4

Sorry, I made a low-level mistake

import * as BpmnJS from 'bpmn-js/lib/Modeler';

This is the latest code.

ngAfterViewInit() {
    let customTranslateModule = {
      translate: [ 'value', customTranslate ]
    };
    this.bpmnJS = new BpmnModeler({
      container: '#canvas',
      propertiesPanel: {
        parent: '#properties'
      },
      additionalModules: [
        propertiesProvider,
        propertiesPanelModule,
        customTranslateModule
      ],
      moddleExtensions: {
        // camunda: camundaModdleDescriptor
        camunda: CamundaModdleDescriptor
      }});
    // this.bpmnJS.attachTo(this.el.nativeElement);
    /*this.bpmnJS.on('import.done', ({error}) => {
      if (!error) {
        this.bpmnJS.get('canvas').zoom('fit-viewport');
      }
    });*/
    this.loadUrl(this.url);
  }

EventBus.js:380 TypeError: translate is not a function
    at PaletteProvider.push../node_modules/bpmn-js/lib/features/palette/PaletteProvider.js.PaletteProvider.getPaletteEntries (PaletteProvider.js:104)
    at addPaletteEntries (Palette.js:448)
    at Array.reduce (<anonymous>)
    at Palette.push../node_modules/diagram-js/lib/features/palette/Palette.js.Palette.getEntries (Palette.js:105)
    at Palette.push../node_modules/diagram-js/lib/features/palette/Palette.js.Palette._update (Palette.js:222)
    at Palette.push../node_modules/diagram-js/lib/features/palette/Palette.js.Palette._rebuild (Palette.js:124)
    at Palette.js:53
    at invokeFunction (EventBus.js:514)
    at EventBus.push../node_modules/diagram-js/lib/core/EventBus.js.EventBus._invokeListener (EventBus.js:365)
    at EventBus.push../node_modules/diagram-js/lib/core/EventBus.js.EventBus._invokeListeners (EventBus.js:350)
5

I found the problem!!!This way of introducing dependencies cannot take effect.

import * as customTranslate from "../bpmn-custom/customTranslate";

The correct code is as follows.

import customTranslate from "../bpmn-custom/customTranslate";

Sincere thanks,
Xue