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ā¦
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.
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?
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>
</div>
<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>
<pre></pre>
</div>
</div>
</div>
<div class="canvas" id="js-canvas"></div>
<div id="js-properties-panel"></div>
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?
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?
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.
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.
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.
