Using bpmn-js with Typescript and npm

@vladimirs.katusenoks
So to ‘message’ a user directly, you have to be given permissions to do so? If so, can you grant those to me? Thanks.

@fbo I’d like to use bpmn-io viewer from an Angular 2 app as well. Could you share your results on github or describe what you had to do to get it working?

Since the world is moving from bower to npm, it would be best to have whatever you got via bower, retrievable via npm (which also simplifies build processes). Anyone at camunda interested in publishing that?

1 Like

@dukekujo: I’m assuming you’re also writing typescript. Here’s a very short outline of what I did:

  • Started an angular2 app based on npm
  • Installed bower via npm
  • Pulled bpmn-js and its dependencies with bower
  • Added the (animated-)viewer.js to the html

On the typescript level, these are the steps:

  • Extend the ts wrapper for “window” like so: interface Window { BpmnJS: any; }
  • In your class logic, create the viewer “object”: this.myViewer = new window.BpmnJS({ container: '#canvas' });, where “canvas” is the name of your html container for the viewer

The above solution is resolved at runtime and will give you compiler warnings. I’m optimistic there is a better way, but I am fine with having the above working right now.

1 Like

Hi, I want to use bpmn-js with React and did some progress, but actually have problems with the *.d.ts file I think, would you please share the d.ts file. my email is mkarimpour@gmail.
I get the error:

bpmn_js_1.Viewer is not a constructor

in line

BpmnJSComponent.prototype.componentDidMount = function () {
this.modeler = new bpmn_js_1.Viewer({ container: this.divArea }); <======
this.modeler.importXML(’’, this.handleOnModelError);
};

Best Regards
Mehdy

Hi MehdyKarimpour,

Do u have any luck with using bpmn-js modeler with React?

Can you share your findings or code snippets.

Thanks

Hello everyone,

I’m developing an application (Angular2/Typescript) that requires the Viewer, Moduler and properties panel integration but the problem is when i use the “standalone” approach, there’s already an know-issue about using moduler + properties, but in meanwhile i’d like to import only the viewer, my question is:

Are you planning at least to release an @Typings definition for the bpmn-js or either converting it to ES2015?

It doesn’t seen realy a good manner to use the mix of javascript and typescript, is there any solution you guys found on that?

Best Regards
Raphael

Are you planning at least to release an @Typings definition for the bpmn-js or either converting it to ES2015?

We do not plan to do that. Contributions are welcome.

Hi @raphaellsmoraes,

I believe I’ve got it to work, without typings. What was your problem?

See BPMN-JS with Angular2 and WebPack.