BPMN-JS with Angular2 and WebPack

Developers
43

Hi! Thanks for sharing your experience. Unfortunately I had the same negative experience. I spent an hour or two trying to upgrade to Angular4/webpack2, but I ran into problems. This was in April/May I think.

I feel that AngularJS and Webpack2 still are a bit immature and poorly documented. For me the upgrade was not important, so I dropped it. I will probably try again sometime later. If I succeed I will post it here and/or update the Github repo.

Please let me know if you do manage to upgrade!

44

Hi Narve. Thank you for your update. sure i will inform if i will run it with the upgrade version.

45

Hello Narve, thank you so much for the example on how to import the bpmn modeler and viewer to angular.
I am trying now to implement a drag and click on the custom elements. I tried following the bpmn-js-examples sample, but i am getting errors and itā€™s not working.
I donā€™t understand why itā€™s not.
And i would like to know if you have any idea on how i could make it work?
I keep getting errors where some things are undefined and i assume this is due to Angular being asynchronous. But Iā€™m not sure.

46

Hi fatima,

I canā€™t tell what is wrong without more details.

Did you first try running my angular-example-code, unmodified, just to make sure that your setup is correct?

47

Hello Narve, the drag and drop is working now for custom elements. But thank you for your answer.

48

hi guys,
Iā€™m using the latest angular version 4.3.2 with webpack 2.4.1, and I want to integrate bpmn-js to my project.
I tried the latest version of bpmn.js which is now 0.21.0

my component:

import { Component } from '@angular/core';

const modeler = require("bpmn-js/lib/Modeler.js");
var BpmnViewer = require('bpmn-js');

const containerRef = '#js-canvas';

@Component({
    selector: 'home',
    template: `
    <div id="js-canvas">
    </div>
    `,
    styleUrls: ['./home.component.css']
})
export class HomeComponent {
    modeler: any;
    constructor() {
        // the following is from narve/ang2-bpmnjs
        this.modeler = new modeler({
            container: containerRef,
        });
        // the following is from the official docs
        var viewer = new BpmnViewer({ container: containerRef});
    }
}

but it seems something is wrong with my code or config,
the error message is:

TypeError: Cannot read property 'appendChild' of null
    at Modeler.Viewer._createContainer (http://localhost:3000/main.bundle.js:65282:9)
    at Modeler.Viewer (http://localhost:3000/main.bundle.js:64978:25)
    at new Modeler (http://localhost:3000/main.bundle.js:137699:10)
    at new HomeComponent (http://localhost:3000/main.bundle.js:64771:24)
    at createClass (http://localhost:3000/main.bundle.js:11288:26)
    at createDirectiveInstance (http://localhost:3000/main.bundle.js:11122:37)
    at createViewNodes (http://localhost:3000/main.bundle.js:12558:49)
    at createRootView (http://localhost:3000/main.bundle.js:12453:5)

can anyone help me config my project for bpmn.js ?

49

There are so many ways this could happen that it is impossible to track down without the complete source project, and even then it is hard.

Just a wild shot: Try implementing OnInit and moving your code from the constructor to a ngOnInit instance method. When executing the constructor code the html element #canvas havenā€™t been added to the DOM yet.

50

Hi All,

Is any of your angular4 and webpack 2 worked fine. if worked can you help with some highlights , i wanted to migrate to angular4 and webpack2.

51

Please do not necrobump old topics. Instead link to this thread from new topic.

Give your new topic an up-to-date concise description of what you would like to achieve and why.

52