Using bpmn-js with Typescript and npm

Hello there,

I am currently building and angular2 application (TypeScript) and want to embed the bpmn viewer, where I have hit a hard wall. I should say I have quite some experience writing software, but I am completely new to web development and lack a lot of the necessary technical background that I seem to need in order to solve this on my own.

What I ultimately want is to have a Viewer reference on typescript level that I can work with. But these are my conceptual problems:

  • I cannot import the library on code level. I installed it via npm, but there are no type definitions (d.ts file) and so the usual workarounds to “import” the library on typescript level fail. I can’t just declare a var : any aimed at Viewer from Viewer.js, because typescript cannot handle the “require” statements contained therein. Is there anyone who has ever done this?
  • I do not understand the structure of the library as it is. The code example (bpmn-js-examples/simple-commonjs at master · bpmn-io/bpmn-js-examples · GitHub) creates a “BpmnViewer” handle via “var BpmnViewer = require(‘bpmn-js’);”. Does this refer to the stuff defined in Viewer.js? What kind of magic does “require” wield at this point? How can I mimick this behaviour by hand?

Sorry for such low-level questions, but being able to use bpmn-js in upcoming angular2 projects would certainly be quite cool… :slight_smile:

1 Like

Hi Fbo,

Please find the attached URL for your reference.Please follow the same steps to generate bundled.js file using Node.js and import bundled.js in your web application.


Ok, after spending another day sorting my thoughts and understanding the structure and technicalities of the problem a bit better, let me rephrase:

This is what I’m doing right now:

  • I followed the angular2 tutorials ( describes the general setup)
  • npm is used as package manager, as well as to provide a live development environment where both the typescript compiler (tsc) and the extra server are watching for file changes
  • I installed bpmn-js using npm

What my problem is:

  • I cannot simply include and use e.g. the Viewer.js, since it contains require statements

What I need / want:

  • Apparently I should use browserify on the entire bpmn-js node_module. Is there a working example of how to do that and include that in my build setup?


Hi Fbo,

Yes i have one sample web application.Please share your email Id .I will send war file and the commands used to generate bundled.js through Node.js.


Hi @prameela,

seems you beat me to it by two minutes. Thanks for your answer!

How can I send you a private message in here?


Hi Fbo,

I Don’t know how to send private messages here.I am unable to attach text files and war files here so i asked your email.

Please use below code for your reference.

<div class="message intro">
  <div class="note">
    Drop BPMN diagram from your desktop or <a id="js-create-diagram" href>create a new diagram</a> to get started.

<div class="message error">
  <div class="note">
    <p>Ooops, we could not display the BPMN 2.0 diagram.</p>

    <div class="details">
      <span>cause of the problem</span>

<div class="canvas" id="js-canvas"></div>
<div id="js-properties-panel"></div>


and include bundled.js in your JSP/HTML like this

               <script src="resources/js/minifiedfile.js"></script>

Thank you! I am not so thrilled about putting my email address here… maybe you could put the files somewhere on dropbox for an hour and share the link here?

For personal messages you can click on the avatar (The round symbol) in the web frontend of the forum and select ‘message’.

Cheers, Ingo

Hello Ingo,

yes, that seems straight-forward enough, but I can’t see any message option anywhere. Are there different privilege levels for forum users? Am I a low-level minion?

Hi Fbo,

Please find the attached screenshot.


Maybe you havn’t logged in before?

I realize this discussion has gone off the rails a bit, but I just have to defend my honor now:

I seem to be logged in, I can post… ?

N.B. @fbo Can now send messages.

Unfortunately, my problem is still not solved.
I downloaded the commonjs pizza example ( and took a look, however I do not see a path how to apply the strategy to my situation.

The problem is that my application is written in typescript (angular2), and everything is a bit different:
All javascript code is in my case generated via tsc, and I can’t simply “browserify” my entire app like it is done in the example. Well, probably I could, but as far as I see this would collide with the angular2 way of setting up the application structure. Is there a way to browserify the bpmn-js library itself? Then I could treat it at least hackishly as a static JS library and simply grab the stuff I need (hopefully…)

Has anyone ever done this? When I attempt to do that I end up with a 30k lines .js containing dozens of conflicting module.exports statements.


1 Like

Is something like bower version of the library is what you are looking for?



exactly. Tried the bower approach today and got it working. My build system is a horrific mix of npm and bower now, but I’ll deal with that later and pretend for now that all is well. Learned a lot about the wonderful world of javascript and typescript, anyway.

Thanks for your help!

Hi Vladimir.

I had a look at your suggested approach with
BpmnViewer is not found, though Viewer is found. Will they be the same?


Hi Bard,

Not sure what exactly do you mean regarding the Viewer…
Please have a look on this bower example.

You can use this simple web server to run it:

# clone example repo & go to the example root directory
npm i -g bower
npm i -g http-server
bower i

Then just open to see an example.


Thank you Vladimir!

Yes it did work. :slight_smile:

You actually fixed my main problem, how to show the Viewer in an Angular app.
What I did was to cut´n paste the components from the Simple Bower example into a fresh Angular-Seed project.

I´ve created a public project on in case someone else run into Angular issues.

Thanks again.

1 Like