How to include bpmn.js/dmn.js into my angular 2 project

Developers Modeler
1

Hi,
I am working on a web application that has angular 4 and webpack: “2.3.3”. I am trying to install bpmn.js / dmn.js with npm . On trying to use it in my applications it is throwing me lodash errors,

import * as bpmnJs from ‘bpmn-js’;

this.someService.getDiagram(‘dmnName’).then(res => {
console.log(bpmnJs);
});

I even use the latest version of lodash 4.17.4. Can anyone help me out with a better solution to import bpmn.js into my project?

2

Can you please provide the errors you get? I guess it’s an error due to bpmn.js/dmn.js using lodash version 3.x.x and you using version 4.x.x. They removed category names from module paths:

// in 3.10.1
var chunk = require('lodash/array/chunk');

// in 4.0.0
var chunk = require('lodash/chunk');
3

Hi Philippfromme,
Thanks for your response. I tried using the lodash version 3.10.1 instead of 4.17.1 then I got the response but I am not getting tables displayed in an effective way.The errors I got from 4.17.1 are :

Can’t resolve ‘lodash/collection/filter’

/~/dmn-js/lib/Viewer.js
Module not found: Error: Can’t resolve ‘lodash/object/omit’ in ‘C:\Users\harish\workspace\caps-client\node_modules\dmn-js\lib’
@ ./~/dmn-js/lib/Viewer.js 11:11-40
@ ./~/dmn-js/index.js
@ ./src/app/program/components/programProfile/components/programLevelConfiguration/program-level-configuration.component.ts
@ ./src/app/program/program.module.ts
@ ./src/app/app.module.ts
@ ./src/app/index.ts
@ ./src/main.browser.ts
@ multi (webpack)-dev-server/client?http://localhost:3000 ./src/main.browser.ts

./~/dmn-js/lib/Viewer.js
Module not found: Error: Can’t resolve ‘lodash/object/assign’ in ‘C:\Users\harish\workspace\caps-client\node_modules\dmn-js\lib’
@ ./~/dmn-js/lib/Viewer.js 9:13-44
@ ./~/dmn-js/index.js
@ ./src/app/program/components/programProfile/components/programLevelConfiguration/program-level-configuration.component.ts
@ ./src/app/program/program.module.ts
@ ./src/app/app.module.ts
@ ./src/app/index.ts
@ ./src/main.browser.ts
@ multi (webpack)-dev-server/client?http://localhost:3000 ./src/main.browser.ts