BPMN-JS with Angular2 and WebPack


#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