Using dmn-js with Angular 5


#1

I tried to include the dmn-js-modeler into my Angular 5 project according to the example project:
https://github.com/bpmn-io/dmn-js-examples/blob/master/simple-commonjs/app/app.js

The import statement

  import * as Modeler from 'dmn-js/lib/Modeler.js';

results in the following error:

ERROR in ./node_modules/dmn-js-decision-table/lib/features/decision-table-head/components/OutputNameComponent.js
Module parse failed: Unexpected token (102:6)
You may need an appropriate loader to handle this file type.
| 
|     return (
|       <th
|         onContextmenu={ this.onContextmenu }
|         onFocus={ this.onFocus }
 @ ./node_modules/dmn-js-decision-table/lib/features/decision-table-head/DecisionTableHeadEditor.js 2:0-67

Can you help me understand and solve the root cause for this incompatibility?
Is there any other way to include dmn-js into my app?

My setup comprises

angular-cli@1.6.5
webpack@3.10.0
dmn-js@1.2.2
diagram-js@0.27.2

#2

It seems like you’re missing transpilation for JSX syntax. Are you using a transpiler in your setup?


#3

You are right, I was missing a transpilation step in the first place.
When I included a gulp task to transpile the dmn-js dependencies (inline) I managed to get the webpack bundle to be built successfully: The gulp task:

gulp.task('client:transpile', function () {
    return gulp.src([
        'client/node_modules/dmn-js*/**/*.js',
        'client/node_modules/table-js/**/*.js',
        '!/node_modules/'
    ], { base: './' })
        .pipe(babel({
            plugins: [
                ['transform-react-jsx', { 'pragma': 'h' }],
                ['transform-object-rest-spread']
            ],
            presets: ['env']
        }))
        .pipe(gulp.dest('./'));
});

The next issue emerged on the app startup:

Error: No provider for "moddle"! (Resolving: touchInteractionEvents -> move -> modeling -> elementFactory -> drdFactory -> moddle)

I tried to follow the Camunda Modeler client project which is admittedly very hard to comprehend for me as a JavaScript greenhorn.

I see that you don’t target Angular apps directly. But you could help me a lot by pointing me in the right direction which toolchain to use that complies with your roadmap.

Or maybe you have plans to offer the bpmn.io-packages as directly deployable modules, possibly even with type definitions included? :gift: :innocent:


#4

I’m not with Camunda, so I can’t speak to the roadmap - though I have the same question.

I struggled mightily with Angular 5. There is a good project on GitHub that used Angular 2, but it breaks badly with Angular 5. I can try to dig up the URL if you can’t find it. That project uses the reactive features of Angular - so if you aren’t an Angular expert, you might struggle with it.

I ended up going with React. The trick with all of these shadow DOM-based frameworks is to respect their lifecycle and mount the modeler (or viewer), in the case of React, within the componentDidMount() lifecycle hook. The modeler needs a place in the DOM to display itself, and shadow DOM-based frameworks need to be pretty far down the lifecycle before you can attach to a regular old DOM element.

I did get Angular 5 to display the modeler, but I had endless issues with CSS. In my React app, I had to centralize all of the CSS files from the modeler, the properties panel extension, etc. and import them explicitly or physically copy and move them into my project folder (from node_modules). I’m also a javascript newbie, so I’m sure there was an easier way.


#5

Thanks @snewport and @Hubel for sharing your experiences.

Unfortunately we cannot provide dedicated support for integrating our toolkits into framework XYZ. We’ll provide examples for the various ways how to bundle and integrate dmn-js into a web application though once we’re getting closer to a stable 2.0.

We rely on the community for concrete examples how to integrate with framework XYZ, version N and are happy to share these examples with others in need. So if you found a robust solution and would like to contribute back, share it.

As a general advice for integrating our libraries (not talking specifically about dmn-js):

  • Use the pre-built version which exposes a global if you do not plan to apply larger customizations.

  • Follow the bundling examples to understand which tweeks / transpilers are needed to configure things.

  • If you’re working in an environment where TypeScript is used, learn about how to make it ignore the fact that there are no type definitions for our toolkits.

  • If you’re using a client-side, component based JS library or framework hook into their component life-cycle and mount the Modeler / Viewer into the component. @snewport mentioned componentDidMount / componentWillUnmount for ReactJS. There is something similar for each of these libraries.

  • Report inconveniences found when integrating.

Hope this sheets some light on our strategy here.

If you’ve got further questions, please ask them.


#6

Hi @Hubel
Were you able to integrate dmn-js in Angular5 project? I am struggling on how to import DmnJs to my app component.


#7

I was able to make it to work with Anuglar 5 with help of Ampati Hareesh on SO. You can access the working POC from this repo -
https://github.com/HariDongli/dmn-js-angular-stack


#8

How to embed Pallate also,do you have any idea


#9

Are you talking about below pallete?

image

If yes, the code in github repo shows Viewer example where pallets is hidden. The pallete shows up when you use Modeler. You need to import DmnJs instead of Viewer from dmn-js lib.

import DmnJS from 'dmn-js';

And then, initialize new object using below -

 var viewer = new DmnJS({
      container: '.canvas'
    });

#10

Thanks for you reply ,i have tried like this

import Modeler from 'dmn-js/lib/Modeler';

var viewer = new Modeler({
  container: '.canvas'
});

and it work ,thanks @philippfromme