Need help to get running an Angular 5 project using bpmn-js v1.2.1


#1

Hey folks,

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?

Cheers!
Christian


#2

Hi @Chris81T,

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.


#3

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!


#4

We’re not sure either, as we don’t know how Angular 5 / especially the CLI bundles ES modules.

AppComponent.html:1 ERROR TypeError: bpmn_js_1.Viewer is not a constructor

Reading through the error it looks like your application contains code such as the following:

var BpmnJS = require('bpmn-js');

With ES modules and default exports in place this won’t work anymore.

You must now access the default exports via the default option when consuming ES modules via CommonJS:

var BpmnJS = require('bpmn-js').default;

Read more about it in our blog on migrating to ES modules.


#5

Hey Nikku,
thanks for your response.

Here is my (not working) code:

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

import {Viewer} from 'bpmn-js/lib/Viewer.js';

@Component({
  selector: 'bpmn-viewer',
  templateUrl: './bpmn-viewer.component.html',
  styleUrls: ['./bpmn-viewer.component.scss']
})
export class BpmnViewerComponent implements OnInit {

  bpmnViewer: any;

  constructor() {

  }

  ngOnInit() {

    console.log('Viewer = ', Viewer);

    this.bpmnViewer = new Viewer({
      container: '#viewer'
    });
  }

}

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?


#6

If you’re already using TypeScript / ES modules you must import the Viewer like this:

import Viewer from 'bpmn-js/lib/Viewer';

#7

Thanks for your response, again!

I have changed my

import {Viewer} from 'bpmn-js/lib/Viewer.js';

to

import Viewer from 'bpmn-js/lib/Viewer';

here the full code snippet:

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

import Viewer from 'bpmn-js/lib/Viewer';

@Component({
  selector: 'bpmn-viewer',
  templateUrl: './bpmn-viewer.component.html',
  styleUrls: ['./bpmn-viewer.component.scss']
})
export class BpmnViewerComponent implements OnInit {

  bpmnViewer: any;

  constructor() {

  }

  ngOnInit() {

    console.log('Viewer = ', Viewer);

    this.bpmnViewer = new Viewer({
      container: '#viewer'
    });
  }

}

Instead of getting an error message for missing constructor I get following error:

Viewer =  ƒ Viewer(options) {

  options = Object(__WEBPACK_IMPORTED_MODULE_0_min_dash__["a" /* assign */])({}, DEFAULT_OPTIONS, options);

  this._moddle = this._createModdle(options);

  this._container = this…
AppComponent.html:1 ERROR TypeError: Cannot read property 'appendChild' of null
    at Viewer.attachTo (Viewer.js:386)
    at Viewer._init (Viewer.js:433)
    at new Viewer (Viewer.js:130)
    at BpmnViewerComponent.ngOnInit (bpmn-viewer.component.ts:22)
    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)
View_AppComponent_0 @ AppComponent.html:1
proxyClass @ compiler.js:14659
DebugContext_.logError @ core.js:15038
ErrorHandler.handleError @ core.js:1510
(anonymous) @ core.js:5925
ZoneDelegate.invoke @ zone.js:388
Zone.run @ zone.js:138
NgZone.runOutsideAngular @ core.js:4708
ApplicationRef.tick @ core.js:5925
ApplicationRef._loadComponent @ core.js:5984
ApplicationRef.bootstrap @ core.js:5872
(anonymous) @ core.js:5592
PlatformRef._moduleDoBootstrap @ core.js:5592
(anonymous) @ core.js:5513
ZoneDelegate.invoke @ zone.js:388
onInvoke @ core.js:4760
ZoneDelegate.invoke @ zone.js:387
Zone.run @ zone.js:138
(anonymous) @ zone.js:872
ZoneDelegate.invokeTask @ zone.js:421
onInvokeTask @ core.js:4751
ZoneDelegate.invokeTask @ zone.js:420
Zone.runTask @ zone.js:188
drainMicroTaskQueue @ zone.js:595
Promise.then (async)
scheduleMicroTask @ zone.js:578
ZoneDelegate.scheduleTask @ zone.js:410
Zone.scheduleTask @ zone.js:232
Zone.scheduleMicroTask @ zone.js:252
scheduleResolveOrReject @ zone.js:862
ZoneAwarePromise.then @ zone.js:962
PlatformRef.bootstrapModule @ core.js:5579
(anonymous) @ main.ts:11
../../../../../src/main.ts @ main.bundle.js:82
__webpack_require__ @ inline.bundle.js:55
0 @ main.bundle.js:97
__webpack_require__ @ inline.bundle.js:55
webpackJsonpCallback @ inline.bundle.js:26
(anonymous) @ main.bundle.js:1
AppComponent.html:1 ERROR CONTEXT DebugContext_ {view: {…}, nodeIndex: 0, nodeDef: {…}, elDef: {…}, elView: {…}}
View_AppComponent_0 @ AppComponent.html:1
proxyClass @ compiler.js:14659
DebugContext_.logError @ core.js:15038
ErrorHandler.handleError @ core.js:1515
(anonymous) @ core.js:5925
ZoneDelegate.invoke @ zone.js:388
Zone.run @ zone.js:138
NgZone.runOutsideAngular @ core.js:4708
ApplicationRef.tick @ core.js:5925
ApplicationRef._loadComponent @ core.js:5984
ApplicationRef.bootstrap @ core.js:5872
(anonymous) @ core.js:5592
PlatformRef._moduleDoBootstrap @ core.js:5592
(anonymous) @ core.js:5513
ZoneDelegate.invoke @ zone.js:388
onInvoke @ core.js:4760
ZoneDelegate.invoke @ zone.js:387
Zone.run @ zone.js:138
(anonymous) @ zone.js:872
ZoneDelegate.invokeTask @ zone.js:421
onInvokeTask @ core.js:4751
ZoneDelegate.invokeTask @ zone.js:420
Zone.runTask @ zone.js:188
drainMicroTaskQueue @ zone.js:595
Promise.then (async)
scheduleMicroTask @ zone.js:578
ZoneDelegate.scheduleTask @ zone.js:410
Zone.scheduleTask @ zone.js:232
Zone.scheduleMicroTask @ zone.js:252
scheduleResolveOrReject @ zone.js:862
ZoneAwarePromise.then @ zone.js:962
PlatformRef.bootstrapModule @ core.js:5579
(anonymous) @ main.ts:11
../../../../../src/main.ts @ main.bundle.js:82
__webpack_require__ @ inline.bundle.js:55
0 @ main.bundle.js:97
__webpack_require__ @ inline.bundle.js:55
webpackJsonpCallback @ inline.bundle.js:26
(anonymous) @ main.bundle.js:1
core.js:3688 Angular is running in the development mode. Call enableProdMode() to enable the production mode.

Is something other missing?

I have pushed the current state of my demo project to github


#8

Ok, my fault!

I have set the wrong ID to identify the container! After fixing this I actually see the bpmn.io logo :slight_smile: