I’m actually developing an Angular 5 web application and want to integrate the Viewer (Modeler is not needed) of the bpmn-js project.
For a first test I have created a standalone angular project inspired by the project of narve.
That project is using an older version 0.30.x. I want to use the current version, if possible. You can find my project and more details (readme.md) here:
Following error occurs:
AppComponent.html:1 ERROR TypeError: bpmn_js_1.Viewer is not a constructor
at BpmnViewerComponent.ngOnInit (bpmn-viewer.component.ts:20)
at checkAndUpdateDirectiveInline (core.js:12411)
at checkAndUpdateNodeInline (core.js:13935)
at checkAndUpdateNode (core.js:13878)
at debugCheckAndUpdateNode (core.js:14771)
at debugCheckDirectivesFn (core.js:14712)
at Object.eval [as updateDirectives] (AppComponent.html:8)
at Object.debugUpdateDirectives [as updateDirectives] (core.js:14697)
at checkAndUpdateView (core.js:13844)
at callViewAction (core.js:14195)
If I change the version in narve’s project to the latest one, the same error occurs.
Actually I have no idea, what the problem is. Hopefully someone can help me?
when you plan to update the bpmn-js version it is advised to check the change log, if any breaking changes were made. Your bug is caused by the fact that we converted the code base to ES modules with 1.0.
Hi,
you are right. I have seen the changelog today and also found the breaking change. Perhaps you can give me a link to an example? Actually I am not sure what to do. That will be great!
The import is like it is described in the “migrating to ES modules” article, I think. Using the chrome developer tools, I have found under webpack://…node_modules/bpmn-js/lib the Viewer.js
....
*
* // extend the viewer
* var bpmnViewer = new Viewer({ additionalModules: [ extensionModule ] });
* bpmnViewer.importXML(...);
* ```
*
* @param {Object} [options] configuration options to pass to the viewer
* @param {DOMElement} [options.container] the container to render the viewer in, defaults to body.
* @param {String|Number} [options.width] the width of the viewer
* @param {String|Number} [options.height] the height of the viewer
* @param {Object} [options.moddleExtensions] extension packages to provide
* @param {Array<didi.Module>} [options.modules] a list of modules to override the default modules
* @param {Array<didi.Module>} [options.additionalModules] a list of modules to use with the default modules
*/
export default function Viewer(options) {
options = assign({}, DEFAULT_OPTIONS, options);
this._moddle = this._createModdle(options);
this._container = this._createContainer(options);
/* <project-logo> */
addProjectLogo(this._container);
/* </project-logo> */
this._init(this._container, this._moddle, options);
}
....
/* </project-logo> */
//////////////////
// WEBPACK FOOTER
// /......../angular-bpmn-js-poc/ng-bpmnjs-viewer/node_modules/bpmn-js/lib/Viewer.js
// module id = ../../../../bpmn-js/lib/Viewer.js
// module chunks = vendor
I’m not sure how to use/call the “export default function Viewer”
If I use
var BpmnJS = require('bpmn-js').default;
the typescript compiler fails with:
90% chunk assets processingERROR in src/app/bpm/bpmn-viewer/bpmn-viewer.component.ts(22,18): error TS2304: Cannot find name 'require'.
When I will use the ES6 style/syntax, how should I get a working Viewer instance?
