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.
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.
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 ?
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.